Modification de données

Bonsoir tout le monde.
voici le code de ma page HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<button mat-raised-button (click)="onCreate()">
  <mat-icon>add</mat-icon>Nouveau 
</button>
 
<table class="table table-striped">
  <thead class="thead-dark">
    <tr>
      <th> Nom</th>
      <th> Prenom</th>
      <th> Fonction</th>
      <th> Sexe</th>
      <th> Adresse</th>
      <th> Telephone</th>
      <th> Date adhesion</th>
      <th> Date prise effet</th>
      <th> Date de fin</th>
      <th> Montant de la souscription</th>
      <th> Service souscrit</th>
    </tr>
  </thead> 
  <tbody>
    <tr *ngFor="let adherant of adherants">
      <td>{{adherant.nom_adherant}}</td>
      <td> {{adherant.prenom_adherant}}</td>
      <td> {{adherant.fonction_adherant}}</td>
      <td> {{adherant.sexe_adherant}}</td>
      <td> {{adherant.adresse_adherant}}</td>
      <td> {{adherant.telephone_adherant}}</td>
 
        <td> {{adherant.date_adhesion | date: 'dd/MM/yyyy'}}</td>
      <td> {{adherant.date_prise_effet| date: 'dd/MM/yyyy'}}</td>
      <td> {{adherant.date_fin | date: 'dd/MM/yyyy'}}</td>
      <td> {{adherant.montant_souscription}}</td>
      <td> {{adherant.service_souscrit}}</td> 
      <td> <button mat-icon-button ><mat-icon>launch</mat-icon></button> </td> 
    </tr>
  </tbody>
</table>

quand on clique sur le bouton nouveau un formulaire s'affiche me permettant de saisir des données.
Je voudrais que lorsque je clique sur l'image launch pour modifier ,que le même formulaire s'affiche avec les données de la concernée pour la modification.
voici le code de mon composant .ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, OnInit } from '@angular/core';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {EcransaisieService} from '../../shared/ecransaisie.service';
import {MatDialog,MatDialogConfig} from '@angular/material/dialog';
import { Ecransaisie1Component } from '../ecransaisie1.component';
import { Ecransaisie2Component } from '../ecransaisie2/ecransaisie2.component';
import {animate, state, style, transition, trigger} from '@angular/animations';
import { Adherant } from '../adherant';
import {AdherantService} from '../adherant.service';
import * as _ from 'lodash';
 
@Component({
  selector: 'app-ecransaisie2-list',
  templateUrl: './ecransaisie2-list.component.html',
  styleUrls: ['./ecransaisie2-list.component.css']
})
 
export class Ecransaisie2ListComponent implements OnInit {
  constructor(private dialog:MatDialog,private adherantService:AdherantService,public service:EcransaisieService) { }
 
  ngOnInit()
  onCreate(){
    const dialogConfig=new MatDialogConfig();
    dialogConfig.disableClose=true;
    dialogConfig.autoFocus=true;
    dialogConfig.width="50%";
    this.dialog.open(Ecransaisie2Component,dialogConfig);
  }
 
}

merci d'avance pour les suggestions

Code:

1
2
3
4
5
6
...
<td> <button mat-icon-button (click)="onLaunch()"><mat-icon>launch</mat-icon></button> </td>
...
<div *ngIf="displayEdit">
    ici, le formulaire d'édition
</div>

Code:

1
2
3
4
5
6
7
...
displayEdit = false;
...
...
onLaunch() {
   this.displayEdit = !this.displayEdit ;
}

Tu peux passer des paramètres à ta matdialog
https://material.angular.io/components/dialog/examples

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import {Component, Inject} from '@angular/core';
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
export interface DialogData {
  animal: 'panda' | 'unicorn' | 'lion';
}
 
/**
 * @title Injecting data when opening a dialog
 */
@Component({
  selector: 'dialog-data-example',
  templateUrl: 'dialog-data-example.html',
})
export class DialogDataExample {
  constructor(public dialog: MatDialog) {}
 
  openDialog() {
    this.dialog.open(DialogDataExampleDialog, {
      data: {
        animal: 'panda'
      }
    });
  }
}
 
@Component({
  selector: 'dialog-data-example-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

Merci bien.
finalement j'ai utilisé deux formulaires l'une pour l'ajout et l'autre pour la modification