Angular2 basic practice (3) – template syntax: events and references (including video)

Time:2020-11-3

The syntax, events and references of the two angular2 templates are explained here

event

Event handling in angular2: introduce the click event and add it to your HTML template
<button (click)="onClick()"></button>
Pay attention to the parentheses. The parentheses are the marks of the registered events, and the corresponding brackets are the brackets [] which represent the input. You can understand () as the output. You can define your own input and output (explained in the following sections).

Example code:

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

@Component({
  selector: 'app-simple-form',
  template: `
<button (click)="onClick(1)">Click me!</button>
`,
  styles: []
})
export class SimpleFormComponent {

  onClick(value){
    console.log (value); // will print 1
  }

  Constructor () {} // this is the ES6 class initialization method
}

quote

Angular2 the first mock exam can be used in the same component, and it can be defined by reference to <input #myInput>, so that input can be used elsewhere in the unified template.
Example code:

//You can use myinput in the following code to define myinput.
import { Component } from '@angular/core';

@Component({
  selector: 'app-simple-form',
  template: `<div>
<input #myInput type="text">
<button (click)="onClick(myInput.value)">Click me!</button>

</div>`,
  styles: []
})
export class SimpleFormComponent {

  onClick(value){
    console.log (value); // the value of the referenced input will be printed here.
  }

  Constructor () {} // this is the ES6 class initialization method
}

Follow the video again,Video link

Test the code,Plunker link