ngIf

用来决定显示或隐藏元素，指令条件可以是表达式。
app.component.html代码

<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate">
    <p *ngIf=false>1</p>
    <p *ngIf="doNotDisplay">2</p>
    <p *ngIf="display()">3</p>
</nz-card>
<ng-template #extraTemplate>
    <a>More</a>
</ng-template>

app.component.ts代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  doNotDisplay: boolean = false

  display(): boolean {
    return true
  }

}

隐藏的元素不会创建。

ngSwitch

ngSwitch指令可以通过ngSwitchCase、ngSwitchDefault走不通的分支。
app.component.html代码

<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate" [ngSwitch]="choice">
    <p *ngSwitchCase="1">1</p>
    <p *ngSwitchCase="2">2</p>
    <p *ngSwitchCase="3">3</p>
    <p *ngSwitchDefault>default</p>
  </nz-card>
  <ng-template #extraTemplate>
    <a>More</a>
  </ng-template>

app.component.ts代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  choice: string = "4"

}

ngStyle

给DOM元素设置CSS属性。
最简单的用法[style.property]=value
app.component.html代码

<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate">
    <p *ngIf=false>1</p>
    <p *ngIf="doNotDisplay">2</p>
    <p *ngIf="display()" [style.background-color]="backgroundColor">3</p>
</nz-card>
<ng-template #extraTemplate>
    <a>More</a>
</ng-template>

app.component.ts代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  doNotDisplay: boolean = false
  backgroundColor: string = 'red'

  display(): boolean {
    return true
  }

}

另外一种方式是使用键值对

<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate">
    <p *ngIf=false>1</p>
    <p *ngIf="doNotDisplay">2</p>
    <p *ngIf="display()" [ngStyle]="{'background-color':backgroundColor}">3</p>
</nz-card>
<ng-template #extraTemplate>
    <a>More</a>
</ng-template>

ngClass

app.component.css中定义一个类

.bordered{
    border: 1px dashed royalblue;
}

app.component.html代码

<div [ngClass]="'bordered'" style="height: 400px;"></div>

也可以通过如下代码

<div [ngClass]="{bordered:false}" style="height: 400px;"></div>

ngFor

用于循环
app.component.html代码

<ul>
    <li *ngFor="let color of colors" [ngStyle]="{color:color}">{{color}}</li>
</ul>

app.component.ts代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

 colors:Array<String>

 constructor(){
   this.colors=[
     'red','blue','green'
   ]
 }

}

循环时，我们也可以获取索引

<ul>
    <li *ngFor="let color of colors;let index=index" [ngStyle]="{color:color}">{{index}}--{{color}}</li>
</ul>

ngNonBindable

指定不编译或者绑定页面中的某个特殊部分。
app.component.html代码

<p ngNonBindable>
    {{content}}
</p>
<p>
    {{content}}
</p>

app.component.ts代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

 content:string="<div>content</div>"

}

innerHTML、innerText

通过{{}}输出内容，会强制转换成文本。我们可以通过[innerHTML]输出html。[innerText]可以将html代码强制输出文本。
app.component.html代码

<div [innerHTML]="content">
    
</div>
<div [innerText]="content">
    
</div>

app.component.ts代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

 content:string="<div>测试</div>"

}