Search code examples
angularfirebasefirebase-realtime-databaseangular-ng-if

Angular4 ngIf Uncaught Error: Template parse errors


I need help with the following if statement. If c.name = 'Pipe Systems' then ng-template #PS should execute. If c.name= "Bathroom and Drainage" then ng-template #BD should execute.

I keep on getting "Uncaught Error: Template parse errors:". No matter what I try I just can't get the simple logic to work, I'm new to angular and I just can't get around this issue, if someone could please help me structure my ngIf correctly to simply filter the correct sub-category options when the main category options is selected. Below is my latest fail attempt.

<div class="form-group">
      <label for="category">Category</label>
      <select id="category" class="form-control">
        <option value=""></option>
        <option *ngFor="let c of categories$ | async" [value]="c.key">
          {{ c.name }}
        </option>
      </select>
    </div>
    <div class="form-group">
      <label for="subcategory">Sub-Category</label>
      <select id="subcategory" class="form-control">
        <option value=""></option>
        <div *ngIf="c.name = 'Pipe systems'; then PS>
          <ng-template #BD>
            <option *ngFor="let s of subcategoriesBD$ | async" [value]="s.key">
              {{ s.name }}
            </option>
          </ng-template>
          <ng-template #PS>
            <option *ngFor="let s of subcategoriesPS$ | async" [value]="s.key">
              {{ s.name }}
            </option>
          </ng-template>
        </div>
      </select>
    </div>

Database is as follows on Firebase:

enter image description here


Solution

  • Could be because of the =?, try:

    <div *ngIf="c.name === 'Pipe systems'; then PS">