There are 3 different kinds of directives
- Component - Directive with a template.
- Structure - Alters layout by adding, removing or replacing DOM HTML elements. Example: ngFor and ngIf.
- Attribute - change the appearance or behavior of an element.
Below code is an example how we add a property and array object into Component and display in index.html using selector.
- ngFor is structure directive. Loops through an array.
- ngIf is another structure directive. It allows us to evaluate conditionals, show content conditionally.
@Component({
selector: "my-app",
template: `
<h1>{{title}}</h1>
<ul>
<!-- carParts in an array object defined in AppComponent Class. -->
<!-- carPart is a local variable. -->
<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>
</ul>
`
})
class AppComponent{
title = "Ultra Racing", // Example of property
carParts = [{
"id":1,
"name":"Super Tires",
"description":"These tires are the very best",
"inStock":5
},
{
"id":2,
"name":"Reinforced shocks",
"description":"Shock made from krytonite",
"inStock":4
},
{
"id":3,
"name":"Padded Seats",
"description":"Super soft scats for a smooth ride.",
"inStock":0
}] // Example of object
}
Download Car Part Source:
https://github.com/htsiah/angular2-carparts
