<h1 style="color: blue">TEMPLATE ACTIF</h1>
 
<div style="color: red; font-size: 40px; background: yellow;">
  MESSAGE = "{{ message }}"
</div>

  ngOnInit(): void {
 
    this.chargement = 'KO';
      this.agentService.getFicheAgentData().subscribe((data: any) => {
        this.chargement = 'OK';
        this.agent = data;
 
      });
  }

<button class="list-group-item list-group-item-action"
        (click)="changerSection()">
  <i class="bi bi-file-earmark-text me-2"></i>
  Changer section
</button>

<form class="formAddNewresimRequest" name="FormTest" [formGroup]="addNewResimRequestForm" (ngSubmit)="handleSubmiAddNewResimRequest(addNewResimRequestForm.value.duplicate)">
 
... blablabla
 
<div class="divInputInRaw" style="width: 60%">
     <span class="spanText">Browse clips file : <i>(only .csv format accepted)</i> : </span>
     <input class="inputText" formControlName="listClipsToResimulate" type="file" accept=".csv" />
</div>
 
 <button type="submit" class="buttonSubmitForm" [disabled]="!addNewResimRequestForm.valid">          
                <div class="titleWithIcon">
                    <span class="spanButtonSubmit">Create resim request</span>
                    <span class="material-symbols-outlined" id="iconButtonSubmit">arrow_circle_right</span>
                </div>
 </button>
</form>

export class FormAddNewResimRequest {
 
  addNewResimRequestForm = new FormGroup ({
 
    //... blabla
    listClipsToResimulate: new FormControl(),
 
  });
 
  handleSubmiAddNewResimRequest(duplicate: any) {
    for (let i = 0; i < duplicate; i++ ) {
      this.resimRequestService.addNewResimRequest(this.addNewResimRequestForm.value);
    }
  }
}

addNewResimRequest(newResimRequest: any) {
 
    this.http.post<ResimRequestInfo[]>(this.url, newResimRequest).subscribe(
      data => {
        console.log('Updated resim request:', data);
      }
    );
  }

 
<app-work-form
        [isEditForm]="isWorkEditForm"
        [selectedWork]="selectedWork"
        (addWork)="addWork($event)"
        (doClose)="onCancel()">
</app-work-form>

 
@Component({
  selector: 'app-work-dialog',
  templateUrl: './work-dialog.component.html',
  styleUrls: ['./work-dialog.component.scss'],
})
export class WorkDialogComponent {
 
  readonly dialogRef = inject(MatDialogRef<WorkDialogComponent>);
  readonly data = inject<EeWork>(MAT_DIALOG_DATA);
  readonly work = model(this.data);
 
  isWorkEditForm : boolean = false;
  selectedWork : EditableEeWork = new EditableEeWork();
 
  constructor() {}
 
  addWork(eeWork: EeWork) {
    console.log('entreprise ajoutée : ', eeWork);
    this.dialogRef.close(eeWork);
  }
  onCancel() {
    this.dialogRef.close();
  }
 
  @HostListener('document:keyup.escape') onClose() {
    this.onCancel();
  }
 
}

 
    openAddForm() {
        const dialogRef = this.dialog.open(WorkDialogComponent, {
            data: this.selectedWork,
        });
        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed', result);
            if (result !== undefined) {
                console.log('EE = ');
            }
 
        });
    }

search(route: string, PieceFilterCriteria) : Observable<any[]> {   
    return this.http.get<[any, any[]]>(`${this.createCompleteRoute(this.baseUrl, route)}`).pipe(
      map((response: any) => {
 
        console.log('PieceFilterCriteria');
        console.log(PieceFilterCriteria);
 
        const result = response.filter(x =>
          Object.keys(PieceFilterCriteria).every(key => x[key].toString().toLowerCase().indexOf(PieceFilterCriteria[key].toString().toLowerCase()) >=0)
        );
        console.log('result of response based on PieceFilterCriteria');
        console.log(result);
 
        response = [...result]; 
        console.log('response');
        console.log(response);
 
        return response;        
      })
    );   
  }