Search code examples
angularangular-fontawesome

fa-icon throws error on valid closing tag

I have an Angular application I'm working on, in this application I have generated a small component for listing files and I'm working on some icons for editing on of the fields. However I've encountered an issue with the fa-icon component. I have two icons side by side. The first refuses to allow a closing tag, the second requires it. (I assume the second is actually being nested at this point) I cannot apply a closing tag to both without it giving me this error:

enter image description here

My Template:

<form [formGroup]="form">
  <mat-grid-list class="grid" cols="4" rowHeight="32">
    <mat-grid-tile class="tile" mat-grid-tile-header>{{type}}</mat-grid-tile>
    <mat-grid-tile class="tile" mat-grid-tile-header>
      <span [hidden]="editing" (click)="editing = true">{{name}}</span>
      <form [formGroup]="edit" [hidden]="!editing" ng-submit="editing = false">
        <input type="text" formControlName="name" ng-required (keyup)="onKeyUp($event)" />
        <fa-icon class"confirm" [icon]="faConfirm" (click)="onSubmit()"></fa-icon>
        <fa-icon class="cancelIcon" [icon]="faConfirm" (click)="onCancel()"></fa-icon>
      </form>
    </mat-grid-tile>
    <mat-grid-tile class="tile" mat-grid-tile-header>{{scanDate}}
    </mat-grid-tile>
    <mat-grid-tile class="tile" mat-grid-tile-header>
      <mat-checkbox formControlName="delete" aria-label="Delete"></mat-checkbox>
    </mat-grid-tile>
  </mat-grid-list>
</form>

I cannot for the life of me figure out why this occurs. Any thoughts?

Angular: 9.1.12 @fortawesome/angular-fontawesome: 0.5.0

Solution

  • Looks like, you have missed one equal sign (=) in class attribute. Check the below code. Hope it will fix your issue.

    <fa-icon class="confirm" [icon]="faConfirm" (click)="onSubmit()"></fa-icon>

    Why such error comes? Based on my understanding, since the attributes are given were not in the correct format as per HTML standard, therefore HTML engine could not identify this as the correct start tag of and ultimately it started giving an error in the closing tag. Generally, in any HTML content, if you see any error given in the closing tag means the start tag is not in the correct format. Definitely, there is some type of error in the start tag syntax and you should look very closely at the start tag syntax then you will be able to fix this kind of issue quickly.