Comment acheminer vers la page suivante lorsque l'utilisateur clique sur le nom du projet

J'ai un écran de sélection de projet où un utilisateur clique sur la case à cocher correspondant à un projet et une notification contextuelle s'affiche pour confirmer si un utilisateur souhaite poursuivre le projet. Maintenant, je veux réorganiser la case à cocher et créer un nom de projet pouvant être lié de telle sorte qu'un utilisateur clique sur le nom du projet et qu'il puisse passer à la page suivante.

Ceci est mon code HTML.

<div class="main-content">
<div class="container-fluid">
    <div class="row">
        <div class="card">
            <div class="card-header">
                <h5 class="title">Projects</h5></div>
            <mat-toolbar> <span>Project List </span> </mat-toolbar>
            <div>
                <div class="form">
                    <mat-form-field floatPlaceholder="never" color="accent">
                        <input matInput #filter placeholder="Search Project" />
                    </mat-form-field>
                </div>
                <div class="loader" *ngIf="isLoadingResults">
                    <svg class="circular" viewBox="25 25 50 50">
                        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="1.5" stroke-miterlimit="10" />
                    </svg>
                </div>
                <div class="row">
                    <div class="col-md-offset-10 text-left">
                        <button mat-icon-button color="primary" matTooltip="Create New Project" (click)="addNew()">
                            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
                        </button>
                    </div>
                </div>
                <mat-table #table [dataSource]="dataSource" matSort class="mat-cell">
                    <!--
                        - Note that these columns can be defined in any order.
                        The actual rendered columns are set as a property on the row definition"
                    -->

                    <!-- ID Column -->

                    <ng-container matColumnDef="id">
                        <mat-header-cell *matHeaderCellDef>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let row">
                             <mat-checkbox
                                (click)="$event.stopPropagation()"
                                [checked]="row.selected"
                                (change)="isSelected(row, $event)"
                            >
                            </mat-checkbox> 
                        </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="name">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
                        <mat-cell *matCellDef="let row">
                            {{ row.projectName }}</mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="displayName">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Display Name</mat-header-cell>
                        <mat-cell *matCellDef="let row">
                            {{ row.projectDisplayName }}</mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="description">
                        <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
                        <mat-cell *matCellDef="let row">
                            {{ row.projectDescription }}</mat-cell>
                    </ng-container>

                    <!-- actions -->
                    <ng-container matColumnDef="actions">
                        <mat-header-cell *matHeaderCellDef>
                        </mat-header-cell>

                        <mat-cell *matCellDef="let row; let i = index">
                            <button mat-icon-button color="accent" matTooltip="Edit" (click)="startEdit(row)">
                                <mat-icon aria-label="Edit">edit</mat-icon>
                            </button>

                            <button mat-icon-button color="#b71c1c" matTooltip="Delete" (click)="deleteItem(row)">
                                <mat-icon aria-label="Delete">delete</mat-icon>
                            </button>
                        </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
                </mat-table>

                <mat-paginator #paginator [length]="dataSource" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
                </mat-paginator>
            </div>
        </div>
    </div>
</div>

Ceci est mon code TypeScript avec RouterLink

    isSelected(row, $event) {
    if ($event.checked === true) {
        const dialogRef = this.dialog.open(ConfirmDialogComponent, {});
        dialogRef.afterClosed().subscribe(result => {
            if (result === true) {
                this.dataService.setObject('project', JSON.stringify(row));
                this.globalAppSateService.onMessage(row);
                 this.router.navigate(['/metadata']);
            }
        });
        this.columnList.forEach(column => {
            if (row.projectName === column.projectName) {
                column.selected = true;
            } else {
                column.selected = false;
            }
        });
        this.dataSource = new MatTableDataSource<any>(this.columnList);

        this.dataSource
            .connect()
            .subscribe(list => this.columnListChange.emit(list));
        this.dataSource.sort = this.sort;
    }
}