angular 2. Learning notes

1. angular interpolation and  property data binding.

     

{{title}}  this is the Interpolation binding

<img [src]=" imgLink ">  property binding

public title = 'TEXT WILL GOES HERE';

public imgLink ="http://imageurl.jsp";

1. Class and style binding

<div [class.myclass]="applayClass">text colr will change</div>

.myclass{color:red;}

public applayClass = true;

<div [class.colorRed]="applyClass">The class will applay here</div>

<div [style.color]="applyColor? 'blue' : 'Orange'">this text will chnage the line line colors</div>

  public applyClass = true;

  public applyColor = true;

     2.   event binding and references

<button (click)='clickItem()'>click</button>

<button (click)='clickItem1(demoInput.value)'>assign bind property</button>

<input type="text" name="" #demoInput>

<button (mouseover)='clickItem($event)'>event bind</button>

clickItem(){

  console.log('clicked');

}

clickItem1(value){

  console.log(value);

}

     3.two way data binding

     <input type="text" [(ngModel)]="fname"> - () means event binding and, []means property binding

     <input type="text" [(ngModel)]="lname">

        <div>Full name: {{fname}} {{lname}}</div> - interpolation

         public fname;

public lname;

     4.Structural Directives

<div *ngIf="showElement">show Element </div>

public showElement = true;

<li *ngFor="let color of colors">{{color}}</li>

 public colors = ['red', 'blue','green','orange'];

 

<div [ngSwitch]="color">

<p *ngSwitchCase="'red'">red is shown</p>

<p *ngSwitchCase="'blue'">blue is shown</p>

<p *ngSwitchDefault>invalid</p>

</div>

public color = 'blue';

output:-

blue is shown

5.    Attribute Directives

<p [ngClass]="{classOne:cone,classTwo:ctwo}">This is attribute directives</p>

<p [ngStyle]="{'font-style':style, 'font-size':size}">This is attribute directives</p>

<button (click)="toggle()">Toggle colors</button>

  public cone = true;

  public ctwo = true;

  public style = 'italic';

  public size = '30';

  toggle(){

  this.cone = !this.cone;

  this.ctwo = !this.ctwo;

  }

 

.classOne{color: white}

.classTwo{background: red; padding: 5px}

     6.inputs and outputs

<div class="col-md-12">

<h2>Inputs and outputs</h2>

<p>Parent component</p>

<div class="form-group">

<input type="text" #ptext (keyup)="0">

</div>

  <p> {{ChildData}}, child data is working</p>

<p>value from child component</p>

     <app-about (childEvent)='ChildData=$event' [parentData]="ptext.value"></app-about>

</div>

  public ChildData : string;

     

<div class="form-group">

<input type="text" #childtext (keyup)="onChange(childtext.value)">

</div>

<p>{{parentData}} working</p>

import { EventEmitter } from '@angular/core';

@Component({

  inputs:['parentData'],

  outputs:['childEvent']

})

public parentData: string;

childEvent = new EventEmitter<string>();

onChange(value :string){

this.childEvent.emit(value);

}

7.       Services

• • What is an a service?
    • a service is nothing but a class with a specific purpose.
  • Why do we use service?
    • implement bossiness logic to access to shared data and external interactions.
  • how we use the services in angular?
    • dependency injection 

     8.     Http and Observable

9.     API
   

{

"albums": [

  

{

"id": "891",

"imageURL": " http://static.sify.com/cms/image/rgjoRhdhibbha.jpg ",

"movieName": "Ami Thumi",

"directorName": "Mohan Krishna Indraganti",

"musicDirectorName": "Mani Sharma",

"productions": "A Green Tree Productions",

"audioReleaseDate": "2017-07-05 00:00:00",

"movieReleaseDate": "2017-06-09 00:00:00",

"genre": [

  "Comedy",

  "Romance"

],

"language": "Telugu"

}

,

{

"id": "601",

"imageURL": "http://lyricsaura.in/wp-content/uploads/2016/12/Gautamiputra-Satakarni-telugu-songs.jpg",

"movieName": "Gautamiputra Shatakarni",

"directorName": "Krish",

"musicDirectorName": "Chirantan Bhatt",

"productions": "First Frame Entertainments [",

"audioReleaseDate": "2017-07-05 00:00:00",

"movieReleaseDate": "2017-07-05 00:00:00",

"genre": [

  "Drama",

  "Fantasy"

],

"language": "Telugu"

}     

],

}

10. params observable 

List:-

constructor(private _employeeListService: EmployeeListService, private router: Router) { }

 onSelectList(employee){

  this.router.navigate(['/employeeDetails', employee.id]);

  }

<li *ngFor="let employee of employees" (click)="onSelectList(employee)"></li>

Details:- 

import { ActivatedRoute, Router, Params } from '@angular/router';

 constructor(private _employeeDetailsService: EmployeeDetailsService, private route: ActivatedRoute, private router :Router) { }  

ngOnInit() {

  this.route.params.subscribe((params: Params)=>{

  let id = parseInt(params['id']);

  this.newEmplyeesdetails = id;

  });

  }

goPrevious(){

  let previusId = this.newEmplyeesdetails - 1;

  this.router.navigate(['/employeeDetails', previusId]);

}

goNext(){

  let nextId = this.newEmplyeesdetails + 1;

  this.router.navigate(['/employeeDetails', nextId]);

}

{{newEmplyeesdetails}}

<a (click)="goPrevious()">Go previous</a> <br>

<a (click)="goNext()">Go Next</a>