Dialog Reading an especific route on Angular-CodePudding

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

CodePudding user response：

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  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  appearance="fill">
    <mat-label>Descrição da Dinâmica</mat-label>
    <textarea id="description"  matInput [(ngModel)]="dinamica.descricao" name="descricao" required rows="3" cols="20"></textarea>
  </mat-form-field>
  <section >
    <button mat-raised-button color="warn" label="Cancelar"  mat-dialog-close>Cancelar</button>
    <button mat-raised-button color="primary" label="Salvar"  (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

CodePudding user response：

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  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  appearance="fill">
    <mat-label>Descrição da Dinâmica</mat-label>
    <textarea id="description"  matInput [(ngModel)]="dinamica.descricao" name="descricao" required rows="3" cols="20"></textarea>
  </mat-form-field>
  <section >
    <button mat-raised-button color="warn" label="Cancelar"  mat-dialog-close>Cancelar</button>
    <button mat-raised-button color="primary" label="Salvar"  (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