Discussion :

[sougrinoma]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[youtpout978]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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) {}
}

[sougrinoma]

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