Basic Directive

Directives are custom "attributes" you can add to existing HTML elements to extended them. The basic directive layout looks like this:

Template Code

<!-- Template -->
<div borat-directive>Great Success!</div>

Directive Code

// Directive
@Directive({ selector: '[borat-directive]' }) // Note the selector in []
export class BoratDivDirective {...}

Passing in Values

Your directive can take in a value like this:

<!-- Template -->
<div [borat-directive]="Very Nice!">
	Great Success!
</div>

Adding in typescript code like this:

// Directive
import { ..., Input } from '@angular/core'
...
export class BoratDirective {
	@Input('borat-directive') saying: string; // 👈 
}

Multiple Values

Easy! Just add more "attributes" and notate them in the directive code. Eg:

<!-- Template -->
<div [borat-directive]="Very Nice!"
	   [second-saying]="Great Success!"
	   [third-saying]="Wawaweewah">
	Great Success!
</div>

// Directive
import { ..., Input } from '@angular/core'
...
export class BoratDirective {
	@Input('borat-directive') saying: string;
	@Input('second-saying') saying2: string;
	@Input('third-saying') saying3: string;
}

StackOverflow Link