Dialog Reading an especific route on Angular

Question

I want to edit some data using dialogs, I can do it moving it to a component, it reads its data and I can edit. Since the ammount of info that I want to change is small I dind't want an entire page just for that, so I've decide to use dialogs from material.

The part that I'm struggling with is making the dialog be indentified as a route, not as simple dialog. I've done some research but the information that I've found is from old angular versions, and something must've changed that whenever I try to replicate lots of erros pop up.

Is there any document on this, or maybe angular made it simpler in any way?

For now i'm using something like this

<a mat-icon-button [routerLink]="['cadastrar', dinamica.id]">

but I've wanted to use it

<a mat-icon-button (click)="openDialog()">

and then add the routing into this:

{path:'cadastrarDinamica/cadastrar/:id', component:CadastroDinamicaComponent, canActivate: [AdminGuard] },

I've followed this video but it dind't work, some of the tools that he used just created tons of errors

https://www.youtube.com/watch?v=Sk5jOAGl20o

If you want it to be simple, why are you making it complicated? Just open the dialog and use it, why do you even need routes? — , Oct 03 '22 at 15:39
Because the dialog doesn't read the informations coming from the ids, i want it to edit based on the id, using the function openDialog, it simply opens the dialog, i want this to be attached to the id of what i'm opening...So can I pass the id as a parameter in the function openDialog? — Daniel Fabre, Oct 03 '22 at 15:53
You can pass data quite easily. https://stackoverflow.com/questions/42664974/how-to-pass-data-to-dialog-of-angular-material-2 — , Oct 03 '22 at 16:09
https://www.nerd.vision/post/how-to-pass-data-to-a-matdialog — , Oct 03 '22 at 16:10

score 0 · Answer 1 · answered Oct 03 '22 at 17:45

This is the html code for the component calling the dialog

<ng-container matColumnDef="editar">
              <th mat-header-cell *matHeaderCellDef>Editar</th>
              <td mat-cell *matCellDef="let dinamica">
                <a mat-icon-button (click)="openDialog()">
                  <mat-icon>edit</mat-icon>
                </a>
              </td>
            </ng-container>

the component.ts

openDialog(): void {
    const dialogRef = this.dialog.open(CadastroDinamicaComponent, {
      data: this.dinamica,
      width: '350px',
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

The dialog component

<form #form="ngForm" (ngSubmit)="saveDinamica()">
  <mat-form-field class="full-width" appearance="fill">
    <mat-label>Nome da Dinâmica</mat-label>
    <input matInput type="text" id="name" [(ngModel)]="dinamica.nome" required name="nome"/>
  </mat-form-field>
  <mat-form-field class="full-width" appearance="fill">
    <mat-label>Descrição da Dinâmica</mat-label>
    <textarea id="description" class="full-width" matInput [(ngModel)]="dinamica.descricao" name="descricao" required rows="3" cols="20"></textarea>
  </mat-form-field>
  <section class="buttons">
    <button mat-raised-button color="warn" label="Cancelar" class="p-button-text" mat-dialog-close>Cancelar</button>
    <button mat-raised-button color="primary" label="Salvar" class="p-button-text" (click)="saveDinamica()" mat-dialog-close>Salvar</button>
  </section>
</form>

and my constructor of the dialog:

constructor(private dinamicaService: DinamicaService,
    private messageService: MessageService, private route: ActivatedRoute,
    @Inject(MAT_DIALOG_DATA) public dinamica: Dinamica
    ) {
    this.route = route;
    this.dinamicaService = dinamicaService;
    this.dinamica = dinamica;
  }

And the thing is, in my html component as you can see the icon that opens the dialog is within a table. I'm having trouble grabing the data from the row relative to its icon. I need to read it's Id somewhere but i'm failing in discovering it

score 0 · Answer 2 · answered Oct 03 '22 at 18:25

Well, i solved the issue. I was calling it wrong.

in the end it's like this

The HTML calling the dialog:

<td mat-cell *matCellDef="let dinamica">
                <a mat-icon-button (click)="openDialog(dinamica)">
                  <mat-icon>edit</mat-icon>
                </a>
              </td>

The component ts:

openDialog(dinamica: Dinamica): void {
    const dialogRef = this.dialog.open(CadastroDinamicaComponent, {
      data: dinamica,
      width: '350px',
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

Removed the ngForm and form, wans't necessary for my problem

<form>
  <mat-form-field class="full-width" appearance="fill">
    <mat-label>Nome da Dinâmica</mat-label>
    <input matInput type="text" id="name" [(ngModel)]="dinamica.nome" required name="nome"/>
  </mat-form-field>
  <mat-form-field class="full-width" appearance="fill">
    <mat-label>Descrição da Dinâmica</mat-label>
    <textarea id="description" class="full-width" matInput [(ngModel)]="dinamica.descricao" name="descricao" required rows="3" cols="20"></textarea>
  </mat-form-field>
  <section class="buttons">
    <button mat-raised-button color="warn" label="Cancelar" class="p-button-text" mat-dialog-close>Cancelar</button>
    <button mat-raised-button color="primary" label="Salvar" class="p-button-text" (click)="saveDinamica()" mat-dialog-close>Salvar</button>
  </section>
</form>

and the injection is correct. Since I'm begining at this, sometimes I think that things are more complex then they realy are, and solutions are quite simple in the end. Need to change the way I'm looking into this stuff to improve

Dialog Reading an especific route on Angular

2 Answers2