angular 4 *ngIf not working as expected

Question

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?

Answer 1

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>