Angular 2: If value exists show html

Question

At the moment i have a service that pulls values from a number of APIs that I have written. In the template i wish to only output the following html if the value exists or is not empty in the results when they are fed to the template:

<li class="title rh-blue-lite-fg">{{ project.meta_header_one }}</li>

so I am trying to figure out how to wrap this in ngIf or is there some other way to do this so that this 'li' item only gets output if that value is present and not empty

Solution

I think you can use ngIF directive to check if project isn't null:

<li class="title rh-blue-lite-fg" *ngIf="project.meta_header_one">{{ project.meta_header_one }}</li>

Reference: https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

Comments

[Niraj]

what if i have a number to check. Above code will work if you are checking for string.

[foufrix]

transform the number to string it should be okay