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