Detailed explanation of template syntax in Angular

This article will give you a detailed introduction to the template syntax in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "angular tutorial"

Interpolation expression

• test-interpolation.component.ts

@Component({
  selector: 'app-test-interpolation',
  templateUrl: './test-interpolation.component.html',
  styleUrls: ['./test-interpolation.component.css']
})
export class TestInterpolationComponent implements OnInit {

  title = '插值表达式';

  constructor() { }

  ngOnInit() {
  }

  getValue(): string {
    return '值';
  }
}

• test-interpolation.component.html

<div class="panel panel-primary">
  <div class="panel-heading">基插值语法</div>
  <div class="panel-body">
    <h3>
      欢迎来到 {{title}}！
    </h3>
    <h3>2+2 = {{2 + 2}}</h3>
    <h3>调用方法{{getValue()}}</h3>
  </div>
</div>

Template Variables

• test-template-variables.component.ts

@Component({
  selector: 'app-test-template-variables',
  templateUrl: './test-template-variables.component.html',
  styleUrls: ['./test-template-variables.component.css']
})
export class TestTempRefVarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public saveValue(value: string): void {
    console.log(value);
  }
}

• test-template-variables.component.html

<div class="panel panel-primary">
  <div class="panel-heading">模板变量</div>
  <div class="panel-body">
    <input #templateInput>
    <p>{{templateInput.value}}</p>
    <button class="btn btn-success" (click)="saveValue(templateInput.value)">局部变量</button>
  </div>
</div>

Value binding, event binding, two-way binding

Value binding: []

• test-value-bind.component.ts

@Component({
  selector: 'app-test-value-bind',
  templateUrl: './test-value-bind.component.html',
  styleUrls: ['./test-value-bind.component.css']
})
export class TestValueBindComponent implements OnInit {

  public imgSrc = './assets/imgs/1.jpg';

  constructor() { }

  ngOnInit() {
  }
}

• test-value-bind.component.html

<div class="panel panel-primary">
  <div class="panel-heading">单向值绑定</div>
  <div class="panel-body">
    <img [src]="imgSrc" />
  </div>
</div>

Event Binding: ()

• test- event-bind-component.ts

@Component({
  selector: 'app-test-event-binding',
  templateUrl: './test-event-binding.component.html',
  styleUrls: ['./test-event-binding.component.css']
})
export class TestEventBindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public btnClick(event: any): void {
    console.log(event + '测试事件绑定！');
  }
}

• test-event-bind.component.html

<div class="panel panel-primary">
    <div class="panel-heading">事件绑定</div>
    <div class="panel-body">
        <button class="btn btn-success" (click)="btnClick($event)">点击按钮</button>
    </div>
</div>

Two-way binding: [()]

• test-twoway-binding.component.ts

@Component({
  selector: 'app-test-twoway-binding',
  templateUrl: './test-twoway-binding.component.html',
  styleUrls: ['./test-twoway-binding.component.css']
})
export class TestTwowayBindingComponent implements OnInit {

  public fontSizePx = 14;

  constructor() { }

  ngOnInit() {
  }

}

• test-twoway-binding.component.html

<div class="panel panel-primary">
  <div class="panel-heading">双向绑定</div>
  <div class="panel-body">
    <app-font-resizer [(size)]="fontSizePx"></app-font-resizer>
    <div [style.font-size.px]="fontSizePx">Resizable Text</div>
  </div>
</div>

• font-resizer.component.ts

@Component({
  selector: 'app-font-resizer',
  templateUrl: './font-resizer.component.html',
  styleUrls: ['./font-resizer.component.css']
})
export class FontResizerComponent implements OnInit {

  @Input()
  size: number | string;

  @Output()
  sizeChange = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  decrement(): void {
    this.resize(-1);
  }

  increment(): void {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

• font-resizer.component.html

<div style="border: 2px solid #333">
  <p>这是子组件</p>
  <button (click)="decrement()" title="smaller">-</button>
  <button (click)="increment()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>

Built-in structural directives

*ngIf

• test-ng-if.component.ts

@Component({
  selector: 'app-test-ng-if',
  templateUrl: './test-ng-if.component.html',
  styleUrls: ['./test-ng-if.component.css']
})
export class TestNgIfComponent implements OnInit {

  isShow = true;

  constructor() { }

  ngOnInit() {
  }
}

• test- ng-if.component.html

<div class="panel panel-primary">
  <div class="panel-heading">*ngIf的用法</div>
  <div class="panel-body">
    <p *ngIf="isShow" style="background-color:#ff3300">显示内容</p>
  </div>
</div>

*ngFor

##test-ng-for.component.ts

@Component({
  selector: 'app-test-ng-for',
  templateUrl: './test-ng-for.component.html',
  styleUrls: ['./test-ng-for.component.css']
})
export class TestNgForComponent implements OnInit {

  races = [
    {name: 'star'},
    {name: 'kevin'},
    {name: 'kent'}
  ];

  constructor() { }

  ngOnInit() {
  }

}

test-ng-for.component.html

<div class="panel panel-primary">
  <div class="panel-heading">*ngFor用法</div>
  <div class="panel-body">
    <h3>名字列表</h3>
    <ul>
      <li *ngFor="let name of names;let i=index;">
       {{i}}-{{name.name}}
      </li>
    </ul>
  </div>
</div>

ngSwitch

test-ng-switch.component.ts

@Component({
  selector: 'app-test-ng-switch',
  templateUrl: './test-ng-switch.component.html',
  styleUrls: ['./test-ng-switch.component.css']
})
export class TestNgSwitchComponent implements OnInit {

  status = 1;

  constructor() { }

  ngOnInit() {
  }

}

test-ng-switch.component.html

<div class="panel panel-primary">
  <div class="panel-heading">ngSwitch用法</div>
  <div class="panel-body">
    <div [ngSwitch]="status">
      <p *ngSwitchCase="0">Good</p>
      <p *ngSwitchCase="1">Bad</p>
      <p *ngSwitchDefault>Exception</p>
    </div>
  </div>
</div>

Built-in attribute directive

The relationship between HTML attributes and DOM attributes

There is a one-to-one mapping relationship between a small number of HTML attributes and DOM attributes, such as id;
Some HTML attributes have no correspondence DOM attributes, such as colspan;
Some DOM attributes do not have corresponding HTML attributes, such as textContent;
Even if the names are the same, HTML attributes and DOM attributes are not the same thing;
The value of the HTML attribute specifies the initial value, and the value of the DOM attribute indicates the current value; the value of the HTML attribute cannot be changed, and the value of the DOM attribute can be changed.
Template binding works through DOM properties and events, not HTML attributes.

Note: Interpolation expression and attribute binding are the same thing, and interpolation expression belongs to DOM attribute binding.

NgClass

test-ng-class.component.ts

@Component({
  selector: 'app-test-ng-class',
  templateUrl: './test-ng-class.component.html',
  styleUrls: ['./test-ng-class.component.scss']
})
export class TestNgClassComponent implements OnInit {
  public currentClasses: {};

  public canSave = true;
  public isUnchanged = true;
  public isSpecial = true;

  constructor() { }

  ngOnInit() {
    this.currentClasses = {
      'saveable': this.canSave,
      'modified': this.isUnchanged,
      'special': this.isSpecial
    };
  }
}

test-ng-class. component.html

<div class="panel panel-primary">
  <div class="panel-heading">NgClass用法</div>
  <div class="panel-body">
    <div [ngClass]="currentClasses">设置多个样式</div>
    <div [class.modified]=&#39;true&#39;></div>
  </div>
</div>

test-ng-class.component.less

.saveable {
    font-size: 18px;
}

.modified {
    font-weight: bold;
}

.special {
    background-color: #ff3300;
}

NgStyle

test-ng-style.component.ts

@Component({
  selector: 'app-test-ng-style',
  templateUrl: './test-ng-style.component.html',
  styleUrls: ['./test-ng-style.component.css']
})
export class TestNgStyleComponent implements OnInit {

  currentStyles: { };
  canSave = false;
  isUnchanged = false;
  isSpecial = false;

  constructor() { }

  ngOnInit() {
    this.currentStyles = {
      'font-style': this.canSave ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold' : 'normal',
      'font-size': this.isSpecial ? '36px' : '12px'
    };
  }

}

test-ng-style.component.html

<div class="panel panel-primary">
  <div class="panel-heading">NgStyle用法</div>
  <div class="panel-body">
    <div [ngStyle]="currentStyles">
      用NgStyle批量修改内联样式！
    </div>
    <div [style.font-size]="isSpecial? &#39;36px&#39; : &#39;12px&#39;"></div>
  </div>
</div>

NgModel

test-ng-model.component.ts

@Component({
  selector: 'app-test-ng-model',
  templateUrl: './test-ng-model.component.html',
  styleUrls: ['./test-ng-model.component.css']
})
export class TestNgModelComponent implements OnInit {

  name = 'kevin';

  constructor() { }

  ngOnInit() {
  }

}

test-ng-model.component.html

<div class="panel panel-primary">
    <div class="panel-heading">NgModel的用法</div>
    <div class="panel-body">
        <p class="text-danger">ngModel只能用在表单类的元素上面</p>
        <input type="text" name="name" [(ngModel)]="name">
    </div>
</div>

Widget

Pipeline

Angular’s ​​built-in common pipes:

uppercase and lowercase

uppercase Convert letters to uppercase {

{'aaa' | uppercase}} lowercase Convert letters to lowercase {
{'BBB' | lowercase}}

Date

##{

{ birthday | date: 'yyyy-MM-dd HH:mm:ss'}}

number

{

{ pi | number: '2.2-2'}}

2.2-2: Indicates that 2-digit integer and 2-digit number are reserved decimal. 2-2: Indicates a minimum of 2 decimal places and a maximum of 2 decimal places.

Example

test-pipe.component.ts

@Component({
  selector: 'app-test-pipe',
  templateUrl: './test-pipe.component.html',
  styleUrls: ['./test-pipe.component.css']
})
export class TestPipeComponent implements OnInit {

  currentTime: Date = new Date();
  
  str = 'aaa';

  money = 34.567;


  constructor() {
  }

  ngOnInit() {
    window.setInterval(
      () => { this.currentTime = new Date() }
      , 1000);
  }
}

test-pipe.component.html

<div class="panel panel-primary">
    <div class="panel-heading">管道的用法</div>
    <div class="panel-body">
      {{ currentTime | date:&#39;yyyy-MM-dd HH:mm:ss&#39; }}
    </div>
    <div class="panel-body">
      {{ str | uppercase }}
    </div>
    <div class="panel-body">
      {{ money | number: &#39;2.2-2&#39; }}
    </div>
</div>

Non-null assertion

test-not-null-assert.component.ts

• @Component({
    selector: 'app-test-safe-nav',
    templateUrl: './test-not-null-assert.component.html',
    styleUrls: ['./test-not-null-assert.component.css']
  })
  export class TestSafeNavComponent implements OnInit {
  
    public currentValue: any = null;
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }

test-not-null-assert. component.html

• <div class="panel panel-primary">
    <div class="panel-heading">安全取值</div>
    <div class="panel-body">
      名字：{{currentValue?.name}}
    </div>
  </div>

  For more programming-related knowledge, please visit: Programming Teaching

  ! !

  The above is the detailed content of Detailed explanation of template syntax in Angular. For more information, please follow other related articles on the PHP Chinese website!