fa-icon throws error on valid closing tag

Question

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:

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

Rajeev Kumar · Accepted Answer · 2020-11-08T09:09:29.077

1

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.

edited Nov 08 '20 at 09:09

answered Nov 05 '20 at 16:19

Rajeev Kumar

371
2
9

1

I actually just realized that myself and posted my own answer mere seconds ago. – Lord Drake Nov 05 '20 at 16:20
@Lord Please accept my answer if this is fixed your issue. – Rajeev Kumar Nov 05 '20 at 16:22
Could you add some explanation as to why such a misleading error is given instead of referencing the attribute? May be useful for someone else later down the line. – Lord Drake Nov 05 '20 at 17:15
Thank you, I meant add it to the answer. – Lord Drake Nov 07 '20 at 03:26

score 0 · Answer 2 · answered Nov 05 '20 at 16:18

0

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

answered Nov 05 '20 at 16:18

Lord Drake

172
2
12

fa-icon throws error on valid closing tag

2 Answers2