How to Pass Data From Parent To Child Components | @Input | With Source Code

How to Share data from parent component to child component using @Input directive in Angular?

Assuming that you have a parent component called AppComponent which has two child components, AllEmployeeComponent and NewEmployeeComponent.

Here is how the HTML code of the parent component app.component.html looks like:

<div class="container">
  <mat-tab-group mat-align-tabs="start" >
    <mat-tab label="New Employee" >
      <app-new-employee></app-new-employee>
    </mat-tab>
    <mat-tab label="All Employees" >
      <app-all-employee></app-all-employee>
    </mat-tab>
  </mat-tab-group>
</div>

Now if you want to pass some data from parent component to child component, you can do so by adding an attribute to the child component. For, example to pass an information in variable data to the child component, modify the code as shown:

<div class="container">
  <mat-tab-group mat-align-tabs="start" >
    <mat-tab label="New Employee" >
      <app-new-employee [users]="data"></app-new-employee>
    </mat-tab>
    <mat-tab label="All Employees" >
      <app-all-employee [users]="data"></app-all-employee>
    </mat-tab>
  </mat-tab-group>
</div>

As seen in the above code, you have passed data using attribute users.

Now to access the data in variable users in child component you need to define an users @Input directive.

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from '../service/data.service';

@Component({
  selector: 'app-all-employee',
  templateUrl: './all-employee.component.html',
  styleUrls: ['./all-employee.component.css']
})
export class AllEmployeeComponent implements OnInit {

  @Input() users : any = [];

  constructor(private service : DataService) { }

  ngOnInit(): void {
    
  }

}

Source code from this tutorial can be found at GitHub.