We have a component that displays some text. If we want to reuse the component, it will display the same thing and behave the same way. This is an unwanted behavior. Whenever we want to reuse a component, we want to be able to control its behavior so that it behaves differently than other components of the same type or simply, to display a different message instead of the same thing over and over again.
Let’s start by doing some examples.
ng generate component Greeting
Upon completion of the command, expand the component folder and go in the component TypeScript file.
import { Input } from '@angular/core';
Then declare an input receiver variable with the type of input it can receive. The purpose of the input receiver is to receive and store the value that is passed into the component. Lastly, add a @Input() decorator as part of the variable declaration to indicate that the variable is used as an input receiver. That is all we have to do to add an input.
@Input() name: string;
So now, we have an entry point where we can pass a string into our component from the outside. It is a string because the type of our input receiver is a string. It can be anything. A Boolean, a number, a class, and so on.
<p>{{name}}</p>
Now add the component to the app component html page so it will be rendered on to the screen. Go to the component TypeScript file and get the value of the selector property from the component decorator.
Then go to the app component html page and add the component.
<app-greeting></app-greeting>
Next, we will insert a string into the component. Go to the app component TypeScript file. Declare a string variable and assign it some text.
insert = "King";
Go back to the app component HTML page and insert the variable into the component. To access the inputs of a component, we use the square bracket syntax and then provide the name of the input we want to access, which is the name we have given the input receiver. Then we specify what we want to insert. We want to insert our variable.
<app-greeting [name]="insert"></app-greeting>
So right now, our component should display - King. Let’s verify that. Save the project and start the local server. Open the browser and go to localhost:4200.
This is the purpose of outputs. When you add an output, you are adding a system where things from outside of the component can subscribe and listen to whatever the component have to say. Then they can choose to react to it or not.
import { Output, EventEmitter } from '@angular/core';
Then declare an output variable. The role of the variable is to store an EventEmitter object. This object will turn our output variable into an event node where things can subscribe to it and listen to our component. Inside the angle brackets is the type of information it can broadcast. Lastly, add the @Output() decorator in to the variable declaration to indicate that the variable is an output.
@Output() sendMessage = new EventEmitter<string>();
So now, we have an output that can broadcast a string value to the outside. But we are not done. We need to define when to trigger our event node to broadcast the information and what information we want to broadcast.
<button (click)="send()">Send Message</button>
Go to the component TypeScript file and define the function.
send(){
<app-greeting
Go to the app component TypeScript file and define the function.
onMessageReceived(){
Right now, when we click on the button in the Greeting component, it will trigger the output event and call this handler function.
<app-greeting
onMessageReceived(event: string){
Save the project and go to the browser. Click on the button.
Recap