*ngif property binding error with Angular and IONIC 5

Question

I am running into issue with displaying an ICON in my IONIC Angular App. In my case i have 1 or more phone numbers and i would like to provide a visual indication via icon what type of Phone Number it is like Home , Mobile etc.

 <ion-text *ngFor="let phone of contact.phones" color="medium">
    <div *ngif="phone.type === 'Mobile'">Hello</div>
      <p><b>({{phone.type}})<ion-icon ios="business" ></ion-icon></b> ({{phone.number | slice:0:3 }}) {{phone.number | slice:3:6 }}-{{phone.number | slice:6:10 }} </p>
 </ion-text>

There is 2 issues i have, when using to just test the phone.type via *ngif i get error I checked and have the CommonModule loaded..

Also what is the best approach to check on value of phone.type and set a certain icon based on value ? would it be an *ngif in the

and only show that p if it is a certain value ?

Answer 1

Your error says it all: "ngif" isnt known property of div. It's a typo, instead use:

*ngIf

(Notice the case-sensitive characters)

If you have multiple cases you want to switch styling or the view respectively, you can use an NgSwitch.

<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>