Components

• A component is essentially a custom html tag.
• For a component we have custom html and we have custom behavior.
• Components are compiled by Angular
• Angular expands the custom tag to a template and attaches a java script behavior to it.
• Components are built as follows
• We define a html template for the component
• We define the behavior of the component in typescript or java script
• We configure the component
• Define the selector for the component.
• Define the template url of the component.
• Interpolated data or data in curly braces in a component is defined in the component class.
• The functions which occur on events are defined in the instance of the class.
• We define the behavior of the class as follows
• We start by calling the component method.
• This component method is a typescript decorator
• In angular it represents the component metadata class.
• After the method we follow it by the class which is a basic typescript class.
• This class is decorated by a component decorator
• Next we pass in a config object which is just a plain javascript object this object has following attributes
• selector attribute- tells angular how to locate your component.
• This is a css selector so it matches the html element tag.
• We can change it to an attribute selector , so it looks for an attribute in our html.
• template url is another attribute
• This specifies where the template file is stored by server
• If template is small we can write the template inline
• This template contains the interpolated data.

Component Setup

• A component is a type of class with a template.
• We can dedicate different responsibilities to different components in our application
• Create a project folder and first file we define is package.json
• This file defines the product dependencies
• systemjs dependency is needed to load our main module.
• Create index.html which we can use to start application
• We can load libraries from our load module here and test.
• Next we create the tsconfig.json file which defines ts compiler configuration.

package.json

 {  
  "name": "hello-angular",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
   "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "author": "Gurav Matta",  
  "license": "ISC",  
  "dependencies": {  
   "angular2": "^2.0.0-beta.1",  
   "es6-promise": "^3.0.2",  
   "es6-shim": "^0.33.3",  
   "reflect-metadata": "0.1.2",  
   "rxjs": "5.0.0-beta.0",  
   "zone.js": "0.5.10"  
  },  
  "devDependencies": {  
   "systemjs": "^0.19.16"  
  }  
 }  

tsconfig.json

• Setting sourcemap to true let's us have sourceMapping between typescript and result javascript file.
• emitDecoratorMetadata emits decorators and annotations.
• "OutDir" sets output directory for js files.

Basic Component Class

• Create a typescript file.
• Define the class in the typescript file.
• Decorate the class with @Component()
• add selector attribute
• whenever angular goes through an html file and comes across this selector attribute it will compile the component and act accordingly.
• Next add template attribute which defines view for our Component which is basically a html template.
• This can be hard coded or added as a variable which will be injected by the class which defines the variable of the class.
• in this case it is defined as template :'{{name}}'
• Next import "@Component" which is a class metadata from "angular2/Core";
• If we look at the angular user guide we find that component is a metadata class.
• Next to initialize an application using a particular component we use the bootstrap method.
• Import "@bootstrap" at start
• At the end of the component bootstrap(classname,[]);
• Next we write our System.config script in index html this will load our compiled component.
• We will be resolving all our javascript files from the output folder as shown in script.
• Next we run the "tsc" command from project folder to compile.
• To serve the application use command "live-server" from the project folder. \

Components Inputs

• Component inputs are inputs to the components.
• This could be data
• Create a component
• In the class of component declare instance variables with "@Input" decorator which is a function.
• Angular is going to assign values to this input which will be checked in its check detection cycle.
• Values are updated immediately in entire application.
• Next we can pass these values from selector to component as shown.
• We can also pass values from parent components to child components as follows
• In template if you pass it in double quotes it will be treated as a variable if you pass it in single quotes it will be treated as a value as shown in template below.

Component class

 import {Component, Input} from 'angular2/core';  
 import {bootstrap} from 'angular2/platform/browser';  
 @Component({  
 selector:'example',  
 template:'<div>Hello Example {{ id }} </div>'  
 })  
 class Example {  
  @Input() private id: string;  
 }  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  directives:[Example],  
  templateUrl : 'templates/app.tpl.html',  
 })  
 class StarterTemplate {  
  private name: string;  
  private appId: string;  
  constructor () {  
   this.name = 'Starter Templates are here!!';  
   this.appId='This is the appId Value';  
  }  
 }  
 /**  
  * Bootstrap the app with `StarterTemplate`.  
  */  
 bootstrap(StarterTemplate, []);  

template

 <h1>{{ name }}</h1>  
 <example [id]="'5'"></example>  
 <example [id]="appId"></example>  

Native DOM property binding

• We can directly bind properties of components to DOM properties as follows.
• In the html snippet below font color is a property defined in component.

 @Component({  
 selector:'example',  
 template:'<div [style.color]="fontColor"> Hello Binding</div>'  
 })  
 class Example {  
 private fontColor: string;  
 constructor(){  
  this.fontColor='blue';  
 }  
 }  

Local Variables

• A local variable is a way to reference elements on a page.
• for example if we want to reference a "div" element on a template we can add a reference to it using "#name" in template as shown.
• Next we can also pass this reference to a method in component using the name appended with "#" from the template.
• We can also use the value of this field directly in our template using "value" property of this variable.

Component

 @Component({  
  selector: 'app',  
  templateUrl : 'templates/app.tpl.html',  
 })  
 class StarterTemplate {  
  private name: string;  
  private usernameValue:string;  
  constructor () {  
   this.name = 'Local Variable';  
  }  
  setTitle(elm){  
    elm.textContent="Hello";  
  }  
  setUsername(value){  
   this.usernameValue=value;  
  }  
 }  

template

 <h1>{{ name }}</h1>  
 <h2 #title></h2>  
 <button (click)="setTitle(title)">Set Title</button>  
 <p>{{usernameValue}}</p>  
 <input type="text" #username (input)="setUsername(username.value)"/>  
 <p>{{ myValue }}</p>  
 <input type="text" #name (input)="myValue = name.value"/>  

Component Outputs

• Component outputs are essential events that are emitted by components which you can listen too or take some action based on the event.
• We must wrap events with parenthesis as shown like (click),(input) etc.
• Then we can assign functions which will trigger on their occurrence.
• We can also output events from the components using directives manually or automatically after specific duration's.  
• We set event emitter as output property from component.

Component File

 import {Component, Input, Directive, Output, EventEmitter} from 'angular2/core';  
 import {bootstrap} from 'angular2/platform/browser';  
 @Directive({  
 selector:'[adder-auto]',  
 })  
 class AdderAuto{  
  @Output() myevent: EventEmitter<string>;  
  constructor(){  
   this.myevent=new EventEmitter();  
   setInterval(()=>{this.myevent.emit('myevename')},1000);  
  }  
 }  
 @Component({  
 selector:'adder',  
 template:`  
 <p>Value: {{ value }}</p>  
 <button (click)="addOne()">Add +</button>  
 <h2>Using Emitter</h2>  
 <span adder-auto (myevent)="addOne($event)">EVENT: {{firedEvent}}</span>  
 `,  
 directives:[AdderAuto]  
 })  
 class Adder {  
  private value:number;  
  private firedEvent:string;  
  constructor(){  
   this.value = 0;  
   this.firedEvent = '...' ;  
  }  
  addOne(event){  
   this.value+=1;  
   this.firedEvent=event+this.value;  
  }  
 }  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  templateUrl : 'templates/app.tpl.html',  
  directives:[Adder]  
 })  
 class StarterTemplate {  
  private name: string;  
  constructor () {  
   this.name = 'Component Output';  
  }  
  hello(titlediv){  
   console.log("hello");  
   titlediv.textContent="Hello!";  
  }  
 }  
 /**  
  * Bootstrap the app with `StarterTemplate`.  
  */  
 bootstrap(StarterTemplate, []);  

View File

 <h1>{{ name }}</h1>  
 <button (click)="hello(title)"></button>  
 <h1 #title></h1>  
 <adder></adder>  

s