CODEWITHSUNDEEP
angular
Vojislav Kovacevic
Vojislav Kovacevic

Reputation: 1525

angular 4 *ngIf not working as expected

I am displaying a bunch of li links that i get from a web service, all of those links have title and slug property.

The problem is, i do not want to display a li if the slug property is home, however the *ngIf directive is not making a difference in my code:

<ng-container *ngFor="let page of pages">
                <li *ngIf="page.slug!==home">
                    <a routerLink="{{ page.slug }}">{{ page.title }}</a>
                </li>
            </ng-container>

I get all the pages including the one with the slug of home. How can I avoid that?

Upvotes: 0

Views: 2360

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68655

Include home into the ''. Without '' Angular tries to find a property with name home, and because there is no such property with name home, it returns undefined. So comparing with your page.slug it returns true every time.

<ng-container *ngFor="let page of pages">
     <li *ngIf="page.slug !== 'home'">
          <a routerLink="{{ page.slug }}">{{ page.title }}</a>
     </li>
</ng-container>

Upvotes: 5

Related Questions