These are my notes i can use for using angular 2.
<ul>
<li *ngFor="let carPart of carParts">
<h2> {{carPart.name}}</h2>
<p>{{carPart.description}}</p>
<p>{{carPart.inStock}} In Stock </p>
</li>
<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>
<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
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
}
<div [hidden]="!user.isAdmin">secret</div>
<button [disabled]="isDisabled">Logout<button>
<img [alt]="image.description">
There are two ways you can display an image:
<img class ="carPartImage" src="{{carPart.image}}"><img class ="carPartImage" [src]="carPart.image">