Angular 8 – Directives
”; Previous Next
Angular 8 directives are DOM elements to interact with your application. Generally, directive is a TypeScript function. When this function executes Angular compiler checked it inside DOM element. Angular directives begin with ng- where ng stands for Angular and extends HTML tags with @directive decorator.
Directives enables logic to be included in the Angular templates. Angular directives can be classified into three categories and they are as follows −
Attribute directives
Used to add new attributes for the existing HTML elements to change its look and behaviour.
<HTMLTag [attrDirective]=”value” />
For example,
<p [showToolTip]=”Tips” />
Here, showToolTip refers an example directive, which when used in a HTML element will show tips while user hovers the HTML element.
Structural directives
Used to add or remove DOM elements in the current HTML document.
<HTMLTag [structuralDirective]=”value” />
For example,
<div *ngIf=”isNeeded”>
Only render if the *isNeeded* value has true value.
</div>
Here, ngIf is a built-in directive used to add or remove the HTML element in the current HTML document. Angular provides many built-in directive and we will learn in later chapters.
Component based directives
Component can be used as directives. Every component has Input and Output option to pass between component and its parent HTML elements.
<component-selector-name [input-reference]=”input-value”> … </component-selector-name>
For example,
<list-item [items]=”fruits”> … </list-item>
Here, list-item is a component and items is the input option. We will learn how to create component and advanced usages in the later chapters.
Before moving to this topic, let’s create a sample application (directive-app) in Angular 8 to work out the learnings.
Open command prompt and create new Angular application using below command −
cd /go/to/workspace
ng new directive-app
cd directive-app
Create a test component using Angular CLI as mentioned below −
ng generate component test
The above create a new component and the output is as follows −
CREATE src/app/test/test.component.scss (0 bytes) CREATE src/app/test/test.component.html (19 bytes) CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (262 bytes) UPDATE src/app/app.module.ts (545 bytes)
Run the application using below command −
ng serve
DOM Overview
Let us have a look at DOM model in brief. DOM is used to define a standard for accessing documents. Generally, HTML DOM model is constructed as a tree of objects. It is a standard object model to access html elements.
We can use DOM model in Angular 8 for the below reasons −
We can easily navigate document structures with DOM elements.
We can easily add html elements.
We can easily update elements and its contents.
Structural directives
Structural directives change the structure of DOM by adding or removing elements. It is denoted by * sign with three pre-defined directives NgIf, NgFor and NgSwitch. Let’s understand one by one in brief.
NgIf directive
NgIf directive is used to display or hide data in your application based on the condition becomes true or false. We can add this to any tag in your template.
Let us try ngIf directive in our directive-app application.
Add the below tag in test.component.html.
<p>test works!</p>
<div *ngIf=”true”>Display data</div>
Add the test component in your app.component.html file as follows −
<app-test></app-test>
Start your server (if not started already) using the below command −
ng serve
Now, run your application and you could see the below response −
If you set the condition ngIf=“false” then, contents will be hidden.
ngIfElse directive
ngIfElse is similar to ngIf except, it provides option to render content during failure scenario as well.
Let’s understand how ngIfElse works by doing a sample.
Add the following code in test.component.ts file.
export class TestComponent implements OnInit {
isLogIn : boolean = false;
isLogOut : boolean = true;
}
Add the following code in test.component.html file as follows −
<p>ngIfElse example!</p>
<div *ngIf=”isLogIn; else isLogOut”>
Hello you are logged in
</div>
<ng-template #isLogOut>
You”re logged out..
</ng-template>
Finally, start your application (if not done already) using the below command −
ng serve
Now, run your application and you could see the below response −
Here, isLogOut value is assigned as true, so it goes to else block and renders ng-template. We will learn ng-template later in this chapter.
ngFor directive
ngFor is used to repeat a portion of elements from the list of items.
Let’s understand how ngFor works by doing a sample.
Add the list in test.component.ts file as shown below −
list = [1,2,3,4,5];
Add ngFor directive in test.component.html as shown below −
<h2>ngFor directive</h2>
<ul>
<li *ngFor=”let l of list”>
{{l}}
</li>
</ul>
Here, the let keyword creates a local variable and it can be referenced anywhere in your template. The let l creates a template local variable to get the list elements.
Finally, start your application (if not done already) using the below command −
ng serve
Now, run your application and you could see the below response −
trackBy
Sometimes, ngFor performance is low with large lists. For example, when adding new item or remove any item in the list may trigger several DOM manipulations. To iterate over large objects collection, we use trackBy.
It is used to track when elements are added or removed. It is performed by trackBy method. It has two arguments index and element. Index is used to identity each element uniquely. Simple example is defined below.
Let’s understand how trackBy works along