Welcome folks today in this blog post we will be using the @input and @output decorators in angular 14 to share data between child and parent components using typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular project using the below command as shown below
ng new sampleproject
cd sampleproject
And after that you will see the below directory structure of the angular app as shown below
Creating Child Component
Now we need to create the child component using the below command as shown below
ng generate component components/child
This will create the components folder and inside it we have the child component as shown below
Now we need to pass some data from the parent component to child component using the below code
app.component.html
|
1 |
<app-child [name]="currentName"></app-child> |
And now we need to declare the value of the currentName inside the app.component.ts file as shown below
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title="sample app" currentName = "John Root" } |
And now we will be sharing this data inside the child component using the @Input() decorator as shown below. For this you need to go to child.component.ts file and copy paste the following code
child.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent { @Input() name : any } |
As you can see we are importing the Input decorator from the angular core library. And now we can embed the value of the name inside the child.component.html file as shown below
child.component.html
|
1 |
<h1>My name is : {{name}}</h1> |
Passing Objects to Child Components
Now we can even pass objects also to the child component using the same logic. So inside the app.component.html file you can pass the object as shown below
app.component.html
|
1 |
<app-child [name]="currentName" [obj]="obj"></app-child> |
Now we can declare this object inside the app.component.ts file as shown below
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { currentName = "John Root" obj = { name:"Kane Williamson", age:45, country:"New Zealand" } title = 'angularproject'; } |
And now inside the child component we can again use the @Input() decorator to declare the object as shown below
child.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component, Input,Output, OnInit, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { @Input() name : any @Input() obj: any } |
And now we can display the properties of the object inside the html in the child.component.html file as shown below
child.component.html
|
1 2 3 4 5 |
<ul> <li>{{obj.name}}</li> <li>{{obj.age}}</li> <li>{{obj.country}}</li> </ul> |
Sharing Data From Child to Parent Component
Now we will be using the @Output() decorator to pass the data from the child to the parent component. For this we need to go to child.component.html file and inside this we will be having the input file and the button to create a new user as shown below
child.component.html
|
1 2 |
<input type="text" #user> <button (click)="addUser(user.value); user.value=''">Add User</button> |
And now we need to go to child.component.ts file and here we will be importing the @Output decorator and then we will be defining the addUser() method to emit the event to the parent component as shown below
child.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Component, Input,Output, OnInit, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent { @Input() name : any @Output() dataEvent = new EventEmitter<string>() addUser(value:any){ this.dataEvent.emit(value) } } |
And now we need to go to app.component.html parent component and inside this we will be showing the list of users by using the ngFor directive and then we will be receiving the data from the child component by passing the event function and here we will be declaring the function addUsers() which we will be execute to insert the user as shown below
app.component.html
|
1 2 3 4 |
<ul *ngFor="let user of users"> <li>{{user}}</li> </ul> <app-child [name]="currentName" (dataEvent)="addUser($event)"></app-child> |
And now we need to go to app.component.ts file and copy paste the following code where we will be declaring the array of users and then we will be defining the method to add the user inside the array
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { currentName = "John Root" users = ['Trent Boult','Devon Conway'] title = 'angularproject'; addUser(user:string){ this.users.push(user) } } |
ng serve
