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