Summary
Let’s recap what we learned about attribute directives in the form of a short summary.
By this point, we’ve learned a lot about attribute directives, including how to create custom ones. In this lesson, we’ll recap and summarize everything we learned about attribute directives.
Generate a file
To generate a file using Angular CLI, we use the following command:
ng generate directive app-avatar
Directive syntax
An empty directive class looks like this:
@Directive({
selector: '[appAvatar]'
})
export class AvatarDirective {
constructor() { }
}
Apply the directive
To use the directive, we need to apply it to a specific element in the Angular template, like this:
<img src="avatar.png" appAvatar>
Change the appearance
To manipulate the properties of the DOM’s element, we can inject ElementRef
to get the instance of the host element, like this:
@Directive({
selector: '[appAvatar]'
})
export class AvatarDirective implements OnInit {
constructor(private elementRef: ElementRef) { }
ngOnInit() {
this.elementRef.nativeElement.style.border = '1px solid black';
}
}
Pass data
To pass data from the template where it’s applied to the directive, we use Input
properties:
@Directive({
selector: '[appAvatar]'
})
export class AvatarDirective implements OnInit {
@Input() borderColor: string = 'black';
constructor(private elementRef: ElementRef) { }
ngOnInit() {
const border = `1px solid ${this.borderColor}`;
this.elementRef.nativeElement.style.border = border;
}
}
The Input
properties are used as follows:
<img src="avatar.png" appAvatar [borderColor]="'#ff35aa'">
Single Input syntax
If we want to use a single attribute to apply the directive to the element and bind its Input
using the same call, we name the property the same way that we named the selector:
@Directive({
selector: '[appAvatar]'
})
export class AvatarDirective {
@Input() appAvatar: string = 'black';
...
}
Then, we can use it like this:
<img src="avatar.png" [appAvatar]="'#ff35aa'">
Listen for DOM events
If we want to react to DOM events, such as clicks, we can use the HostListener
technique illustrated below:
@Directive({
selector: '[appAvatar]'
})
export class AvatarDirective {
@HostListener('click', ['$event'])
onClick(event: Event) {
console.log('I was clicked!');
}
}
Send custom events
When we want to inform another component (for example, a component that uses the directive), we can use Output
properties with EventEmitters
:
@Directive({
selector: '[appAvatar]'
})
export class AvatarDirective {
@Output() action = new EventEmitter();
@HostListener('click', ['$event'])
onClick(event: Event) {
this.action.emit('I was clicked');
}
}
The component can handle the events in the following way:
<img src="avatar.png" appAvatar (action)="onImageAction($event)" >
That’s all! We hope you find this cheat sheet helpful and find a way to use this information to boost your development
Get hands-on with 1200+ tech skills courses.