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

Answer 1

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