CODEWITHSUNDEEP
angular
Harish Kumar
Harish Kumar

Reputation: 51

How to pass a variable value from parent ngOnint() component to child component?

parentComponent.ts

childComponent.ts

I want to get the value of "user" variable value in child component.

thanks for the Help!

Upvotes: 1

Views: 5978

Answers (5)

Biplab Malakar
Biplab Malakar

Reputation: 788

You can transfer value from parent to child using 3-different way

  1. Using input in parent .html file

    <app-child [user]="user"></app-child>

    and child.ts file

    export class ChildComponent implements OnInit{
  @Input() user: SocialUser;
}

  2. Using Simple Storage storage.service.ts

    public user: String = '';

    Now import this service in the module.ts file and In parent.ts import storage service

    constructor(public storageService: StorageService){}
ngOnInit(){this.storageService.user = 'user_value';}

    In child.ts file

    constructor(public storageService: StorageService){}
ngOnInit(){console.log(this.storageService.user);}

  3. Using Observable In storage.service.ts

    public user: Subject<any> = new BehaviorSubject<any>(null);

    Now import this service in the module.ts file and In parent.ts import storage service

    constructor(public storageService: StorageService){}
ngOnInit(){this.storageService.user.next('user_value')}

    In child.ts file

    constructor(public storageService: StorageService){}

ngOnInit(){
   this.storageService.user.subscribe(user=> {if(user) console.log(user)});
}

Upvotes: 1

Rahul
Rahul

Reputation: 2128

If your parent and child or not in direct relationship - you can inject the same service in your child and get the users data like you did in your parent

If they have relationship - you can pass data to the child component selector using @Input() property

loginHandler.component.html

<app-profile-handler [childUser]="user"></app-profile-handler>

profileHandler.component.ts

export class ProfileHandlerComponent {
   @Input() childUser: SocialUser;
}

Hope this helps you - Happy coding :)

Upvotes: 0

sanjay kumar
sanjay kumar

Reputation: 858

In Angular you can pass data from parent to child component using @Input decorator.

Step1: Parent component

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit  {
  user:string;
  ngOnInit(): void {
    this.user='sanjay'
  }
 }

Step2: Child component

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-test',
  template:'<h1>{{user}}</h1>',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
   @Input() user:string;
}

Upvotes: 0

Niral Munjariya
Niral Munjariya

Reputation: 1381

You can pass user object as an @Input to the child component.

Class:

export class ChildComponent implements OnInit{

  @Input() user: SocialUser;

}

Template:

<app-child [user]="user"></app-child>

Upvotes: 1

junk
junk

Reputation: 997

Inject the parent component into the child component.

https://angular.io/guide/dependency-injection-navtree

Doc shows example clearly.

Upvotes: 0

Related Questions