Angular: MAT_DIALOG_DATA Issue no data available in the mat dialog

Question

So when I click to the Details button at the first time no data available, if i click again in the details button the user's data is available. (photos in the bottom of this post).

TableListComponent.ts

Code:

export class TableListComponent implements OnInit {

declarations

users = [];

UsersTest = [];

userToUpdate: any;

private updateSubscription: Subscription;

isPopupOpened = true;

constructor(

private userService: UserService,

private router: Router,

private matdialog?: MatDialog

) {}

ngOnInit() {

//this.updateSubscription = interval(1000).subscribe(val => {

//this.reloadData();

// });

this.reloadData();

}

reloadData() {

this.userService

  .getUsersList()

  .pipe(map(arr => arr.filter(r => r.active == true)))

  .subscribe(result => {

    this.users = result;

  });

}

OnEdit(id: number) {

this.isPopupOpened = true;

this.userService

  .getUsersList()

  .pipe(map(arr => arr.filter(r => r.active == true)))

  .subscribe(result => {

    this.UsersTest = result;

  });

const userToUpdate = this.UsersTest.find(c => c.id === id);



const dialogRef = this.matdialog.open(UserDetailsComponent, {


  data: userToUpdate

});


dialogRef.afterClosed().subscribe(result => {

  this.isPopupOpened = false;

  this.reloadData();

});

}

'the TableListComponent.html '

<div class="main-content">


  <div class="container-fluid">

    <div class="row">

      <div class="col-md-12">

        <div class="card card-plain" data-aos="fade-right">

          <div class="card-header " style="background-color: #09c0a3;">

            <h4 class="card-title mt-0" style="color:white;">

              Tableau des Utilisateurs


            </h4>

          </div>

          <div class="card-body">

            <div class="table-responsive">

              <table class="table table-hover">

                <thead class="">

                  <th>
                    ID
                  </th>
                  <th>
                    Nom
                  </th>
                  <th>
                    Prénom
                  </th>
                  <th>
                    Email
                  </th>
                  <th>
                    Role
                  </th>
                  <th>
                    Actions
                  </th>
                </thead>
                <tbody>
                  <tr *ngFor="let u of users">
                    <td>
                      {{ u.id }}
                    </td>
                    <td>
                      {{ u.nom }}
                    </td>
                    <td>
                      {{ u.prenom }}
                    </td>
                    <td>{{ u.email }}</td>
                    <td>
                      {{ u.role }}
                    </td>
                    <td>
                      <button
                        class="btn btn-danger "
                        (click)="deleteEmployee(u.id)"
                      >
                        Supprimer
                      </button>

                      <button class="btn " (click)="OnEdit(u.id)">
                        Details
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

the 'UsersDetailsComponent.ts'

Code:

export class UserDetailsComponent implements OnInit {

declarations

public _contactForm: FormGroup;

updateSubscription: Subscription;

constructor(

private _formBuilder: FormBuilder,

private userSERVICE: UserService,

private dialogRef: MatDialogRef<UserDetailsComponent>,

@Inject(MAT_DIALOG_DATA) public data: any

) {}

ngOnInit() {

this._contactForm = this._formBuilder.group({

  id: [this.data.id],

  active: [this.data.active, [Validators.required]],

  nom: [this.data.nom, [Validators.required]],

  prenom: [this.data.prenom, [Validators.required]],

  email: [this.data.email, [Validators.required]],

  role: [this.data.role, [Validators.required]]

});

}

onSubmit() {

const MydATA = this._contactForm.value;

this.userSERVICE.updateEmployee(MydATA.id, MydATA).subscribe(data => {

  console.log(data);


  this.dialogRef.close();
});

} }

the 'UsersDetailsComponent.html'

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card" data-aos="fade-right">
          <div class="card-header ">
            <mat-icon class="pull-right" (click)="onNoClick()">cancel</mat-icon>
            <h4 class="card-title">Editer Profil</h4>
            <p class="card-category" style="color:white;">
              Editer Utilisateur
            </p>
          </div>
          <form [formGroup]="_contactForm" (submit)="onSubmit()">
            <div class="card-body">
              <div class="form-group">
                <div class="row">
                  <div class="col-md-3">
                    <mat-radio-group formControlName="active">
                      <mat-radio-button checked="true" value="true"
                        >Activer</mat-radio-button
                      >
                      <mat-radio-button value="false"
                        >Désactiver</mat-radio-button
                      >
                    </mat-radio-group>
                  </div>
                  <div class="col-md-3">
                    <mat-form-field class="example-full-width">
                      <input matInput formControlName="nom" placeholder="Nom" />
                    </mat-form-field>
                  </div>
                  <div class="col-md-4">
                    <mat-form-field class="example-full-width">
                      <input
                        matInput
                        placeholder="Prénom"
                        formControlName="prenom"
                        type="text"
                      />
                    </mat-form-field>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <mat-form-field class="example-full-width">
                      <input
                        matInput
                        formControlName="email"
                        placeholder="Adresse email"
                        type="email"
                      />
                    </mat-form-field>
                  </div>
                  <div class="col-md-4">
                    <mat-form-field class="example-full-width">
                      <input
                        matInput
                        formControlName="role"
                        placeholder="Role"
                        type="text"
                      />
                    </mat-form-field>
                  </div>
                </div>

                <button
                  mat-raised-button
                  type="submit"
                  style="background-color: #09c0a3;"
                  class="btn  pull-right"
                >
                  Modifier Profil
                </button>
                <div class="clearfix"></div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

here's the users list template , ones i click in the details button

no data available like this photo

but if i click again in the details button finally the data available

please format the post properly - its hard to understand the problem now — Maciej Wojcik

Maciej Wojcik Maciej Wojcik · Accepted Answer · 2020-03-09T13:04:33

the issue is related to two different programming types - asynchronous and synchronous. You messed up a little these two approaches.

In the onEdit method, you fetch data in an async way and then want o use it below as it is somehow synced, but it's not! You have to wait for your data and open the dialogonce the data is available. That's why on the second hit the data is inside the dialog (it's the data from previous click).

So you have to do something like that:

this.isPopupOpened = true;
this.userService
  .getUsersList()
  .pipe(
      map(arr => arr.filter(r => r.active == true))
  )
  .subscribe(users => {
    this.UsersTest = users;
    const userToUpdate = users.find(c => c.id === id);

    const dialogRef = this.matdialog.open(UserDetailsComponent, {
       data: userToUpdate
    });
  });

Angular: MAT_DIALOG_DATA Issue no data available in the mat dialog

1 Answers