The event handler in the previous section sets the property collapsed to false but that does not modify the template. In normal code, we would have written if (this.collapsed) { ... }
. In templates, we cannot use that, but we can use ngIf
.
A directive is an extension to normal HTML tags and attributes. It can define custom behavior. A custom component, such as the About page, can be seen as a directive too. The ngIf
condition is a built-in directive in Angular. It is a custom attribute that displays the content if the specified value is true.
If a piece of a component needs to be shown a variable an amount of times, you can wrap it in a template
tag. Using the ngIf
(or ngFor
) directive, you can control how often it is shown (in case of ngIf
, once or zero times). The template
tag will look like this:
<template [ngIf]="collapsed"> <div>Content</div> </template>
You can abbreviate this as follows...