Component in Angular2 (Part 1 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

Components - Displaying data in our templates

• Component.ts
• Component.html

	import { Component } from '@angular/core';
	@Component({
	moduleId: module.id,
	selector: 'test5-app',
	templateUrl: 'test5.component.html',
	styleUrls: ['test5.component.css']
	})
	export class Test5AppComponent {
	stringX: string;
	arrayY: string[];
	objectZ: any;
	constructor() {
	this.stringX = 'test5 works!';
	this.arrayY = ['one', 'two', 'three'];
	this.objectZ = [{
	name: 'name 1',
	src: 'src 2'
	}, {
	name: 'name 1',
	src: 'src 2'
	}]
	}
	}

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

	<h1>
	{{stringX}}
	</h1>
	<ul>
	<li *ngFor="let item of arrayY">
	{{item}}
	</li>
	</ul>
	<ul>
	<li *ngFor="let item of objectZ">
	{{item.name}} -> {{item.src}}
	</li>
	</ul>

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

Components - Working with Events

• Event.ts
• Event.html

	import { Component } from '@angular/core';
	@Component({
	moduleId: module.id,
	selector: 'test5-app',
	templateUrl: 'test5.component.html',
	styleUrls: ['test5.component.css']
	})
	export class Test5AppComponent {
	stringX: string;
	arrayY: string[];
	constructor() {
	this.stringX = 'test5 works!';
	this.arrayY = ['one', 'two', 'three'];
	};
	onclick(myInput) {
	this.arrayY.push(myInput);
	};
	updateH1(obj) {
	this.stringX = obj;
	};
	}

view raw event.ts hosted with ❤ by GitHub

	<h1>
	{{stringX}}
	</h1>
	<input #myInput (keyup.enter)="onclick(myInput.value)" (blur)="onclick(myInput.value)">
	<button (click)="onclick(myInput.value)">Add</button>
	<ul>
	<li (click)="updateH1(item)" *ngFor="let item of arrayY">
	{{item}}
	</li>
	</ul>

view raw event.html hosted with ❤ by GitHub

Components - Using Property

• Property.ts
• Property.html

	import { Component } from '@angular/core';
	@Component({
	moduleId: module.id,
	selector: 'test5-app',
	templateUrl: 'test5.component.html',
	styleUrls: ['test5.component.css']
	})
	export class Test5AppComponent {
	stringX: string;
	arrayY: string[];
	constructor() {
	this.stringX = 'test5 works!';
	this.arrayY = ['one', 'two', 'three'];
	};
	onclick(myInput) {
	this.arrayY.push(myInput);
	};
	updateH1(obj, artistContainer) {
	this.stringX = obj;
	artistContainer.style.backgroundColor = "#FEC";
	};
	}

view raw Property.ts hosted with ❤ by GitHub

	<h1 [innerHtml]="'Name: ' + stringX">
	</h1>
	<input #myInput (keyup.enter)="onclick(myInput.value)" (blur)="onclick(myInput.value)">
	<button (click)="onclick(myInput.value)">Add</button>
	<ul>
	<li #artistContainer (click)="updateH1(item,artistContainer)" *ngFor="let item of arrayY">
	{{item}}
	</li>
	</ul>

view raw Property.html hosted with ❤ by GitHub

Components - Using more complex data

• Interface.ts
• Interface.html

	import { Component } from '@angular/core';
	interface Artist {
	name: string;
	shortname: string;
	reknown: string;
	bio: string;
	}
	@Component({
	moduleId: module.id,
	selector: 'test5-app',
	templateUrl: 'test5.component.html',
	styleUrls: ['test5.component.css']
	})
	export class Test5AppComponent {
	artists = ARTISTS;
	}
	var ARTISTS: Artist[] = [{
	"name": "Mohammed Nisar",
	"shortname": "My shrt name 1",
	"reknown": "Royal acadamy of painting",
	"bio": "My bio 1"
	}, {
	"name": "Kumar King",
	"shortname": "My shrt name 2",
	"reknown": "Royal acadamy of Design",
	"bio": "My bio 2"
	}, {
	"name": "Honey Sing",
	"shortname": "My shrt name 3",
	"reknown": "Royal acadamy of Dance",
	"bio": "My bio 3"
	}]

view raw interface.ts hosted with ❤ by GitHub

	<ul>
	<li *ngFor="let item of artists">
	{{item.name}}
	</li>
	</ul>

view raw interface.html hosted with ❤ by GitHub

Components - Using Sub-Component

• Parent.html
• Parent.ts
• Child.html
• Child.ts

	import { Component, Input } from '@angular/core';
	import { NewCmpComponent } from './new-cmp';
	interface Artist {
	name: string;
	shortname: string;
	reknown: string;
	bio: string;
	}
	@Component({
	moduleId: module.id,
	selector: 'test5-app',
	templateUrl: 'test5.component.html',
	styleUrls: ['test5.component.css'],
	directives: [NewCmpComponent]
	})
	export class Test5AppComponent {
	artists = ARTISTS;
	}
	var ARTISTS: Artist[] = [{
	"name": "Mohammed Nisar",
	"shortname": "My shrt name 1",
	"reknown": "Royal acadamy of painting",
	"bio": "My bio 1"
	}, {
	"name": "Kumar King",
	"shortname": "My shrt name 2",
	"reknown": "Royal acadamy of Design",
	"bio": "My bio 2"
	}, {
	"name": "Honey Sing",
	"shortname": "My shrt name 3",
	"reknown": "Royal acadamy of Dance",
	"bio": "My bio 3"
	}]

view raw Parent.ts hosted with ❤ by GitHub

	<ul>
	<li *ngFor="let item of artists">
	<app-new-cmp [artist]="item">Loading.</app-new-cmp>
	</li>
	</ul>

view raw Parent.html hosted with ❤ by GitHub

	import {
	Component,
	OnInit,
	Input
	} from '@angular/core';
	@Component({
	moduleId: module.id,
	selector: 'app-new-cmp',
	templateUrl: '../new-cmp/new-cmp.component.html',
	styleUrls: ['new-cmp.component.css'],
	inputs: ['artist']
	})
	export class NewCmpComponent {
	componentName: 'NewCmpComponent'
	}

view raw Child.ts hosted with ❤ by GitHub

	<div>
	<h2>{{artist.name}}</h2>
	</div>

view raw Child.html hosted with ❤ by GitHub

Components - Getting data to the component with input

• parent.component.ts
• child.component.ts
• index.html
• character.ts

	<story-app>
	loading...
	</story-app>

view raw index.html hosted with ❤ by GitHub

	export class Character{
	constructor(public id: number, public name: string){ }
	}

view raw character.ts hosted with ❤ by GitHub

	import { Component ,Input} from '@angular2/core';
	import { ChildComponent } from './child.component';
	import { Character } from './character';
	@Component({
	selector: 'story-app',
	template: `
	<div style = "border:2px solid orange; padding:5px;">
	<h1>Parent Component</h1>
	<input [(ngModel)] = "characters[0].name"/>
	<button (click)="select(characters[0])">Input</button>
	<br/><br/>
	<story-characters [character]="selectedCharacter"></story-characters>
	</div>
	`,
	directives:[ChildComponent]
	})
	export class ParentComponent{
	characters = [
	{
	"id":11,
	"name":"Name"
	}];
	selectedCharacter: Character;
	select(selectedCharacter : character){
	this.selectedCharacter = selectedCharacter;
	}
	}

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

	import { Component, Input} from '@angular2/core';
	import { Character} from './character';
	@Component({
	selector: 'story-characters',
	template:`
	<div style="border:2px solid orange; padding:5px">
	<h1>Child Component: <span *ngIf="character">{{character.name}}</span></h1>
	</div>
	`,
	inputs:['character']
	})
	export class ChildComponent {
	public character: Character;
	}

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

Components - Subscribing to component events with output

• parent.component.ts
• child.component.ts
• index.html
• character.ts

	<parent-app>
	loading...
	</parent-app>

view raw index.html hosted with ❤ by GitHub

	export class Character{
	constructor(public id:number,public name:string){}
	}

view raw character.ts hosted with ❤ by GitHub

	import {Component} from '@angular2/core';
	import {ChildComponent} from './child.component';
	@Component({
	selector:'parent-app',
	template:`
	<div style="border:2px solid orange; padding:5px;">
	<h1>Parent Component: {{parent}}</h1>
	<child-app (changed)=changed($event)></child-app>
	</div>
	`,
	directives:[ChildComponent]
	})
	export class AppComponent{
	changed(changedCharacter:any){
	if(changedCharacter){
	this.parent = changedCharacter.name;
	}
	}
	}

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

	import {Component, EventEmitter, Output} from '@angular2/core';
	import{ Character } from './character';
	@Component({
	selector:'child-app',
	template:`
	<div style = "border:2px solid orange; padding:5px;">
	<h1>Child Component</h1>
	<input [(ngModel)]="characters[0].name">
	<button (click)="select(characters[0])">Output</button>
	</div>
	`,
	outputs : ['changed']
	})
	export class ChildComponent implements OnInit{
	public changed = new EventEmitter<Character>();
	characters = [
	{
	"id":11,
	"name":"Nisar"
	}
	];
	selectedCharacter : Character;
	select(selectedCharacter: Character){
	this.changed.emit(selectedCharacter);
	}
	}

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

Components - Getting data to the component with @input

• parent.component.ts
• child.component.ts
• index.html
• character.ts

	<story-app>
	loading...
	</story-app>

view raw index.html hosted with ❤ by GitHub

	export class Character{
	constructor(public id: number, public name: string){ }
	}

view raw character.ts hosted with ❤ by GitHub

	import { Component ,Input} from '@angular2/core';
	import { ChildComponent } from './child.component';
	import { Character } from './character';
	@Component({
	selector: 'story-app',
	template: `
	<div style = "border:2px solid orange; padding:5px;">
	<h1>Parent Component</h1>
	<input [(ngModel)] = "characters[0].name"/>
	<button (click)="select(characters[0])">Input</button>
	<br/><br/>
	<story-characters [character]="selectedCharacter"></story-characters>
	</div>
	`,
	directives:[ChildComponent]
	})
	export class ParentComponent{
	characters = [
	{
	"id":11,
	"name":"Name"
	}];
	selectedCharacter: Character;
	select(selectedCharacter : character){
	this.selectedCharacter = selectedCharacter;
	}
	}

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

	import { Component, Input} from '@angular2/core';
	import { Character} from './character';
	@Component({
	selector: 'story-characters',
	template:`
	<div style="border:2px solid orange; padding:5px">
	<h1>Child Component: <span *ngIf="character">{{character.name}}</span></h1>
	</div>
	`
	})
	export class ChildComponent {
	@Input() character: Character;
	}

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

Components - Subscribing to component events with @output

• parent.component.ts
• child.component.ts
• index.html
• character.ts

	<parent-app>
	loading...
	</parent-app>

view raw index.html hosted with ❤ by GitHub

	export class Character{
	constructor(public id:number,public name:string){}
	}

view raw character.ts hosted with ❤ by GitHub

	import {Component} from '@angular2/core';
	import {ChildComponent} from './child.component';
	@Component({
	selector:'parent-app',
	template:`
	<div style="border:2px solid orange; padding:5px;">
	<h1>Parent Component: {{parent}}</h1>
	<child-app (changed)=changed($event)></child-app>
	</div>
	`,
	directives:[ChildComponent]
	})
	export class AppComponent{
	changed(changedCharacter:any){
	if(changedCharacter){
	this.parent = changedCharacter.name;
	}
	}
	}

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

	import {Component, EventEmitter, Output} from '@angular2/core';
	import{ Character } from './character';
	@Component({
	selector:'child-app',
	template:`
	<div style = "border:2px solid orange; padding:5px;">
	<h1>Child Component</h1>
	<input [(ngModel)]="characters[0].name">
	<button (click)="select(characters[0])">Output</button>
	</div>
	`
	})
	export class ChildComponent implements OnInit{
	@Output() changed = new EventEmitter<Character>();
	characters = [
	{
	"id":11,
	"name":"Nisar"
	}
	];
	selectedCharacter : Character;
	select(selectedCharacter: Character){
	this.changed.emit(selectedCharacter);
	}
	}

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