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

Source: Internet
Author: User
Tags export class

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);,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:

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.