Angular 2

Angular 2 application consists of a collection of components.Components in Angular 2 application need to interact with other components in the application.
Angular 2 provides two useful property decorators for interaction between components.

Input and Output decorators are used to pass data into and out of the component.We attach the decorators to the component properties.

• @Input is attached to a property that can be used for property binding
• @Output is attached to a property that can be used for event binding

To identify a property as input we annotate the property with @Input() decorator.

@Input() 
name : string;

We can alias the property name.Aliasing property means that property will be accessed using the alias instead of actual name.
For example in the following example name property will be accessed using the identifier employeeName instead of name.

@Input('employeeName') 
name : string;

Similarly to identify a property as output we annotate the property with @Output() decorator.

In the below example we are declaring a property as output.@Output decorator is used with EventEmitter datatype.

@Output() 
sendInfo = new EventEmitter<string>();

We can alias @Output() property which will allow us to use different name when binding the property

import { Component, Input } from '@angular/core';

@Component({
selector: 'sample-component',
template: '<div>{{name}}</div>'
})
export class SampleComponent {
@Input() 
name : string; 
constructor() {}
}

<sample-component [name]="employeeName"></sample-component>

 

Follow on:

Different languages provides for to work with a collection of elements.Similarly when developing User interface sometimes we need to repeat a group of elements.For example there are can be a list of employees which we need to display.To implement this we need to loop over all the elements in a collection and add them to DOM one at a time.

If we have to implement this manually then it will be a tedious and error prone process.In Angular 1 we have ng-repeat directive to work with a collection of items.It creates a new template for every item in the collection.

Angular 2 doesn’t have ng-repeat but has a new directive ngFor for working with a collection of items .If we use this directive then the template which we provide will be instantiated for every item in the collection.

We use it as

<li *ngFor="let item of items; let i = index">
{{i}} {{item}}</li>

above items is the collection which contains the items that we want to display.item represents a single element in the items collection.
We are displaying item here.So if item contains integer values from 1 to 5 then it will display the numbers from 1 to 5.

In the following example we have implemented a component which consists of a collection of employees.We are setting the employees array in the constructor.
In the template of the component we are just looping over the array of array and displaying the elements.

import { Component } from '@angular/core';
@Component({
selector: 'example-component',
template: `<ul><li *ng-for="#employee of employees">{{employee}}</li></ul>`
})
export class ExampleComponent{
employees: string[]=[];
constructor() {
this.employees = ['Marc', 'Amit', 'Tony', 'Greg'];
}
}

Above component will display the employees in a list.

ngFor provides several  variables which we can use in the template.Following variables can be used in the tempalte created using ngFor

• Index    represents current iteration.
• first    true or false value which indicates whether this is first item in the collection.
• last     true or false value which indicates whether this is last item in the collection.
• even    true or false value which indicates whether the index is even.
• odd      true or false value which indicates whether the index is even.

Follow on:

Dependency injection is useful for developing decoupled applications.Dependency Injection in Angular 2 is handled by the framework.

Dependency Injection in Angular 2 Components

In angular 2 to specify the dependencies of a component ,just specify the dependencies as the constructor parameters.Just adding the dependencies as constructor parameters informs the angular 2 framework that the component needs some dependencies to be injected.

@Component({
selector: 'org-comp',
})
export class OrganizationComponent {Department
constructor(Department: DepartmentService) {

}

In the above code we have specified that our OrganizationComponent depends on the DepartmentComponent. Angular 2 framework will create an instance of DepartmentComponent and inject it into the constructor.

We have declared DepartmentComponent as:

@Component({
selector: 'emp-comp',
})
export class DepartmentComponent {
constructor(Employee: EmployeeComponent) {
}

DepartmentComponent Depends on the EmployeeComponent so Angular framework will create an instance of EmployeeComponent when it tries to create an instance of DepartmentComponent. Best thing about this is that you don’t need to be bothered about this hierarchy of dependencies since it is automatically taken care of
by angular framework.

Dependency injection in Services using @Injectable()

Since we have used components to inject dependencies above so we don’t need to do any other thing than to declare dependencies as constructor parameters.But if we use service then to specify that a service has some dependencies you need to decorate the service with the @Injectable() decorator.

@Injectable()
export class EmployeeDetailsService {
constructor(private detailsService: DetailsService) {
}
}

In the above service implementation of EmployeeDetailsService you can notice that it has a dependency on DetailsService service.Since EmployeeDetailsService depends on DetailsService so we have used the @Injectable() decorator function.

Follow on:

Change detection is the mechanism which is used to propagate changes in the model to the view.Change detection mechanism in Angular 2 is much better than the previous version.

Data binding in AngularJS depended on the digest cycle.Whenever there is a change in any of the source or destinations involved in a binding all of the bindings in the application are reevaluated.Digest cycle consists of watchers whose responsibility is to watch for the changes in any of the expressions.These watchers are
evaluated multiple times for a change in even single expression.So you can imagine the performance overhead of the digest cycle.

Since you have changed only a single expression it doesn’t make much sense to reevaluate all the expressions in the application.

Angular 2 in contrast to previous versions of Angular has a much better change detection strategey. Every Angular 2 component has a dedicated
change detector.

In the following component we have declared onChange() method.This method will be called whenever use clicks a button.
This will create change detector whose job is to check if the value of the expression has changed.Here it checks if the value of name property has changed.
@Component({
selector: 'example-component',
template: '<button (click)="onChange()">{{name}}</button>'
})
export class TodoItem {
public name:string="Angular 1.0";
onChange() {
name:string="Angular 2.0";
}
}
The default change detection mechanism in Angular 2.0 is 3 to 10 times faster than Angular 1.0.But thats not all.We can even tweak the default change detection mechanism.This is made possible through the ChangeDetectionStrategy API.The ChangeDetectionStrategy API defines when the change detection should be triggered.

Some of the useful attributes of this API are:

• Detached Detached means that the change detector sub tree is not a part of the main tree and should be skipped.
• OnPush OnPush means that the value of the component can change only through user inputs and events

We can update the previous component by setting the changeDetection attribute to ChangeDetectionStrategy.OnPush
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'example-component',
template: '<button (click)="onChange()">{{name}}</button>'
})
export class TodoItem {
public name:string="Angular 1.0";
onChange() {
name:string="Angular 2.0";
}
}
What the above component will do now is it will update view only in specific scenarios.

• When some event is fired.
• When value of input changes.

Follow on:

Angular 2 is a client side JavaScript platform for developing web and mobile applications.It is a complete rewrite of angular 1.So Knowing angular 1 is not required to learn angular 2.

Following are some of the important points about Angular 2:

• It is used for creating dynamic html application.Angular 2 applications are a tree of Components.
• Uses ES6 and typescript
• Angular differs completely from Angular 1.Things such as scope and controller ,which are a part of angular 1 , are not included in angular 2.
• uses reactjs
• Uses Typescript for writing applications.TypeScript has many additional features which are not available in javascript.TypeScript can be used for object oriented programming,static type checking.

Since its our first Angular 2 application so we will have look at just some of the basic concepts which we will require to build our application.

Following are the main concepts in Angular 2:

• Module Module is a package of components,directives and services.
• Component It contains logic and UI.It is the basic building block of angular 2 application.
• Bootstrapping It is the process of starting or launching Angular application.
• Decorators These are used to add metadata.For example to make a class as component we use the @Component() decorator.
• Import statements   Import statements are used to import classes defined in modules.For example to import component from @angular2/core we use:   import {component} from ‘@angular2/core’;

Angular 2 application has a hierarchy of folders since Angular 2 application is a tree of components.All the components are defined in app root folder:

app
component1
component1.html
component1.ts

component2
component2.html
component2.ts

All the components are defined inside separate folders in app folder.

We will create a very simple angular 2 application to understand the basics.

Since we will be calling our application from a browser,so we need an html page.This page will launch our application.We will just look at the main parts of the different files.The complete source code of the files is declared at the end.

We will create index.html page.We will include the following script in our page.

<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>

This script is calling the main.js file.This file is compiled to javascript from the typescript file main.ts.

Main.ts file is the entry point to angular2 application ,since it contains the bootstrap logic.
It contains the following line which starts the module called AppModule.

platformBrowserDynamic().bootstrapModule(AppModule);

Modules in TypeScript are just containers for components.AppModule contains the following declaration in the NgModule decorator.

bootstrap: [ AppComponent ]

The above line tells angular 2 to start the AppComponent and that it is the root component of our application.

Finally the AppComponent is the class which defines the following selector
selector: ‘my-app’

If you remember this is what we have declared in the index.html page.This selector informs angular to instantiate this component when my-app element is declared in the html page.

index.html   Browser displays this html page.This page in turn calls the angular 2 application by using the selector defined by the angular component.

<html>
  <head>
    <title>Angular Sample Application</title>
    <script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
<body>
<my-app></my-app>
</body>

</html>

This is what we call from index.html:
main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts   This is the bootstrap module called from the above file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports:[ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts   AppComponent contains the application logic.Here it contains the logic to display some text.

import { Component } from '@angular/core';
//this is used to import Component class from @angular/core module.
@Component({
selector: 'my-app',
template: `<h1>Hello from {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

On executing the above application following text is displayed on the screen:

Hello from Angular

 

Follow on: