Angular 5 Material Dialog box with header strip on top

Question

When the Angular Materail dialog box is added and by default it comes up with normal dialog box without any borders or any close button with top strip on it. But here i am trying to add the strip on top the Dialog box as shown below in the picture.

I am planning to show the black strip on top of the dialog box which should touch the above 2 corners. But the problem is if i add any div then i think its not good solution. Is there any Angular Material feature available as of now. So for that i have added the div on top of it. But i think its not a feasible solution. I have to add those strips on multiple dialog boxes. So can anybody help me on this?

The code is below.

<div style="background-color: black; height:30px; width: auto"></div>
<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Stackblitz Code url

Demo

Can anybody suggest me how to achieve this?

Something like this? See below.

Thanks

Solution 1

I just played around using the Inspector Tool and this can be achieved using this:

.mat-dialog-container {
    padding-top: 0 !important;
}

dialog-overview-example-dialog.ng-star-inserted > div {
    margin-right: -24px;
    margin-left: -24px;
}

.mat-dialog-actions {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mat-dialog-title {
  margin-top: 15px !important;
}

Note: I haven't looked for any solution which is provided by the framework itself.

Solution 2

Use the build in toolbar that is part of material.

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Dialog Title</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
</h4>
<div mat-dialog-content>
  Modal Content here
</div>

Custom CSS for header

.task-header {
    background-color: transparent;
    padding: 0 5px;
     height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}