title: Panel in angular material design
body: <p><a href="https://i.stack.imgur.com/IJXUC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IJXUC.png" alt="Image for design"></a></p>
  
  <p>I want to create a panel like above using angular 6 material design.</p>
  
  <p>Use the below code </p>
  
  <pre><code>    &lt;mat-card&gt;
          &lt;mat-card-header&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="col-lg-9"&gt;
                      &lt;h3&gt;{{ pageTitle }}&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-3"&gt;
                      &lt;button mat-raised-button color="primary" [disabled]="!form.valid" (click)="form.ngSubmit.emit()"&gt;Save&lt;/button&gt;
                      &amp;nbsp;&amp;nbsp;
                      &lt;button type="reset" mat-raised-button color="accent" (click)="cancelForm()"&gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/mat-card-header&gt;
          &lt;mat-progress-bar mode="indeterminate" *ngIf="progress"&gt;&lt;/mat-progress-bar&gt;
          &lt;mat-divider&gt;&lt;/mat-divider&gt;
          &lt;mat-card-content&gt;
  
              &lt;mat-form-field&gt;
  &lt;input matInput placeholder="Name [(ngModel)]="vehicleMakeViewModel.name" name="name" required #name="ngModel"&gt;&lt;/mat-form-field&gt;
          &lt;/mat-card-content&gt;
  
      &lt;/mat-card&gt;
  </code></pre>
  
  <p>The above code produce the below template. The title and buttons are not properly align to the template. </p>
  
  <p><a href="https://i.stack.imgur.com/YFICR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YFICR.png" alt="template"></a></p>