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

Use Angular services for sharing your common data across your components. Below are the steps to do that.

Step 1 - Create an angular service

import { Injectable, } from '@angular/core';
@Injectable()
export class CommonService {
       sharedData:any; //property for get & set
}

Step 2 - From the parent component you can set the value in to the service

import { Component, Input} from "@angular/core";
import { CommonService} from "path";

@Component({
    selector: "parent",
    templateUrl: "./ParentComponent.html",
    styleUrls: ["./style.css"],
    providers: [CommonService]
})
export class ParentComponent {

    constructor(
     private commonService: CommonService} 
    ) {

    }
    ngOnInit() {  
          this.commonService.sharedData= "Your Data"
    }

}

Step 3 - Access the value from your child component

import { Component, Input} from "@angular/core";
import { CommonService} from "path";

@Component({
    selector: "child",
    templateUrl: "./ChildComponent.html",
    styleUrls: ["./style.css"],
    providers: [CommonService]
})
export class ChildComponent {
    someProperty:any;
    constructor(
     private CommonService: CommonService} 
    ) {

    }
    ngOnInit() {  
        this.someProperty=  this.commonService.sharedData;
    }

}

Please make sure that the service are injected in to your App Module , So you can use the same in all your sub modules also.

@NgModule({
  declarations: [

  ],
  imports: [

  ],
  providers: [CommonService],
  bootstrap: [],

})
export class AppModule { }

If you want to make the service as two way binding , please go through this link

Angular 2 Service Two-Way Data Binding

Answer 2

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