Angular Usage Notes

These are my notes i can use for using angular 2.

Structural Directives

ngFor

<ul>

<li *ngFor="let carPart of carParts">

<h2> {{carPart.name}}</h2>

<p>{{carPart.description}}</p>

<p>{{carPart.inStock}} In Stock </p>

</li>

 

ngIf

<ul>

<li *ngFor="let carPart of carParts">

<h2> {{carPart.name}}</h2>

<p>{{carPart.description}}</p>

<p *ngIf="carPart.inStock>0">{{carPart.inStock}} In Stock </p>

<p *ngIf="carPart.inStock===0">Out Of Stock </p>

</li>

ngModel

<input [(ngModel)]="name" #ctrl="ngModel" required>

NOTE: * When you use ngmodel, you can only set it equal to a data bound property!

you will mostly use this for form fields like this for example:

Good Component properties:

[(ngModel)]="user.id"
[(ngModel)]="userName"

Badd Component properties:

[(ngModel)]="userName()" // cannot call a function

 

EVENTS LISTENERS

HERE ARE SOME OTHER EVEN YOU CAN USE WITH ANGULAR 2 LIKE: mouseover, blur, focus, keydown submit, etc..

 

<div (mouseover)="callFunction()">

<input (blur)="callFunction()">

<input (focus)="callFunction()">

<input type="text" (keydown)="callFunction()">

<form (submit)="callFunction()">

you can get the even properties by ysing the $event object, for example:

<input type="text" (keydown)="callFunction()">


callFunction(event){
console.log(event); // view the event object properties in the console
}

BINDING

<div [hidden]="!user.isAdmin">secret</div>
<button [disabled]="isDisabled">Logout<button>
<img [alt]="image.description">

- IMAGE BINDING

There are two ways you can display an image:

<img  class ="carPartImage" src="{{carPart.image}}">
<img  class ="carPartImage" [src]="carPart.image">