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