ANGULAR2 Self-study Note (iii)---ng2 tab

By learning these concepts, you can simply describe a tab button for an option feature:

Data:
1. Arrays:
Instantiate a class of an array, if you want to use the data in this class, you need to use a public property in the component to storm the class such as heroes=heroes;
Const Array Name heroes: Data structure in array =[

]

Command instructions
1.*ngfor= "Let value of Arr/json" ==> {{value}}
2. (click) = function name (parameter)

Module template syntax for angular: https://www.angular.cn/docs/ts/latest/guide/template-syntax.html#! #ngModel
1. Form elements Support bidirectional binding: Formsmodule from ' @angular/forms '
Add: Formsmodule module in the Impors portal
Use: <input [(Ngmodel)]= "Hero.name" placeholder= "name" >
Add Hero data to the module in the page to correlate the data with the Ngmodel in the input box

App.component.ts file:

Import {Component} from ' @angular/core '; export class title{id:number; name:string;}  Const title:title[]=[{id:1,name: ' Sport '}, {id:2,name: ' art '}, {id:3,name: ' Travel '}] @Component ({selector: ' My-app ', Template: ' <section id= ' div ' class= "box" >  <section id= ' div1 ' &        Gt <a href= "javascript:;" class= "Back" ></a> <ul class= "Clearfix" id= "box" > <!--it's done three pieces.  , ngfor Loop Create Li,[ngclass] Dynamic output Add class name, (click) output the current Li ID when clicked, and dynamically assign Curid value--<li *ngfor= "let title of Titles" [ngclass]=] (Curid = = this.title.id)? ' Active ': ' (click) = "foractive (this.title.id)" >{{title.name}}</li> </ul>  </section></section>", styles:[' #div {width:100%;    height:100%;    } #div1 {Overflow:hidden;}      . bg_index{width:100%;      height:100%;      position:fixed;      left:0;top:0;    Z-index:-1;      }. back{Display:block;      Width:0.77rem;      Height:0.77rem;      Background:url ("App/images/04.png") no-repeat;      Background-size:contain;      Margin-top:0.5rem;    Margin-left:0.3rem; } #box {Padding-left:5%;margin-top:25%;width:100%;height:7rem;}      #box li{font:bold 0.6rem ' Microsoft Ya Black ';      Text-align:center; Height:70%;margin-top:0.4rem;width:30%;line-height:1rem;float:left;color:rgba (255,255,255,.5);}    #box. Active{color:rgba (255,255,255,1);}      . poem{Width:0.85rem;      Height:0.85rem;      position:fixed;      Bottom:0.35rem;      left:50%;    Margin-left:-0.425rem;  } ']}) export class AppComponent {titles=title;  Set Default check Option Curid:number = 2;  Click the Toggle option function foractive (n1:number): void{This.curid = n1; }}

ANGULAR2 Self-study Note (iii)---ng2 tab