Add link to Angular material DataTable

Question

I'm working in Angular Material Data Table, and I want to add Edit link to each row of table, so I do:

  <ng-container matColumnDef="action">
            <mat-header-cell *matHeaderCellDef>
              Action
            </mat-header-cell>
            <mat-cell *matCellDef="let user">
              <a href="#/categorias/usuarios/detalle/' +
                 {{user.id}} +
                  '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">
                <i class="fa fa-edit"></i>
              </a>
            </mat-cell>
          </ng-container>

But it just no work, first it is not a link, chrome debugger throw it as:

<a class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" ng-reflect-href="#/categorias/usuarios/detalle/">
                <i class="fa fa-edit"></i>
              </a>

What am I doing wrong? why is not href link, and why isn't have id of row? Regards

Answer 1

This will work

<a href="#/categorias/usuarios/detalle/{{user.id}}" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">

Also check if user.id is set. It will give similar output if user.id is undefined or null or empty string. My examples covers 2 of those.

https://stackblitz.com/edit/angular-ko8uwa