Statistics
The Highest Post

Total Post till Wednesday, November 20, 2024 : Peter Agyekum:

Total Post till Wednesday, November 20, 2024 : James Say:


Total Post till Wednesday, November 20, 2024 : Peter Agyekum:


Total Post till Wednesday, November 20, 2024 : Mercy Soya:


Total Post till Wednesday, November 20, 2024 : Jay Man:


Total Post till Wednesday, November 20, 2024 : Jonathan JeBrown:


Total Post till Wednesday, November 20, 2024 : Samson Koa:



Total Participant for Reply Posting Wednesday, November 20, 2024 : 94

Statistics
Count 94
Avg 21.00
Min 21
Max 21
Angualr Top questions

Details


 Peter Agyekum What are directives in Angular? A directive is a class in Angular that is declared with a @Directive decorator. Every directive has its own behaviour and can be imported into various components of an application. Consider an application, where multiple components need to have similar functionalities. The norm thing to do is by adding this functionality individually to every component but, this task is tedious to perform. In such a situation, one can create a directive having the required functionality and then, import the directive to components which require this functionality. 1) Component directives: These form the main class in directives. Instead of @Directive decorator we use @Component decorator to declare these directives. These directives have a view, a stylesheet and a selector property. 2 Structural directives: These directives are generally used to manipulate DOM elements. Every structural directive has a ‘ * ’ sign before them. We can apply these directives to any DOM element. Let’s see some built-in structural directives in action: div *ngIf="isReady" class="display_name" {{name}} /div div class="details" *ngFor="let x of details" p{{x.name}}/p p {{x.address}}/p /div. In the above example, we can *ngIf and *ngFor directives being used. *ngIf is used to check a boolean value and if it’s truthy,the div element will be displayed. *ngFor is used to iterate over a list and display each item of the list. Attribute Directives These directives are used to change the look and behaviour of a DOM element. Let’s understand attribute directives by creating one: How to create a custom directive? We’re going to create an attribute directive: In the command terminal, navigate to the directory of the angular app and type the following command to generate a directive: ng g directive blueBackground The following directive will be generated. Manipulate the directive to look like this: import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appBlueBackground]' }) export class BlueBackgroundDirective { constructor(el:ElementRef) { el.nativeElement.style.backgroundColor = "blue"; } } Now we can apply the above directive to any DOM element: p appBlueBackground Hello World!/p
Related Topics