Example For *Ngif Condition In Angular 4.
Now, in Angular 4, *Ngif is slightly changed into if and else condition with added advantages. Here, I will explain how to use the *Ngif Condition with then and else in Angular 4.
In order to work with this new *Ngif, you have to update your latest Angular CLI by the following command.
npm install -g @angular/cli
After the installation of your Angular CLI it upgrades to the latest Angular CLI.(Angular 4)
After Angular CLI updates, create the new Project
ng new Angular4
After creating a new project, now we modify our app.component.ts as follow.
Here, I had to check if the condition with Hero Id is equal to 1; then it will call #ifcondition template otherwise it will bind the #elsecondition template.
Here, I have used ‘my-app’ as my selector. So I changed my index.html as follows,
Now, run the application with the following command.
Then, we get the following result.
.
AngularJS Recipes