Hello I have a ponent that outputs links correctly with appropriate href url location (notice [routerLink]="card.id", http://localhost:4200/dashboard/my-cards/DmJHJJA1e77fEEImKBju):

        <a
            *ngFor="let card of cards; let i = index"
            class="list-group-item list-group-item-action d-flex flex-row align-items-start justify-content-between"
            [routerLink]="card.id"
            routerLinkActive="active"
        >
            <div class="d-flex flex-column card-info-container">
                <h4 class="list-group-item-heading">{{card.name}}</h4>
                <p class="mb-1">{{card.description}}</p>
            </div>
            <img [src]="card.imagePath" alt="" class="img-responsive" style="max-width: 50px;">
        </a>

I have another route set up like this:

{
    path: ':id/edit',
    ponent: CardEditComponent,
    canActivate: [AuthGuardService]
}

So what I am trying to do is in the ponent tag above is link directly to this route/ponent. I changed the [routerLink] syntax to what you see below and got this url http://localhost:4200/dashboard/my-cards/NaN

[routerLink]="card.id/edit"

It's clear that I cannot update the routerLink as I did - is this possible at all to do via syntax in the template only? Or must I have an onclick event to redirect as needed?

Hello I have a ponent that outputs links correctly with appropriate href url location (notice [routerLink]="card.id", http://localhost:4200/dashboard/my-cards/DmJHJJA1e77fEEImKBju):

        <a
            *ngFor="let card of cards; let i = index"
            class="list-group-item list-group-item-action d-flex flex-row align-items-start justify-content-between"
            [routerLink]="card.id"
            routerLinkActive="active"
        >
            <div class="d-flex flex-column card-info-container">
                <h4 class="list-group-item-heading">{{card.name}}</h4>
                <p class="mb-1">{{card.description}}</p>
            </div>
            <img [src]="card.imagePath" alt="" class="img-responsive" style="max-width: 50px;">
        </a>

I have another route set up like this:

{
    path: ':id/edit',
    ponent: CardEditComponent,
    canActivate: [AuthGuardService]
}

So what I am trying to do is in the ponent tag above is link directly to this route/ponent. I changed the [routerLink] syntax to what you see below and got this url http://localhost:4200/dashboard/my-cards/NaN

[routerLink]="card.id/edit"

It's clear that I cannot update the routerLink as I did - is this possible at all to do via syntax in the template only? Or must I have an onclick event to redirect as needed?

• javascript
• angular
• typescript
• frontend
• google-cloud-firestore

3 Answers 3

try routerLink = "{{card.id}}/edit"

You can set your routerLink as follows

[routerLink]="[card.id, 'edit']"

If you are passing route parameters then you need to have the route name first and then the params as ['routeName', parameter..]

But here since the route name itself includes the parameter, you need to concatenate both and use it as string.

[routerLink] = [ {{card. Id}} + '/edit']