Angular - Trigger function for each item inside loop individually in Angular 11

I'm working on an Angular Project where, the user can upload multiple questions at a time, and after adding the questions, the list is displayed in a separate modal where the user will be able to add diagrams or figures for each question.

So, after adding the questions, the list is displayed with the help of a for loop in question.component.html file. [question-s2.component.html is the component that represents each question.]

In the next Modal where the list is displayed, there's a "ADD DIAGRAM" option, which is when clicked, triggers the file type input event to upload the image. And once the image is selected, it should call the function "addDiagEvent" (in question-s2.component.ts)

Now, the problem here is when I'm trying this with just a single question (i.e., without introducing a loop in question.component.html file) the "addDiagEvent" funtion is being called properly and rest of the feature is working fine.

But in case of multiple questions the "addDiagramEvent" function is not being called. And I want to individually add diagram (image) for each question.

Inside question.component.html file: Here, "uploadedSnips" is an array, that contains all the questions, and "questionUploaded" is a property of questions-s2.component to that displays each question in the list.

   <div class="questionModal-body">

      <app-question-s2 
        *ngFor="let question of uploadedSnips; let i = index"
        [questionUploaded]="question"
        [index]="i"
      >
      </app-question-s2>
      
   </div>

Inside question-s2.component.html file, I've this label "ADD DIAGRAM" to upload an image, which should call a function "addDiagEvent()" in question-s2.component.ts file.

  <label mat-stroked-button for="uploadInput" class="outlineStyle-btn-diag">
    &#43; ADD DIAGRAM
  </label>
  <input id="uploadInput" type="file" style="display: none" (change)="addDiagEvent($event)"/>

<!-- diagram editor -->
  <ngx-photo-editor 
    [imageChanedEvent]="DiagAddEvent"
    (imageCropped)="croppedDiagMulti($event)"
  >
  </ngx-photo-editor>

  <img [src]="base64" alt="" />

Inside question-s2.component.ts file:

    // -------- ADD Diagram Events ---------------

      addDiagEvent(event: any): void {
        this.DiagAddEvent = event;
        console.log("Trigger editor");
      }

   // ------ After the photo has been cropped -------

      croppedDiagMulti(event: CroppedEvent): void {
        console.log("AfterCropped Func");
        this.diagMulti64 = event.file;
    
        const readerDiag = new FileReader();
        readerDiag.readAsDataURL(this.diagMulti64);
    
        readerDiag.onload = () => {
          this.diagMulti =
            typeof readerDiag.result === 'string' ? readerDiag.result : '';
          this.diagMulti64Url = this.diagMulti;
        };
      }

Take a look at the UI for better Understanding:

Edit Also, is there a way to use dynamic variable names as per the index in typeScript? I want to change "diagMulti" variable in my question-s2.component.ts file to something like: diagMulti-0 for 0th index diagMulti-1 for 1st Index something like that?

1 answer

  • answered 2021-05-14 19:11 Shivam verma

    One possible reason could be the id of input tag being static in case of multi question, due to which label tag not able to apply action on expected input tag.

    May be you can try this.

    <label mat-stroked-button [attr.for]="'uploadInput-'+index" class="outlineStyle-btn-diag">
    &#43; ADD DIAGRAM</label>
    <input [id]="'uploadInput-'+index"  type="file" style="display: none" (change)="addDiagEvent($event)"/>