Pass data to nth level child component in Angular 4

Question

Below is my structure of components in Angular application,

• app.component.html

• units.component.html

• sectio

Answer 1

For this scenario you can use a shared service to communicate between components.

create a shared service like this.

@Injectable()
export class SharedDataService {

  public set appData(data: any) {
     this._appData = data;
  } 

  public get appData(): any {
     return this._appData;
  }
}

And then inject the SharedDataService to the app.component. And set the appData to the service.

app.component.ts

constructor(private sharedDataService: SharedDataService) {

}

public setAppData(): void {
  this.sharedDataService.appData = this.appData;
} 

And inject the SharedDataService to the app-section.component then you can get the appData from the service.

app-section.component.ts

constructor(private sharedDataService: SharedDataService) {

}

public getAppData(): void {
   this.appData = this.sharedDataService.appData;
}

Then you can access the appData in the template like this.

app-section.component.html

{{appData}}

There are various ways to communicate between components in angular. And that is called Component interaction. you can read more about this in the angular official documentation. Component Interaction