What causes this error message in my Angular template: ERROR in E parsing template: Unexpected closing tag "div"

Question

This is my html template file:

<div class="container"
    fxLayout="row wrap"
    fxLayout.sm="column"
    fxLayout.xs="column"
    fxLayoutAlign.gt-md="space-around center"
    fxLayoutGap="10px" 
    fxLayoutGap.xs="0">

  <div fxFlex="100" dir="rtl">
    <div>
      <h3 *ngIf="">اطلاعات کاربر</h3>
      <hr>
    </div>
  </div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <h3>{{user.firstname | uppercase}}</h3>
        </mat-card-title>
      </mat-card-header>
      <img mat-card-image src="{{ baseURL + default_user.filename}}" >
      <mat-card-content>
        <p>{{user.lastname}}</p>
      </mat-card-content>
  </div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
    <mat-list>
      <h3>مشخصات</h3>
      <mat-list-item >
        <h4 matLine> {{user.firstname}} </h4>
        <p matLine> {{user.lastname</p>
            <!--
        <p matLine>
          <span> -- {{comment.author}} {{comment.date | date }} </span>
        </p>
            -->

      </mat-list-item>
    </mat-list>
  </div>
  <div [hidden]="user || errMess">
      <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
  </div>
  <div *ngIf="errMess">
    <h2>Error</h2>
    <h4>{{errMess}}</h4>
  </div>
</div>

<!--
        <form novalidate [formGroup]="commentForm" #cform="ngForm" (ngSubmit)="onSubmit()">
      <p>
        <mat-slider min="1" max="5" step="1" thumbLabel tickInterval="1" name="rating" formControlName="rating"></mat-slider>
        <mat-form-field class="full-width">
          <textarea matInput formControlName="comment" placeholder="Your Comment" rows=12></textarea>
          <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>
        </mat-form-field>
      </p>
      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="commentForm.invalid">Submit</button>
    </form>
-->

And this is the error I get:

ERROR in Errors parsing template: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
        </p>
      </mat-card-content>
  [ERROR ->]</div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
"): C:/Users/m/Desktop/SEP/version1-frontend/src/app/users/users.component.html@27:2, Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
    <h4>{{errMess}}</h4>
  </div>
[ERROR ->]</div>

<!--
"): C:/Users/m/Desktop/SEP/version1-frontend/src/app/users/users.component.html@52:0

What is the problem and why do I get this error message? I checked a couple of time each tags and it seems everything is ok and also i have no errors in my V code IDE but when I run the program by npm start I get the above error message! Please help me know what is the provlem and how can I solve it?

Answer 1

You need to close mat-card tag.

<div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h3>{{user.firstname | uppercase}}</h3>
    </mat-card-title>
  </mat-card-header>
  <img mat-card-image src="{{ baseURL + default_user.filename}}" >
  <mat-card-content>
    <p>{{user.lastname}}</p>
  </mat-card-content>
 </mat-card> //<--- **This one is missing**
</div>