Directive and Pipes in Angular2 (Part 2 of 5)

Let's learn Angular 2 by an Examples and not spending much time in theory's. We will cover the best practical and ready to use Angular 2 Examples.

You can find some other posts of this series below:

Component in Angular2 (Part 1 of 5)
Directive and Pipes in Angular2 (Part 2 of 5)
Forms and Pipes in Angular2 (Part 3 of 5)
Dependency Injection in Angular2 (Part 4 of 5)
HTTP and Routing in Angular2 (Part 5 of 5)

All example are based on Angular2 RC 1

Directive and Pipes - Attribute directives—custom

• my-directive.directive.ts
• test6.component.css
• test6.component.html
• test6.component.ts

	import { Directive, HostBinding } from '@angular/core';
	@Directive({
	selector: '[MyDirective]'
	})
	export class MyDirective {
	@HostBinding('class.is-favorite') isFavorite = true;
	constructor() {}
	}

view raw my-directive.directive.ts hosted with ❤ by GitHub

	.is-favorite{
	color:red;
	}

view raw test6.component.css hosted with ❤ by GitHub

	<h1 MyDirective>
	{{title}}
	</h1>

view raw test6.component.html hosted with ❤ by GitHub

	import { Component } from '@angular/core';
	import {MyDirective} from './my-directive.directive'
	@Component({
	moduleId: module.id,
	selector: 'test6-app',
	templateUrl: 'test6.component.html',
	styleUrls: ['test6.component.css'],
	directives:[MyDirective]
	})
	export class Test6AppComponent {
	title = 'test6 works!';
	}

view raw test6.component.ts hosted with ❤ by GitHub

Directive and Pipes - Using directive values

• my-directive.directive.ts
• test6.component.css
• test6.component.html
• test6.component.ts

	import { Directive, HostBinding, Input } from '@angular/core';
	@Directive({
	selector: '[MyDirective]'
	})
	export class MyDirective {
	@HostBinding('class.is-favorite') isFavorite = true;
	@Input()
	set MyDirective(value){
	this.isFavorite = value;
	}
	constructor() {}
	}

view raw my-directive.directive.ts hosted with ❤ by GitHub

	.is-favorite{
	color:red;
	}

view raw test6.component.css hosted with ❤ by GitHub

	<h1 [MyDirective]="isFavorite">
	{{title}}
	</h1>

view raw test6.component.html hosted with ❤ by GitHub

	import { Component } from '@angular/core';
	import {MyDirective} from './my-directive.directive'
	@Component({
	moduleId: module.id,
	selector: 'test6-app',
	templateUrl: 'test6.component.html',
	styleUrls: ['test6.component.css'],
	directives:[MyDirective]
	})
	export class Test6AppComponent {
	title = 'test6 works!';
	isFavorite = true;
	}

view raw test6.component.ts hosted with ❤ by GitHub

Directive and Pipes - Working with events in directives

• my-directive.directive.ts
• test6.component.css
• test6.component.html
• test6.component.ts

	import { Directive, HostBinding, HostListener, Input } from '@angular/core';
	@Directive({
	selector: '[MyDirective]'
	})
	export class MyDirective {
	@HostBinding('class.is-favorite') isFavorite = true;
	@HostBinding('class.is-favorite-hovering') hovering = false;
	@HostListener('mouseenter')
	onMouseEnter(){
	this.hovering = true;
	};
	@HostListener('mouseleave')
	onMouseLeave(){
	this.hovering = false;
	};
	@Input()
	set MyDirective(value){
	this.isFavorite = value;
	}
	constructor() {}
	}

view raw my-directive.directive.ts hosted with ❤ by GitHub

	.is-favorite{
	color:red;
	}
	.is-favorite-hovering{
	color:blue;
	}

view raw test6.component.css hosted with ❤ by GitHub

	<h1 [MyDirective]="isFavorite">
	{{title}}
	</h1>

view raw test6.component.html hosted with ❤ by GitHub

	import { Component } from '@angular/core';
	import {MyDirective} from './my-directive.directive'
	@Component({
	moduleId: module.id,
	selector: 'test6-app',
	templateUrl: 'test6.component.html',
	styleUrls: ['test6.component.css'],
	directives:[MyDirective]
	})
	export class Test6AppComponent {
	title = 'test6 works!';
	isFavorite = true;
	}

view raw test6.component.ts hosted with ❤ by GitHub

Directive and Pipes - Angular pipes -- custom

• my-pipe.pipe.ts
• t1.component.ts
• t1.component.html

	import { Pipe } from '@angular/core';
	@Pipe({
	name: 'myPipe'
	})
	export class MyPipe {
	transform(mediaItems) {
	var categories = [];
	mediaItems.forEach(mediaItem => {
	if(categories.indexOf(mediaItem.category) <= -1){
	categories.push(mediaItem.category);
	}
	});
	return categories.join(', ');
	}
	}

view raw my-pipe.pipe.ts hosted with ❤ by GitHub

	import { Component } from '@angular/core';
	import { MyPipe } from './my-pipe.pipe';
	@Component({
	moduleId: module.id,
	selector: 't1-app',
	pipes:[MyPipe],
	templateUrl: 't1.component.html',
	styleUrls: ['t1.component.css']
	})
	export class T1AppComponent {
	title = 't1 works!';
	mediaItems = [
	{
	id: 1,
	name: "Firebug",
	medium: "Series",
	category: "Science Fiction",
	year: 2010,
	watchedOn: 1294166565384,
	isFavorite: false
	},
	{
	id: 2,
	name: "The Small Tall",
	medium: "Movies",
	category: "Comedy",
	year: 2015,
	watchedOn: null,
	isFavorite: true
	}, {
	id: 3,
	name: "The Redemption",
	medium: "Movies",
	category: "Action",
	year: 2016,
	watchedOn: null,
	isFavorite: false
	}, {
	id: 4,
	name: "Hoopers",
	medium: "Series",
	category: "Drama",
	year: null,
	watchedOn: null,
	isFavorite: true
	}, {
	id: 5,
	name: "Happy Joe: Cheery Road",
	medium: "Movies",
	category: "Action",
	year: 2015,
	watchedOn: 1457166565384,
	isFavorite: false
	}
	];
	}

view raw t1.component.ts hosted with ❤ by GitHub

	<h1>
	{{title}}
	</h1>
	<div>
	{{mediaItems | myPipe}}
	</div>

view raw t1.component.html hosted with ❤ by GitHub