title: Angular 5 Material Dialog box with header strip on top
body: <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/ot6H6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ot6H6.png" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <p>The code is below.</p>
  
  <pre><code>&lt;div style="background-color: black; height:30px; width: auto"&gt;&lt;/div&gt;
  &lt;h1 mat-dialog-title&gt;Hi {{data.name}}&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
    &lt;p&gt;What's your favorite animal?&lt;/p&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput [(ngModel)]="data.animal"&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-button (click)="onNoClick()"&gt;No Thanks&lt;/button&gt;
    &lt;button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial&gt;Ok&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-mk42ag?file=app%2Fdialog-overview-example-dialog.html" rel="noreferrer">Stackblitz Code url</a></p>
  
  <p><a href="https://angular-mk42ag.stackblitz.io" rel="noreferrer">Demo</a></p>
  
  <p>Can anybody suggest me how to achieve this?</p>
  
  <p>Something like this? See below.
  <a href="https://i.stack.imgur.com/0LIkr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0LIkr.png" alt="enter image description here"></a></p>
  
  <p>Thanks</p>