Angular Directives
In this post we will review some of the directives that can be used in Angular.
ngFor
Given an array of an object, you can use an ngFor directive to loop through it and instantiate an custom component for example, for each item inside the array. Inside the ngFor, you just use JavaScript, as shown below:
1
<custom-component *ngFor="let item of items" (itemSelected)="onItemSelected($event)" [item]="item"></custom-component>
You can also access the index of each item byt using ngFor built in variable index, you can use it for example, to display a numbered list, note that the as i is being used to rename the variable, and we are passing it into the itemIndex input as i + 1 because index starts at 0 for the first item:
1
<custom-component *ngFor="let item of items; index as i" (itemSelected)="onItemSelected($event)" [item]="item" [itemIndex]="i + 1"></custom-component>
There are other built in variables that can be accessed from ngFor, like first, last, even and odd.
For example, in the next code we are assigning a is-first class only for the first iteration on the array:
1
<custom-component *ngFor="let item of items; index as i; first as isFirst" [class.is-first]="isFirst" (itemSelected)="onItemSelected($event)" [item]="item" [itemIndex]="i + 1"></custom-component>
Take note that isFirst is the first variable renamed, and it has a boolean value (either it applies the class or not).
Here is another example using the four special variables:
1
2
3
4
5
6
<custom-component *ngFor="let item of items; index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd"
[class.is-first]="isFirst"
[class.is-last]="isLast"
[class.is-even]="isEven"
[class.is-odd]="isOdd"
(itemSelected)="onItemSelected($event)" [item]="item" [itemIndex]="i + 1"></custom-component>
ngIf
You can use ngIf to determine through a boolean variable if an DOM component should appear or not. Given a showImage bool variable, this is how you would use ngIf:
1
<img alt="Example image" *ngIf="showImage" [src]="imageUrl">
You can also do it directly with the imageUrl variable:
1
<img alt="Example image" *ngIf="imageUrl" [src]="imageUrl">
In this case, if imageUrl is undefined, it will evaluate as false hence it will not be shown, otherwise if it has a value it will evaluate as true and show the element.
Also you can use functions instead of just variables:
1
<img alt="Example image" *ngIf="myFunction()" [src]="imageUrl">
Then define the function at the level of the component:
1
2
3
myFunction() {
return this.imageUrl && this.anotherVariable; // this will return true only if either imageUrl or anotherVariable are not undefined or without a value
}
As long as the function returns a valid value to ngIf, it will be shown.
Using a template block with ngIf
We can define a template block and show it using ngIf and the else statement, following the example with myFunction(), we can do the following:
1
2
3
4
5
<img alt="Example image" *ngIf="myFunction(); else noImage" [src]="imageUrl">
<ng-template #noImage>
<p>No image is available.</p>
</ng-template>
Elvis operator
This operator allows us to specify that a given variable can be null or undefined, you can use it like this:
1
myVariable?.anAttribute
This will make the program not crash if myVariable is undefined.
ngSwitch
We can use ngSwitch to cover multiple conditional cases. It works very similarly to the switch statement in other programming languages. To use it, you add the ngSwitch attribute to a container, and then assign in it the variable you want to check its value. Then inside of it, you add all the cases you want to cover with the *ngSwitchCase statement, and assign it the value it should have to trigger that case. There is also the optional *ngSwitchDefault statement which covers the case where none of the *ngSwitchCase matches.
1
2
3
4
5
6
<div class="myclass" [ngSwitch]="myvar.category">
<div class="anotherclass" *ngSwitchCase="'CONDITIONALVALUE'">Some text</div>
<div class="anotherclass" *ngSwitchCase="'ANOTHERCONDITIONALVALUE'">Some other text</div>
<div class="anotherclass" *ngSwitchCase="'YETANOTHERCONDITIONALVALUE'">Yet some other text</div>
<div class="anotherclass" *ngSwitchDefault>Some default text</div>
</div>
ng-container
ng-container can be used when there are not parent components to attach one of the above directives. Take for example the switch case above. If you wanted to apply a ngSwitch, you may be tempted to add a div component just to apply a ngSwitch directive, but you could also use ng-container to use your directives, without using div and adding more DOM elements, hence making your pages more lightweight.
1
2
3
4
5
6
<ng-container [ngSwitch]="myvar.category">
<div class="anotherclass" *ngSwitchCase="'CONDITIONALVALUE'">Some text</div>
<div class="anotherclass" *ngSwitchCase="'ANOTHERCONDITIONALVALUE'">Some other text</div>
<div class="anotherclass" *ngSwitchCase="'YETANOTHERCONDITIONALVALUE'">Yet some other text</div>
<div class="anotherclass" *ngSwitchDefault>Some default text</div>
</ng-container>
ngClass
ngClass is used to apply a CSS class to an element of the document. There are various ways to define a class using ngClass.
Constant string
You can pass a constant string using single quotes inside the double quotes:
1
<div class="myclass" [ngClass]="'anotherclass'"> </div>
It is not recommended to use constant strings with ngClass, you are better off using the HTML class attribute instead.
Array
You can pass an array with multiple elements:
1
<div class="myclass" [ngClass]="['anotherclass', 'yetanotherclass']"> </div>
Configuration object
You can also pass a configuration object. It is a list of keys with have a true or false value assigned to them, which determine what classes will be applied and which not.
1
<div class="myclass" [ngClass]="{'anotherclass': true, 'yetanotherclass': false}"> </div>
These three examples use constant values, but of course you can use functions and variables instead:
1
<div class="myclass" [ngClass]="getDivClasses()"> </div>
Then on the TypeScript component file add the function you are calling on the ngClass attribute:
1
2
3
4
5
6
7
getDivClasses() {
return {
'anotherclass': this.item.category == 'SOMETHING',
'yetanotherclass': this.item.category == 'SOMETHINGELSE',
'againanotherclass': this.item.category == 'AGAINSOMETHING'
};
}
Make sure that only classes that are conditional are in ngClass, the ones that are constant should be in the html class property.
ngStyle
One way to modify a style directly for a DOM component is using the following:
1
2
3
<div class="myclass" [style.text-decoration]="'underline'">
Some text
</div>
This is not specific to Angular, and is just modifying the text-decoration property. But if we wanted to add multiple styles to our component, we would have to add various instances of that property. Instead, by using ngStyle, we can use a configuration object, similar to what we saw with ngClass:
1
2
3
<div class="myclass" [ngStyle]="{'text-decoration': 'underline', 'color': 'lightgray'}">
Some text
</div>
Of course, like we saw with ngClass, we can call a function instead of using a constant value:
1
2
3
<div class="myclass" [ngStyle]="getDivStyles()">
Some text
</div>
Then on the TypeScript component file add the function you are calling on the ngStyle attribute:
1
2
3
4
5
6
7
getDivStyles() {
return {
'text-decoration': 'underline',
'color': 'lightgray',
'background-image': 'url(' + this.item.bgImage + ')'
};
}
As with ngClass, we should only use ngStyle for styles that are conditional and can change depending on the circumstances. Otherwise, if you know the component will have a constant style that should not change for that specific component, then use an html style instead.
Also we should not depend too much on ngStyle and use ngClass instead, and only use ngStyle for really specific attributes that could change, as background-image for example, where a background may change for specific objects.