title: pass value from element inside ngFor to Service
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>planner.component.html</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div *ngFor="let area of areas"&gt;
   &lt;div class="area-container"&gt;
    {{area.areaId}}
    &lt;button (click)="openDialog(area.areaId)" type="button" class="btn btn-primary btn-rounded"&gt;+&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>planner.component.ts</p>
  
  <p>The dialog opens with the iframe and right now only logs the id of the area. </p>
  
  <pre class="lang-js prettyprint-override"><code> 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 =&gt; {
        console.log(`Dialog closed: ${result}`);
        this.dialogresult = result;
      })
    }
  
  </code></pre>
  
  <p>in the service i have a eventListener which stores data from the iframe and sends it to my ASP.NET Core API as JSON</p>
  
  <p>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.</p>
  
  <p>.planner.service.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>getData(id: number) {
      window.addEventListener("message", (e) =&gt; {
        let data = JSON.parse(e.data)
        console.log(data);
        console.log({areaId: id})
        this.createResource(data, id).subscribe(data =&gt; this.resources.push(data));
        }, false);
    }
  </code></pre>
  
  <p>data from iframe as JSON</p>
  
  <pre><code>{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}
  </code></pre>
  
  <p>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?</p>