The ngIf directive is used to a make elements appear or disappear from the view. You will see it written in 2 different ways:
The Complete Angular Course: Introduction
What is Angular
Setting up for Angular Web Development
Angular: Components
Event Handling
Interpolation
Understanding Inputs and Ouputs
Template Reference
Understanding Routing in Angular
Navigation - Navigate between routes
Attribute Directives in Angular
Angular ngClass Directive
ngIf Directive in Angular
ngSwitch Directive in Angular
ngFor Directive in Angular: Repeating HTML
Route Parameter - In Angular
Pipes in Angular
Loading and Using JavaScript in Angular
Hosting Your Angular Website
Dependency Injection
Project 1: Building a Social Media Site Part 1: Setup
Project 1: Building a Social Media Site Part 2: Home Page
Project 1: Building a Social Media Site Part 3: Authenticator
Project 1: Building a Social Media Site Part 4: Login System Part 1
Angular Project 1: Building a Social Media Site Part 5: Login System Part 2
Angular Project 1: Building a Social Media Site Part 6: User Profiles with Cloud Firestore Database
Angular Project 1: Building a Social Media Site Part 7: Create Post Component
Angular Project 1: Building a Social Media Site Part 8: Uploading Posts
Angular Project 1: Building a Social Media Site Part 9: Displaying Posts
Angular Project 1: Building a Social Media Site Part 10: Reply Component
Angular Project 1: Building a Social Media Site Part 11: Leaving Comments
BehaviorSubject
ngIf Directive in Angular
[object Object]
[ngIf]="condition"
*ngIf="condition"
The one at the bottom is used by most developers. It is known as the shorthand syntax.
They work is exactly like an if statement. In an if statement, we begin with the if keyword and then we will provide a Boolean condition. If the condition is met, it will trigger the code in the code block.
if(condition) {
//...
}
It is the same here, we start with the ngIf directive and then a Boolean condition. If it is true, it will add the element to the page and render it onto the screen.
<div *ngIf="...">
</div>
You will need to keep in mind that the elements are not being hidden from the view. The elements are being added to the page when the Boolean value is true and they are being removed from the page when it is false.
Let’s see it in code. Open your Angular project on VS code. Go to the app component html page and add a div element and give it some text.
<div>Hello World</div>
[ngIf]
To begin, add the ngIf directive to the element, and set it to true using the compact syntax. We should see a hello world message.
<div [ngIf]="true">Hello World</div>
We should see a hello world message. Let’s verify that. Save the project and start the local server. Then open the browser and go to localhost:4200.
Hmmm... There is nothing there. Let’s take a look at console.
As you can see, we got an error message. It is saying that we did not provide a valid template reference for the directive.
Go back to VS code.
Take a look at where we placed the directive. It is inside a div element.
<div [ngIf]="true">Hello World</div>
In order for us to use the ngIf directive with the compact syntax, we need to wrap the elements with the ng-template tags and then place the ngIf directive inside the template tag
<ng-template [ngIf]="true">
<div>Hello World</div>
</ng-template>
Save the project and go to the browser.
As you can see, it is displaying the hello world message and we're not getting the error anymore.
*ngIf
Earlier we mentioned that the ngIf directive is written in two different ways. The first is the compact syntax way that we just did. We need to wrap the elements with the ng-template tags and then apply the directive to the template tag.
The second way is called the shorthand syntax. It is denoted by an asterisk symbol.
*ngIf
With this syntax, we can skip the step to wrap our elements with the ng template tags and place the ngIf directive directly inside the element.
<div *ngIf="true">Hello World</div>
Behind the scenes, if Angular sees this syntax, it will automatically wrap the element with the ng template tags so we do not need to do it manually. This is why this is the go-to syntax for most developers.
Save the project and go to the browser.
As you can see, we got the same results.
Else Blocks
We can also display something on the screen when the condition is false. Add another div and give it some text.
<div *ngIf="true">Hello World</div>
<div>Template 2</div>
Let’s say that we want to display this div element when the condition is false. We need to wrap the element with the ng template tags and then give it a template reference variable using the hash symbol.
<ng-template [ngIf]="true">
<div #template2>Template 2</div>
</ng-template>
Then locate the if statement of the directive and tell it which template to render when it is false. Put "else" and then the template we want to use.
<div *ngIf="true else template2">Hello World</div>
There is no shorthand syntax for the else block so we must wrap our elements with the ng template tags.
Change the value of the if statement to false so it will display the template.
<div *ngIf="false else template2">Hello World</div>
Save the project and go to the browser.
As you can see, it is using the template from the else block.
Recap
Let’s take a moment to recap what we have learned.
1. We learned how to use the ngIf directive to add or remove elements from our page.
2. We learned how to write the ngIf directive with the compact and shorthand syntax. For the compact syntax, we need to wrap our elements with the ng template tags and then apply the directive inside.
For the shorthand syntax, we put the directive directly on the element.
3. We also learned how to add else templates.
Error Handling
Sometimes you may get a binding error - "Can't bind to "ngIf" since it's not a known property." To fix this, check if the component is added to the "declarations" section of the app module.
@NgModule({
declarations: [
<REPLACE_WITH_COMPONENT>
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
