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