CODEWITHSUNDEEP
angularangular-fontawesome
Lord Drake
Lord Drake

Reputation: 182

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

Upvotes: 0

Views: 366

Answers (2)

Rajeev Kumar
Rajeev Kumar

Reputation: 371

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.

Upvotes: 1

Lord Drake
Lord Drake

Reputation: 182

So the actual problem with my code was an overlooked typo. class="confirm was missing the =. I suspect the reason for the odd exception can be found in this question here: Very unintuitive "Unexpected closing tag" error on a valid template

Upvotes: 0

Related Questions