Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 @Input & @Output Decorators Tutorial to Share & Transfer Data Between Child and Parent Components in TypeScript

Posted on February 7, 2023

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

 

 

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme