Components Communications using @Input, @Output

@Input
input()
@Output

Angular Components can communicate to each other to share data like Array, Objects, String, Number, html etc.

Two or more Component can communicate to each other using services.

Parent and child component can communicate to each other using @Input or @Output. A child component is a component used inside parent component. Any component used inside app-component is its child component.

@Input

@Input decorator is used to pass data from parent to child component. It is used in child component to fetch data from parent. Create a child component named child using ng g c server .

Step by Step guide for Component Communication.

Create child component

ng g c child

             /* app.component.ts */
import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ChildComponent } from './child/child.component';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet,FormsModule,CommonModule,ChildComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  export class AppComponent{
    title = 'myApp';
    message="hello child";
  }

             /* child.component.ts */
import { Component, Input} from '@angular/core';
@Component({
      selector: 'app-child',
      standalone: true,
      imports: [],
      templateUrl: './child.component.html',
      styleUrl: './child.component.css'
})
export class childComponent{
   @Input() greet="";
}

             /* app.component.html */

<h1>{{title}}</h1>
    
<app-child [greet]="message"></app-child>

             /* child.component.html */

<p>{{message}}</p>

input signal

The input function returns a InputSignal is also used to pass data from parent to child component using Angular Signals.

Create a state in parent component

             /* app.component.ts */
  import { Component } from '@angular/core';
  import { courseComponent } from "../course/course.component";
  
  @Component({
    selector: 'app-root',
    imports: [ courseComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
  })
  export class AppComponent {
    title = 'ngApp';
    course="Angular";  
}

use input function in child component

             /* course.component.ts */
  import { Component, input } from "@angular/core";

  @Component({
      selector:'app-course',
      imports:[],
      templateUrl:'./course.component.html',
      styleUrl:'./course.component.css'
  })
  
  export class courseComponent{
      course="Mean Stack";

      topic=input("");
  
  }

pass value to child component

             /* app.component.html */
  <h1>{{title}}</h1>
    
  <app-course [topic]="course"></app-course>

use value from child component

             /* course.component.html */
  <h2>{{course}}</h2>
  <p>{{topic}}</p>

@Output

@Output decorator is used to emit event from child component to parent component. We also need to use EventEmitter for @Output.

             /* app.component.ts */
import { Component, Output } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ChildComponent } from './child/child.component';
  
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,FormsModule,CommonModule,ChildComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
  
export class AppComponent{
  title = 'myApp';
  x=0;
    
  showVal(count:number){
    console.log(count);
    this.x=count;
  }
  
}

             /* app.component.html */

<h1>{{title}}</h1>
<p>{{x}}</p>

<app-child (changeValue)="showVal($event)"></app-child>

             /* child.component.ts */
import { Component, Output, EventEmitter} from '@angular/core';
  @Component({
        selector: 'app-child',
        standalone: true,
        imports: [],
        templateUrl: './child.component.html',
        styleUrl: './child.component.css'
  })
  export class childComponent{
    @Output() changeValue=new EventEmitter<number>();
    counter=0;

     changedValue(){
      this.counter=this.counter+1;
      this.changeValue.emit(this.counter);
    }
  }

             /* child.component.html */
  
  <h2>Child Component!</h2>
  
  <button (click)="changedValue($event)">Click</button> 
  <p>{{counter}}</p>