Below is my structure of components in Angular application,
app.component.html
units.component.html
section.component.html
{{appData.title}}
I'm creating "appData" in the app.component.ts and I want to use that in the third level of child component i.e. in the app-section component.
How I can achieve this?
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
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
@Input,@ViewChild, or shares services?@Input()across each child, till you reach nth level. But this is not way of good programming. Because you have to pipe your data unnecessarily in each childcomponent. Instead you may consider usingshared serviceto do this.