Author -  Sai gowtham

How to pass data from one component to another in angular

In this tutorial, we are going to learn about component communication in angular with the help of examples.

@Input

Angular provides us @Input decorator by using that we can pass data from parent component to child component.

Let’s see an example

child.component.ts
import { Component, Input } from '@angular/core';


@Component({
  selector: 'app-child',
  templateUrl: './childcomponent.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() name: string;
}

In the above code first, we imported an Input decorator from the @angular/core package and added it in front of name property so that it can available to pass data from the parent component.

child.component.html
<div>
   <h1>{{name}}</h1></div>

Passing data from a parent component

It’s time to pass data from the parent component.

app.component.html
<div>
   <h1>Welcome to angular world</h1>
   <app-child name="Gowtham"></app-child></div>

In the above code, we are passing data to a child component by using a property name = "gowtham".

Passing dynamic values

We can also pass dynamic values to a child component by wrapping the property with [ ] square brackets.

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  myname = 'Gowtham';}
app.component.html
<div>
   <h1>Welcome to angular world</h1>
   <app-child [name]="myname"></app-child></div>

passing-dynamic-values-angular

Listening to child component events from the parent

In our case, If we want to change name, we need to emit a custom event from our child component. The parent component reacts to that custom event.

Inside our child component first, we are importing an Output decorator and EventEmitter from the @angular/core package.

child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './childcomponent.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() name: string;
  @Output() changeName = new EventEmitter();
  updateName() {
    // emitting changeName custom event    this.changeName.emit();  }
}
child.component.html
<div>
  <h1>{{name}}</h1>
  <button (click)="updateName()">Change Name</button></div>

Here we are emitting a custom event called changeName, whenever someone clicks on a button.

Inside our app component, we are listening for the changeName event and invokes the onchangeName method.

app.component.html
<div>
    <h1>Welcome to angular world</h1>
    <app-child [name]="myname" (changeName)="onchangeName()"></app-child></div>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  myname = 'Gowtham';

  onchangeName() {    this.myname = 'Angular';  }}

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY