How to pass data to two level, three level down in Angular component, what's the best way to do it without props drilling?

I am new to Angular, I know we can pass data from top hierarchy to lower one. Like in React we can use Context or Redux to avoid props drilling. Do we have something similar in Angular also ?

Yes I did try @Input Event emitter But I don't think it would be better If we have to provide data to 4 level down component.

You can use service.

// Service
@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private data$ = new BehaviorSubject<DataInterface>(null); 
  get getData(): Observable<DataInterface> {
    return this.data$.asObservable();
  } 
  set setData(value: DataInterface): void {
    this.data$.next(value);
  }
}

// Component One
export class OneComponent implements OnInit {
  constructor(private sharedService: SharedService) {}
  ngOnInit(): void {
    this.sharedService.setData(value); // data you need to share
  }
}

// Component Four
export class FourComponent implements OnInit {
  constructor(private sharedService: SharedService) {}
  ngOnInit(): void {
    this.sharedService.getData.subscribe(data => /*handle shared data*/); 
  }
}

Of course the better way is to use async pipe instead subscription. But now you have direction.

In Angular, you can use services to pass data between components without resorting to prop drilling. You can use services that act as a centralized location for sharing data and functionality across components.

//my-service.ts

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

@Injectable({
    providedIn: 'root'
})
export class MyService {
    private myData: any;

    constructor() {}

    updateData(data: any) {
        this.myData = data;
    }

    getData() {
        return this.myData;
    }
}

You have to provide the service to the root module, In order to use it in your application.

// app.module.ts
import { NgModule } from '@angular/core';
import { MyService } from './my-service';

@NgModule ({
    providers: [MyService]
})
export class AppModule { }

Now You can use the service in the component but before that, you have to inject the service into the component using the component constructor.

import { Component } from '@angular/core';
import { MyService } from './my-service';

@Component({
    selector: 'app-parent-component',
    template: `<app-child-component></app-child-component>`
})

export class ParentComponent {
    constructor (private _myService: MyService) {}

    setData() {
        this._myService.updateData("whatever the data you want to update here!!")
    }

}

Now You can access the data in your ChildProcess, grandChild, or even in the sibling component.

export class GrandchildCompoent {
    myData: any;

    // Same here, you have to inject the service to the component using the component constructor.
    constructor (private _myService: MyService) {}

    getData() {
        this.myData = this._myService.getData()
    }

}