TS2322: Type 'HTMLDivElement' is not assignable to type 'TemplateRef<NgIfContext<Skill[]>>'

user_14369072 0
Viewed 3495

I am trying to render a ng-template if condition in ngIf does not match, but the browser console throws this error pointing an error at "else":

TS2322: Type 'HTMLDivElement' is not assignable to type 'TemplateRef<NgIfContext<Skill[]>>'.

Template:

<ng-container *ngIf="memberSkills; else noSkills">
          <div
            *ngFor="let skillLevel of levelsListWithSkills; let i = index"
            [attr.data-index]="i"
          >
            <div
              id="{{ skillLevel.skillLevel }}"
              [ngClass]="
                skillLevel.skillLevel === 'Expert'
                  ? 'badge badge-pill bg-danger'
                  : skillLevel.skillLevel === 'Intermediate'
                  ? 'badge badge-pill bg-warning'
                  : skillLevel.skillLevel === 'Beginnner'
                  ? 'badge badge-pill bg-success'
                  : 'none'
              "
            >
              <span id="title">{{ skillLevel.skillLevel }}</span>
              <span *ngFor="let skill of levelsListWithSkills[i].skills">
                {{ skill }}
              </span>
            </div>
          </div>
        </ng-container>
        <div ng-template #noSkills>
          <span>Member has not added skills yet.</span>
        </div>
ng-template angular typescript
2 Answers

try

<ng-template #noSkills>
      <span>Member has not added skills yet.</span>
</ng-template>
user_96262430

Phrase ng-template is not a directive. It is Angular template for rendering HTML element. This way it should work:

<ng-template #noSkills>
     <span>Member has not added skills yet.</span>
</ng-template>
user_195021220
Related