Toolbar in Dialog

[Karasuni]

Is there any support or planned support for md-toolbar in dialog/modal/popups? In angularjs-material this was a built-in feature:

What I observe in angular-material2 is a padding that applies to the whole dialog box which prevents the toolbar from properly extending from end to end:

<md-toolbar [color]="['primary']">md-toolbar</md-toolbar>
<h1 md-dialog-title>md-dialog-title</h1>
<md-dialog-content>
  md-dialog-content
</md-dialog-content>
<md-dialog-actions>
  <button md-raised-button [color]="['primary']" disabled>Send Feedback</button>
  <button md-button md-dialog-close [color]="['warn']">Cancel</button>
</md-dialog-actions>

[julianobrasil]

You can use the panelClass to customize the dialog: https://plnkr.co/edit/s2RVEBQVxtDUmUBlUp2t?p=preview.

Take a look at this @willshowell's #3239 (comment)

[Karasuni]

There's no built-in support or plans to support it?

I tried to declare the css at the component level since those definitions should not be on the global scope. It doesn't appear to work though: Plunker

[julianobrasil]

There's no built-in support or plans to support it?

I don't know (probably will, becase it is in material design specs under the title "Full-screen dialog titles"). @crisbeto can tell you this.

I tried to declare the css at the component level since those definitions should not be on the global scope

In that case you must set encapsulation to none in @Component arg object (although I also think that it should be possible without changing the encapsulation):

@Component({
  selector: 'dialog-result-example',
  templateUrl: 'dialog-result-example.html',
  styleUrls: ['dialog-result-example.css'],
  encapsulation: ViewEncapsulation.None
})

[jelbourn]

@crisbeto thoughts? I could potentially see this as an option on the dialog-title

[crisbeto]

It makes sense to have it on the title, but I'm reluctant to add a dependency between the toolbar and the dialog. I'd rather duplicate some styles and add a color input on the title.

[jelbourn]

Yeah, I was thinking more of an option to not have any padding

[marcincichocki]

What is wrong with nagative margin on md-toolbar(http://plnkr.co/edit/ttsP4v?p=preview)?

[crisbeto]

There's nothing inherently wrong with reusing md-toolbar, but in general we try to avoid dependencies between Material modules.

[emilio-martinez]

Maybe the Dialog could load a component that has a toolbar and a portal to then load a template or component in that portal.

Dialog
--------------------------------------------
| DialogWithToolbar                        |
| ---------------------------------------- |
| | Toolbar                              | |
| | ------------------------------------ | |
| | Portal<MyComponent|TemplateRef>      | |
| ---------------------------------------- |
--------------------------------------------

Dialog <= Portal<DialogWithToolbar> <= Portal<MyComponent|TemplateRef>

[tawani]

.mat-toolbar {
    margin: -24px;
    margin-bottom: 0;
    width: auto;
}
.mat-dialog-content {
    margin: 0 -24px;  
    padding:0 !important;   
}

.mat-toolbar-row, .mat-toolbar-single-row {
    height: 40px !important;
}

[victorcarvalhosp]

I solved creating a simple new component like this:

mat-toolbar-dialog.component.ts

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-mat-toolbar-dialog',
  templateUrl: './mat-toolbar-dialog.component.html',
  styleUrls: ['./mat-toolbar-dialog.component.scss']
})
export class MatToolbarDialogComponent implements OnInit {


  @Input()
  title: string;

  constructor() { }

  ngOnInit() {
  }

}

mat-toolbar-dialog.component.scss

.mat-toolbar {
  margin: -24px;
  margin-bottom: 0;
  width: auto;
}

.mat-dialog-content {
  margin: 0 -24px;
  padding: 0 !important;
}

.mat-toolbar-row, .mat-toolbar-single-row {
  width: auto !important;
}

.spacer {
  flex: 1 1 auto;
}

mat-toolbar-dialog.component.html

<mat-toolbar>
  <button mat-icon-button class="left-icon" mat-dialog-close>
    <mat-icon>close</mat-icon>
  </button>
  <span>{{title}}</span>
  <span class="spacer"></span>
  <ng-content select="[right]"></ng-content>
</mat-toolbar>

And just use like that:

<app-mat-toolbar-dialog title="Dialog Title">
  <div right>
    <button type="button" mat-icon-button>
    <mat-icon>add</mat-icon>
    </button>
    <button type="button" mat-icon-button>
    <mat-icon>search</mat-icon>
    </button>
  </div>
</app-mat-toolbar-dialog>

[jpike88]

I just started migrating from ng1 to ng2, and the lack of toolbar in dialog support out of the box is a bit of a surprise. How hard would it be to make this happen.