Angular 6 Multiple @input() Level

I have a component that contain multiple level of children components : Parent | Child1 | Child2 | Child3 I'm trying to pass a value from parent to each children through @I

Solution 1:

You can't pass an @Input property to the Child of a Child Component from the ParentCompoennt. To do that, you have two ways:

1. Pass the @Input from Child 1 to Child 2 in Child 1's template.

2. Create a SharedService which will be injected as a dependency in Parent, Child1, Child2 and Child3. From the Parent, set that property and then get that property in Child1, Child2, and Child 3.

I'd recommend using the SharedService approch.

import { BehaviorSubject, Observable } from'rxjs';
...
exportclassSharedService {
  privateinput: BehaviorSubject<any> = newBehaviorSubject<any>(null);
  publicinput$: Observable<any> = this.resultList.asObservable();

  setInput(input) {
    this.input.next(input);
  }
}

And then in all the Child Components:

input: any;
...
constructor(private sharedService : SharedService ) {}
...
ngOnInit() {
  this.sharedService.input$.subscribe(input =>this.input = input);
}