Components: 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 https://github.com/angular/material2/issues/3239#issuecomment-312963660

[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.

--------------------------------------------
| 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.

[jelbourn]

Closing this since the Material Design 2018 spec update moved away from the idea of the colored "toolbar" at the top of content, so we're not doing much with it now. At the end of the day, though, the toolbar is little more than a div with a background color.

[Karasuni]

Closing this since the Material Design 2018 spec update moved away from the idea of the colored "toolbar" at the top of content, so we're not doing much with it now. At the end of the day, though, the toolbar is little more than a div with a background color.

Does that mean you will be retiring components like toolbar or will you just stop supporting and updating them?

[Splaktar]

@Karasuni See https://github.com/angular/components/issues/13964 and https://github.com/angular/components/issues/16367.

[Karasuni]

Will the top-app-bar be supported in md-dialog components?

[Splaktar]

Will the top-app-bar be supported in md-dialog components?

I don't believe that is part of the spec. However, you can always add a div with a background color (even using the mat-color($app-primary) mixing) and class="mat-elevation-z1" and styles for negative margins to create your own dialog toolbars.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}