MatToolbar: Attempting to combine different toolbar modes

Question

Getting the following error :

MatToolbar: Attempting to combine different toolbar modes. Either specify multiple <mat-toolbar-row> elements explicitly or just place content inside of a <mat-toolbar> for a single row.

My code already has a mat-toolbar-row applied within a mat-toolbar. Yet, the error is persistent.

Code Snippet of html file is as follows :

<div class="wallpaper">
<mat-toolbar color="primary">
        <mat-toolbar-row>
         <span>Welcome, User</span>
         <span class="example-fill-remaining-space"></span>
         <span class="align-center"></span>
         <span class="example-spacer"></span>
         <button mat-button>Create Incident </button>
         <a [routerLink]="['/closed']"><button mat-button style="color: white">Closed Incident</button></a>
        
         <span class="example-spacer"></span>
         <a [routerLink]="['/login']"><button mat-button>Logout</button></a>
         <img src="../../assets/hsbc_logo3.png" class="logo-hsbc"/>
        </mat-toolbar-row>
        <h1>INCIDENT MANAGEMENT SYSTEM</h1>
</mat-toolbar>

<h1>Welcome to Incident Management System</h1>   
<mat-card style="background: transparent">    
    <!-- Title of an Card -->    
    <mat-card-title>Incident Details</mat-card-title>    
    <mat-card-content>    
        <form>    
            <table >    
                <tr>    
                    <td>    
                        <mat-form-field class="demo-full-width">    
                            <mat-label >Description</mat-label>
                            <textarea [(ngModel)]="incident.description" name="description" cdkTextareaAutosize
                            cdkAutosizeMinRows="1"
                            cdkAutosizeMaxRows="5"  matInput></textarea>    
                        </mat-form-field>    
                    </td>
                    <td>    
                           <h4>{{message}}</h4>    
                    </td>     
                </tr>    
                    
                <tr>    
                    <td>    
                        <mat-form-field class="demo-full-width">    
                            <input matInput [matDatepicker]="picker" placeholder="Incident Date" [(ngModel)]="incident.date" name="date" >    
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>    
                            <mat-datepicker touchUi="true" #picker></mat-datepicker>    
                        </mat-form-field>    
                    </td>    
                </tr>  
                <tr>    
                    <td colspan="2">    
                        <mat-form-field class="demo-full-width">    
                            <input matInput placeholder="Incident Category" [(ngModel)]="incident.category" name="category">    
                        </mat-form-field>    
                    </td>    
                </tr>  
                <tr>    
                    <td >    
                        <mat-form-field class="demo-full-width">    
                            <mat-select placeholder="Application Owner" [(ngModel)]="incident.owner" name="owner">    
                              <mat-option style="background-color:grey">-- Select--</mat-option>    
                              <mat-option style="background-color:cornsilk" value="1">BRV</mat-option>    
                              <mat-option style="background-color:cornsilk" value="2">FRTB</mat-option>    
                              <mat-option style="background-color:cornsilk" value="3">FSA</mat-option>    
                          </mat-select>
                        </mat-form-field>    
                    </td>    
                    <td>    
                        <mat-form-field>    
                            <mat-select placeholder="Symphony Group" [(ngModel)]="incident.symphony_group" name="symphony_group">    
                                <mat-option style="background-color:grey">-- Select --</mat-option>    
                                <mat-option style="background-color:cornsilk" value="1">MMO SheHacks</mat-option>    
                                <mat-option style="background-color: cornsilk" value="2">MMO IT INDIA</mat-option>    
                            
                            </mat-select>    
                        </mat-form-field>    
                    </td>
                </tr>  
                <tr>    
                    <td>     
                      <mat-form-field>    
                          <mat-select placeholder="Application" [(ngModel)]="incident.application" name="application">    
                              <mat-option style="background-color:grey">-- Select--</mat-option>    
                              <mat-option style="background-color:cornsilk" value="1">BRV</mat-option>    
                              <mat-option style="background-color:cornsilk" value="2">FRTB</mat-option>    
                              <mat-option style="background-color:cornsilk" value="3">FSA</mat-option>    
                          </mat-select>    
                      </mat-form-field>
                    </td>    
                    <td>    
                        <mat-form-field>    
                            <mat-select placeholder="Status" [(value)]="status"  [(ngModel)]="incident.status" name="status">    
                                <mat-option style="background-color:grey">-- Select --</mat-option>    
                                <mat-option style="background-color: green" value="1">Available</mat-option>    
                                <mat-option style="background-color: orange" value="2">Reduced</mat-option>    
                                <mat-option style="background-color: red" value="3">Unavailable</mat-option>    
                            </mat-select>    
                        </mat-form-field>    
                    </td> 
                       
                </tr>    
                  
                <tr>    
                    <td colspan="2">    
    
                    </td>    
                </tr>    
                <tr>    
                    <td colspan="2" class="content-center">    
                        <button style="margin:5px" mat-raised-button color="accent" (click)="submit()">Submit Incident</button>    
                        <button style="margin:5px" mat-raised-button color="accent" (click)="reset()">Clear</button> 
                        <button style="margin:5px" mat-raised-button color="accent">Raise BGCR</button>
                        <button style="margin:5px" mat-raised-button color="accent">Raise Jira</button>  
                    </td>    
                </tr>    
            </table>    
        </form>    
    </mat-card-content>    
</mat-card>   
</div>

Answer 1

You need to remove the <h1>INCIDENT MANAGEMENT SYSTEM</h1> or place it inside the <mat-toolbar-row>.