Angular 6 multiple @input() level

Question

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 @Input()

So for example in the parent I have this :

@Input() info: Info= {} as Info;

It is initialized in ngOnInit of the parent component and the value is OK, I checked it.

In the Template I set :

[info]="info"

Each child have the same input as the parent.

The value is correclty passed to the Child1 but from the Child2 to Child3 the value stay empty, how is that ?

IS child 2 a child component of Child 1 and child 3 a chld component of child 2? — SiddAjmera
– SiddAjmera, Commented Oct 25, 2018 at 14:53
as @SiddAjmera mentioned, according to your diagram, child 2 is basically the child of child 1 and grandchild of parent.. is that correct? — reddevilzee
– reddevilzee, Commented Oct 25, 2018 at 14:54

SiddAjmera · Accepted Answer · 2018-10-25 15:12:56Z

9

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

Pass the @Input from Child 1 to Child 2 in Child 1's template.
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';
...
export class SharedService {
  private input: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  public input$: 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);
}

edited Oct 25, 2018 at 15:12

answered Oct 25, 2018 at 14:56

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 6 multiple @input() level

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related