NG2 label of angular2 learning notes

Time:2021-2-23

The internal value instruction of angular2 is very similar to angular2. All friends who are familiar with angular1 can see it at a glance.angular2-demo
<!– more –>
NG2 label of angular2 learning notes

1、 Renderings

NG2 label of angular2 learning notes

1Instruction interpretation

0. assembly

The main thing is to define some data for testing

import {Component} from '@angular/core';

@Component({
    selector: 'ng-tag',
    styles: [require('./NgTag.scss')],
    template: require('NgTag.html')
})

export class NgTagComponent {
    list:any;
    ngSwitchList:any;
    ngStyleList:any;

    constructor() {
        this.list = [{
                'name': 'xiaomo'
            },{
                'name': 'xiaogang'

            },{
                'name': 'xiaomoxue'
            }];
        this.ngSwitchList=[
            'xiaomo',
            'xiaoming'
        ];
        this.ngStyleList={
            'color':'blue',
            'backgroundColor':'green'
        };
    };
}

1. ngFor

<ul class="list-group" *ngFor="let item of list">
  <li class="list-group-item">{{item.name}}</li>
</ul>

design sketch
NG2 label of angular2 learning notes

2. ngIf

I defined a list in the component

this.list = [{
        'name': 'xiaomo'
    },{
        'name': 'xiaogang'

    },{
        'name': 'xiaomoxue'
    }];

When I loop through this array object, I compare it item.name If it isxiaomoThe content in ngif appears

<ul *ngFor="let item of list">
<li *ngIf=" item.name== 'Xiaomo' "class =" list group item "> wow, I found < span class =" label info "> in the list{{ item.name }}</span></li>
</ul>

design sketch
NG2 label of angular2 learning notes

3. ngSwitch

I defined a method in the component to set the selected value to myval

myVal:number = 0;
changeValue($event):void{
    console.log ($ event.target.value ); // output the selected value to myval
    this.myVal = $event.target.value;
}

There is a set of radio buttons, check yesmyValIt will change,ngSwitchI’m going to cycle each onecaseIf it is found, it will be displayedcaseData in, otherwise displaydefaultData in

<div>
    <h2>ngSwitch</h2>
        <input name="myVal" type="radio" value="1" (click)="changeValue($event)">1
        <input name="myVal" type="radio" value="2" (click)="changeValue($event)">2
        <input name="myVal" type="radio" value="3" (click)="changeValue($event)">3
        <input name="myVal" type="radio" value="4" (click)="changeValue($event)">4
        <input name="myVal" type="radio" value="5" (click)="changeValue($event)">5
        <hr>
       <span [ngSwitch]="myVal">
          <span *ngSwitchCase="'1'">ONE</span>
          <span *ngSwitchCase="'2'">TWO</span>
          <span *ngSwitchCase="'3'">THREE</span>
          <span *ngSwitchCase="'4'">FOUR</span>
          <span *ngSwitchCase="'5'">FIVE</span>
          <span *ngSwitchDefault>other</span>
        </span>
</div>

design sketch
NG2 label of angular2 learning notes

4. ngStyle

The values of the styles here are all taken from the components, which means that they can be dynamic. However, it is suggested that they should be encapsulated as class, that is to sayngClass

<div [ngStyle]="{'background-color': ngStyleList.backgroundColor,'color':ngStyleList.color}" [style.font-size]="30">
      Background:{{ ngStyleList.backgroundColor }} <br/>
      Font color:{{ ngStyleList.color }}
  </div>

design sketch
NG2 label of angular2 learning notes

5. ngClass

On the left is the class name''On the right is a true | false expression

< button class = "BTN" [ngclass] = {'BTN danger': ngstylelist} > test < / button >

design sketch
NG2 label of angular2 learning notes