The usage and example of Input and Output in Angular2 are described in detail.

The usage and example of Input and Output in Angular2 are described in detail.

The Input and Output in angular2 can be compared with the instructions in AngularJS.

Input is equivalent to binding the command value, either one-way (@) or two-way (= ). The value of the parent scope is "input" to the sub-scope, and then the sub-scope is processed.

Output is equivalent to the method binding of the instruction, and the subscope triggers the event to execute the response function. The response function method body is located in the parent scope, which is equivalent to outputting the event to the parent scope, in the parent scope.

Let's take a look at angular2 example. We define a child component to get the array value of the parent scope and display it in the form of a list, then, when you click the child component element, call the parent component method to delete the element.

//app.component.html<app-child [values]="data" (childEvent) = "getChildEvent($event)"></app-child>//app.component.ts@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { data = [1,2,3]; getChildEvent(index){  console.log(index);  this.data.splice(index,1); }}

The above is the component class and template of the app-root component. We can input data to the app-child sub-component, and then receive and respond to the childEvent event.

//app-child.component.html<p *ngFor="let item of values; let i = index" (click)="fireChildEvent(i)"> {{item}}</p>//app-child.component.ts@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css']})export class ChildComponent implements OnInit { @Input() values; @Output() childEvent = new EventEmitter<any>(); constructor() { } ngOnInit() { } fireChildEvent(index){  this.childEvent.emit(index); }}

The child component defines that values receives the input from the parent component. Here is the data value, which is then displayed using the ngFor command.

When each element is clicked, the click event is triggered and the fireChildEvent function is executed. The function outputs the index value of the element to the parent component for processing.

Output is generally an EventEmitter instance. The parameter emit is sent to the parent component using the emit method of the instance to trigger the childEvent event of the parent component.

Then, the parent component monitors the event and executes the corresponding processing function getChildEvent to delete the data pointed to by the passed element index. Meanwhile, the view is updated.

Actual results:

Source Code address: https://github.com/justforuse/angular2-demo/tree/master/angular-input-output

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.