pass value from element inside ngFor to Service - html

Question

I have a component which iterates through an array of areas which all have unique id's. When you click the button it opens a dialog which contains a iframe which listens to an eventlistener and retrieves data as JSON and sends it via post to a INSERT method in my ASP.NET CORE API.
I'm now also trying to send the id of the area and right now I only pass it as a paramter on the openDialog function.
planner.component.html
<div *ngFor="let area of areas">
<div class="area-container">
{{area.areaId}}
<button (click)="openDialog(area.areaId)" type="button" class="btn btn-primary btn-rounded">+</button>
</div>
</div>
planner.component.ts
The dialog opens with the iframe and right now only logs the id of the area.
openDialog(id: number) {
let dialogref = this.dialog.open(IframeComponent, {
width: '120vh'
});
console.log({areaId:id}) // like this {areaId: 20}
this.plannerService.getData(this.id);
dialogref.afterClosed().subscribe(result => {
console.log(`Dialog closed: ${result}`);
this.dialogresult = result;
})
}
in the service i have a eventListener which stores data from the iframe and sends it to my ASP.NET Core API as JSON
You can see here that I'm trying to send in an id but i don't know how to get the value from the planner.component which makes it undefined.
.planner.service.ts
getData(id: number) {
window.addEventListener("message", (e) => {
let data = JSON.parse(e.data)
console.log(data);
console.log({areaId: id})
this.createResource(data, id).subscribe(data => this.resources.push(data));
}, false);
}
data from iframe as JSON
{id: 282970, title: "page 1", description: "", thumbnail: "https://site/image/resourc…umbnail?guid=a0b67c13-ead4-49e0-a576-b4c8be1491b2", url: "https://site/l/show.html#PZWQz", …}
description: ""
guid: "a0b67c13-ead4-49e0-a576-b4c8be1491b2"
id: 282970
thumbnail: "https://site/image/resourcethumbnail?guid=a0b67c13-ead4-49e0-a576-b4c8be1491b2"
title: "page 1"
url: "https://site/l/show.html#PZWQz"
{areaId: undefined}
the question is how can a pass the value of the areaId inside the planner.component (which now only gets logged) to my service method so that i can pass it to my API?

Answer 1

In your component, you can inject your planner service and call its method
Assuming your service name is PlannerService
You component contructor would be like this:
constructor(private plannerService: PlannerService) {
}
And then in your method you can do this:
openDialog(id: number) {
let dialogref = this.dialog.open(IframeComponent, {
width: '120vh'
});
console.log({areaId:id}) // like this {areaId: 20}
this.plannerService.getData(id) <-- here id is the parameter you want to send
dialogref.afterClosed().subscribe(result => {
console.log(`Dialog closed: ${result}`);
this.dialogresult = result;
})
}