Creating a component of the angular study notes, custom attributes, data cycle

1. Create a component (command)

ng g component my-new-component
Specified directory is created: ng g component components / Footer

 2. The reference component (.html file reference)

<app-header></app-header>

 3. Data Binding (binding property)

Ts properties defined in the following description of several file attributes defined in a manner

title = "This is a property"; 
msg = ""; 
assignment:
this.msg = "just another property"

Binding properties (html file):

{{title}}

<Div [title] = "msg"> mouse put up can see the value of the msg </ div>

 The definition of public property plus modifiers

public username ="user";

 Here :( attribute type definition of type string attributes)

pubic string calssname = "second class three years";

 Defined attributes: (ts defined in the file construstor He said Kazakhstan is a constructor in the inside to define the assignment h h This property outside the constructor)

this.h = "<h2> This is a h2 with [the innerHTML] to resolve </ h2>";

Obtain:

<Div [innerHTML] = "h"> </ div> (html file parsing)

 Define object properties:

public obj ={

name = "John Doe";

　　}

Obtain:

{{obj.name]}

 3. Data cycle

Define a list

public list =[];
给list赋值:
this.list["11","22","33"];

Circulation list:

<ul> 
　　<li *ngFor="let item of list"> 
　　　　{{item}} 
　　</li> 
</ul>

 

 Gets the index when the cycle:

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