Passing data to an Angular component is a common and essential task in building dynamic and interactive web applications.

Angular provides various ways to pass data from a parent component to a child component. In this blog post, we’ll explore some of the key methods for achieving this.

1. Input Decorator

The most straightforward way to pass data to a child component is by using the @Input decorator.

Here’s how you can do it:

Step 1: Define Input Property in Child Component

In the child component (e.

g., child.component.ts), import the Input decorator from @angular/core and use it to define an input property:

import { Component, Input } from '@angular/core';

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

Step 2: Pass Data from Parent Component

In the parent component template (e.

g., parent.component.html), use the child component and bind the value to the input property:

<app-child [inputData]="parentData"></app-child>

In the parent component TypeScript file (e.

g., parent.component.ts), define the data to be passed:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  parentData = 'Data from parent component';
}

2. @ViewChild Decorator

If the child component is a direct child and not nested deeper, you can use @ViewChild to access the child component and set its properties directly.

Step 1: Reference Child Component in Parent Component

In the parent component TypeScript file (e.

g., parent.component.ts), import ViewChild and the child component class, and use @ViewChild to get a reference to the child component:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    this.childComponent.inputData = 'Data from parent component';
  }
}

Step 2: Use Data in Child Component

In the child component (e.

g., child.component.ts), define the input property as before:

import { Component, Input } from '@angular/core';

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

3. Service

Another powerful method to share data between components is by using a shared service.

The service acts as a mediator between components.

Step 1: Create a Shared Service

Create a service (e.

g., data.service.ts) and define a property to store the data:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  sharedData: string;
}

Step 2: Inject and Use the Service in Components

Inject the service into both the parent and child components and use it to share data:

In the parent component TypeScript file (e.

g., parent.component.ts):

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor(private dataService: DataService) {}

  sendDataToChild() {
    this.dataService.sharedData = 'Data from parent component';
  }
}

In the child component TypeScript file (e.

g., child.component.ts):

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

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

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.receivedData = this.dataService.sharedData;
  }
}

By following these methods, you can effectively pass data from a parent component to a child component in Angular.

Choose the method that best fits your application structure and requirements.

Similar Posts