Json ‘and add it to the’ SRC /tslint.json ‘file (or modify it directly in ‘./tslint.json’).

{{}} {herf]=”url” event binding (click)=”add($event)”

[(ngModel)]=”{{XXX}}”

Attribute instruction

RedColor :true, fz:false}. RedColor {fontSize:16px; } .fz{ color:red; } [class.test]="isTest" // Add or remove a class isTest =" true". Test {color:red; } styleList= "styleList" styleList={color:red, FontSize :16px} [style.fontSize]="fz" fz=60px *ngIf [class.hidden] *ngFor=" Let item of colors; let i=index ; Let odd=odd" *ngFor loop will give you an index but you can't use index directly, you have to assign a variable to get an odd by default, and when index is odd, Odd is false *ngFor adds trackBy to improve rendering performance: If you're looping through an object and you don't need to add it if you're looping through an array and you don't need to add trackBy, only the modified Item gets rerendered, *ngFor="let item of colors; let i=index; let trackBy="trackById" trackById(index,item){ return item.id } colors={ color:red, fontSize:16px }Copy the code

Todos case study

Task display *ngFor trackBy

Add function [(ngModel)] to import FormMoulde module with non-null judgment

Delete Adds events to a text box. Use filter to delete corresponding items

State toggle add click event — get ID –find find the corresponding item inverts its state field

Angular data change views are automatically updated

Todos case upgrade

1) Decompose and componentize functions

2) The parent component passes data to the child component

Parent Skill ="parentData" passes a string [Skill]="parentData" // passes a dynamic data child import Input @input() The skill decorator exposes the attribute HTML that is passed from the parent to the child Application in templatesCopy the code

3) The child passes data to the parent

Child Import Output EventEmitter from Angular /core @Output() getMoney = new EventEmitter() when the click event is emitted GetMoney = setMoney($event) Js setMoney(data){console.log(data)}Copy the code