Component @Input in Angular ngFor

Question

I have the following code to generate cards. Parent.component.html:

<div *ngFor="let goal of goalList" class="row col-8 my-3 offset-2">
  <div class="card" style="width: 100rem;">
    <div class="card-header">
      <div class="row">
        <app-comment class="col-1 text-left align-middle" [ID]=goal.id></app-comment>
        <div class="col-11 text-center text-center">{{'Goals.Goal'|translate}}</div>
        </div>
      </div> 
      <div class="card-body">
        <div class="row">
          <div class="col-11 card-text">{{goal.text}}</div>
        </div>
        <div class="row">
          <mat-slider thumbLabel tickInterval="1" max="5" step="0.5" class="col-10 offset-1"
          [(ngModel)]="goal.EMPrating" (ngModelChange)="SaveGoalRating(goal)" color="primary"></mat-slider>
        </div>
        <div class="row">
          <mat-form-field class="col-4 offset-4">
            <input name="ActualDate" matInput [matDatepicker]="dtpicker" placeholder="{{'Goals.ActualDate'|translate}}"
            [(ngModel)]="goal.ActualDate" (ngModelChange)="SaveGoalDate(goal)">
            <mat-datepicker-toggle matSuffix [for]="dtpicker"></mat-datepicker-toggle>
            <mat-datepicker #dtpicker></mat-datepicker>
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>

The code that gets the goalList in parent.component.ts

  LoadGoals(){
    this.goalList = [];
    let goalArray: string[] = [];
    this.goalService.GetGoalResults(this.cookieService.get('email'),this.SurveyID).subscribe(result=>{
      result.split('\n').map(row=>{
        if (row != ""){
          goalArray = row.split(';');
          let d: Date = new Date (goalArray[3]);
          this.goalList.push({id:goalArray[0],text:goalArray[1],targetDate:null,ActualDate:d, status:null,EMPrating:Number(goalArray[2])});
        }
      })
    });
  }

Goal class:

export class Goal {
    id:string;
    text:string;
    targetDate:string;
    ActualDate:Date;
    status:string;
}

comment.component.html:

<div>
  <button mat-icon-button data-toggle="modal" data-target="#CommentModal" color="primary">
    <i class="material-icons">question_answer</i>
  </button>
  <div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-labelledby="CommentTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="CommentTitle">Comments</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row mt-3">
            <textarea class="form-control col-10 offset-1" [(ngModel)]="CommentText"></textarea>
          </div>
          <div class="row my-3">
            <button class="btn btn-success oi oi-check col-2 offset-5" [disabled]="!HasComment()" (click)="SubmitComment()"></button>
          </div>
          <div class="row">
            <span class="offset-1">Here will be comments.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

comment.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
import { CommentService } from '../comment.service';

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {
  @Input() ID:string;
  private CommentText: string = "";
  constructor(private cookieService: CookieService, private commentService: CommentService) {
  }

  ngOnInit() {
  }
  SubmitComment(){
    alert(this.ID);
    //this.commentService.Submit("",this.cookieService.get('email'),this.CommentText);
  }
  HasComment():boolean{
    return this.CommentText != "";
  }
}

After inspecting the generated html, it looks good. The first app-comment contains

ng-reflect--i-d="10"

While the second has

ng-reflect--i-d="1010"

When SubmitComment() runs to alert the ID input, it always shows the ID of the first goal (10). How could I pass the ID of the card (goal.id) to the app-comment inside it?

The typescript part is fine for sure. I added

<span>{{ID}}</span>

to comment.component.html and it shows the correct ID. The problem must be around the html.

Thanks in advance!

Answer 1

after some comments the solution is giving the ID dynamically changing [attr.data-target]="'#CommentModal'+ID" and [id]="'CommentModal'+ID" Bootstrap get the first id "CommentModal" so it's why it returns always the first one.