Accessing parent variables from child components in Angular can be accomplished by utilizing input

Question

Accessing parent variables from child components in Angular can be accomplished by utilizing input

I am working with four components and I have a need to pass data from a parent component to a child component. The structure defined within the map.html template is as follows:

<map-builder [width]="width">
    <layer [name]="'markerLayer'">        
        <marker [lat]="8.5" [lng]="55.5"></marker>
        <marker [lat]="54" [lng]="8.5"></marker>
    </layer>
    <layer [name]="'heatmapLayer'">
        <heatmap></heatmap>
    </layer>
</map-builder>

Within the LayerComponent, I have initialized variables named layer and source. In the ngOnInit() function, I have set values to both of these variables. However, I am facing challenges in accessing these values within the nested components (Marker and Heatmap). I attempted to inject the LayerComponent in the constructor(), but unfortunately, I am unable to access its variables.

Your guidance on this matter would be greatly appreciated!

javascript angular typescript parent

Answer 1

Answer №1

implement the Input Decorator and ensure that the properties layer and source are made public within the LayerComponent:

export class MarkerComponent implements OnInit {
    @Input() layer;
    @Input() source;
}

export class HeatMapComponent implements OnInit {
    @Input() layer;
    @Input() source;
}

html :

<map-builder [width]="width">
<layer #lyr [name]="'markerLayer'">        
    <marker [layer]="lyr.layer" [scoure]="lyr.source" [lat]="8.5" [lng]="55.5"></marker>
    <marker [layer]="lyr.layer" [scoure]="lyr.source" [lat]="54" [lng]="8.5"></marker>
</layer>
<layer #lyr2 [name]="'heatmapLayer'">
    <heatmap [layer]="lyr2.layer" [scoure]="lyr2.source" ></heatmap>
</layer>
</map-builder>

Alternatively, inject the parent into the child's constructor:

export class HeatMapComponent implements OnInit {
  constructor(private layer : LayerComponent){}

 ngOnInit(){
    //this.layer.source
    //this.layer.layer
   this.layer.onDataChange.subscribe((data)=>{
     console.log(data.layer,data.source)
   })
 }

within your layer Component

export class LayerComponent implements OnInit {
layer: any;
source: any;
@Output() onDataChange: EventEmitter<any> = new EventEmitter<any>();

someMethod() {
    // when you change the value emit them 
    this.layer = someValue;
    this.source = someValue;

    this.onDataChange.emit({ layer: this.layer, source: this.source })
}

the reason for receiving undefined values is due to attempting to access them prior to initialization

Check out the Demo

Answer 2

implement the Input Decorator and ensure that the properties layer and source are made public within the LayerComponent:

export class MarkerComponent implements OnInit {
    @Input() layer;
    @Input() source;
}

export class HeatMapComponent implements OnInit {
    @Input() layer;
    @Input() source;
}

html :

<map-builder [width]="width">
<layer #lyr [name]="'markerLayer'">        
    <marker [layer]="lyr.layer" [scoure]="lyr.source" [lat]="8.5" [lng]="55.5"></marker>
    <marker [layer]="lyr.layer" [scoure]="lyr.source" [lat]="54" [lng]="8.5"></marker>
</layer>
<layer #lyr2 [name]="'heatmapLayer'">
    <heatmap [layer]="lyr2.layer" [scoure]="lyr2.source" ></heatmap>
</layer>
</map-builder>

Alternatively, inject the parent into the child's constructor:

export class HeatMapComponent implements OnInit {
  constructor(private layer : LayerComponent){}

 ngOnInit(){
    //this.layer.source
    //this.layer.layer
   this.layer.onDataChange.subscribe((data)=>{
     console.log(data.layer,data.source)
   })
 }

within your layer Component

export class LayerComponent implements OnInit {
layer: any;
source: any;
@Output() onDataChange: EventEmitter<any> = new EventEmitter<any>();

someMethod() {
    // when you change the value emit them 
    this.layer = someValue;
    this.source = someValue;

    this.onDataChange.emit({ layer: this.layer, source: this.source })
}

the reason for receiving undefined values is due to attempting to access them prior to initialization

Check out the Demo

Accessing parent variables from child components in Angular can be accomplished by utilizing input

Answer №1

Similar questions

What could be the reason for document.body.style.backgroundColor not working properly?

Set up the user django with standard configuration values

Guide on setting a client-side cookie in NextJS 14

Converting a UUID from a string to an integer in JavaScript

What is the best way to reset react-id-swiper every time an event handler is triggered in a React application?

There seems to be an issue with executing an imported function from a .ts file within a TSX file in NextJs, resulting

navigating through a JSON object containing various nested elements using JavaScript

What could be causing the vue-property-decorator @Emit to malfunction in my Vue TypeScript file?

The type is lacking the property onAuxClickCapture and onAuxClick

Searching with Neo4j, Java and the Angular library for accurate

Retrieve data from one array using information from another array. Alternatively, merging the arrays could also be a solution

Arrange JSON objects within an array based on the values of three specific fields

Navigating rows in a Kendo Grid using buttons (Starting, Previous, Next, Ending)

Conceal the <p> tag if the content inside is either "0" or blank

A guide on transferring radio button values to another program and saving them into a database with the help of PHP and jQuery

Mastering the art of utilizing Angular Material's custom-palette colors for maximum impact. Unle

What are the steps to achieve full screen mode in Google Chrome within an Angular 4 Application?

DiscordJS: updating specific segment of JSON object

Utilize a selector within a component to transfer content using content projection in Angular version 12 and above

Enhancing JavaScript smooth scroll functionality