Btukfyl

lets assume I got a parent component which interacts with its child component like:

If this is the case, I can pass some data to the child using the following syntax:

parent.component.ts

// imports..      

selector: "app-parent",

templateURL: "./parent.component.html",

// ...

export class ParentComponent{

public statement= "I am your father"!;

}

parent.component.html

<div>

 <h1>

   My name is Darth Vader

 </h1>

</div>    

<app-child [luke] = "statement"></app-child> // child selector!

child.component.ts

// imports..      

selector: "app-child",

templateURL: `<h2>{{"Luke, " + luke}}</h2>`

// ...

export class TestComponent{

@Input() public luke;

}

The result should be:

Luke, I am your father!

Nothing special this far.

Now what if my child component contains another child and therefore acts as its parent?

child.component.html

<app-secondChild></app-secondChild> // selector of second.child.component.ts!

second.child.component.html

<app-thirdChild></app-thirdChild> // selector of third.child.component.ts!

third.child.component.html

<app-fourthChild></app-fourthChild> // selector of fourth.child.component.ts!

Basically, I want to pass data from the parent to the last child in order to activate some HTML-code.

I hope this wasn't explained too complicatedly.

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

   
   

This solution may solve your problem.

You could pass the data from parent to child using an input parameter until the last child get it. If the components in the middle will not require this data you could take other approach. I have a couple of options:

1. You could use a Service Class with a property that holds the data that must be shared.




2. You could use other patterns that work with a shared data store, you may want to take a look at Redux and ngrx store: https://github.com/ngrx/store