Angular Understanding @Input, @Output and EventEmitter

Hello, Habr! I present to you the translation of the article "Understanding @Input, @Output and EventEmitter in Angular" by foolishneo.



Greetings to all who wish to accumulate information about the intricacies of the Angular framework.



Today I thought it necessary to better study information regarding the organization of interaction between Angular components and start practicing translations of articles of interest to me from English.



I hope there are those for whom the translation of the article from Medium will be useful.



Having long had a desire to start translating useful articles from English, I decided to start with a simple, not very voluminous, but possibly complementing existing knowledge article. To your attention, gentlemen ...



For those new to Angular, the Input and Output decorators can be embarrassing, especially when you're trying to figure out their purpose with code samples. In this article, I will try to explain them in the simplest possible way.

Data exchange tool

First of all, the task of the Input and Output decorators is to exchange data between the components. They are a mechanism for receiving / sending data from one component to another.



Input is used to receive data, while Output is used to send it. Output sends data by exposing them as event producers, usually as objects of the EventEmitter class .



Thus, when you see the code, in the likeness of this:

@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

he means:

• Hey, I expect the data sent to me. I will get them and save them as the value of the item property .
  
  
• By the way, I will be the reason for sending data using the onChange property .
  
  

Let's say you have a TodoList component that contains a TodoItem component.

In the TodoLis t component template, you expect to see:

 ... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

What means:

• The TodoList component puts the data value in its myTask property and passes it to the TodoItem component
  
  
• Data transferred from the TodoItem component will be received and processed by the handleChange () function of the TodoList component
  
  

Enough theory. Let's look at an example.

@Input and Output in action.

Pay attention to an example.



Here I created 2 components, the hello component, nested in the app component. The hello component has Input and Output :

 hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

The hello component expects to receive a string value and place it as the value of the myFriend property.

 @Input() myFriend: string
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Each time you click on it, the onClick data sending property of the Output decorator will transmit to the “outside world” a string with the contents of “Neo”.

 <h3 (click)="onClick.emit('Neo')">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Below is the app component code:

 app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Note that the app component uses the hello component tag in its template, which performs 2 actions:

• passes the value of the string 'Angular' to the hello component using the ng property
  
  
• and receives the sent value from the hello component and processes the received value using the upCase () function:
  
  

 <hello myFriend="{{ ng }}" (onClick)="upCase($event)">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

You can see the application in action here.