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

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> 

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)}); } 

Inject the parent component into the child component.

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

Doc shows example clearly.

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; } 

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 :)