What is the best way to add a hyperlink to a cell in an Angular Grid column

Question

What is the best way to add a hyperlink to a cell in an Angular Grid column

I need help creating a link for a column cell in my angular grid with a dynamic job id, like /jobs/3/job-maintenance/general. In this case, 3 is the job id. I have element.jobId available. How can I achieve this?

Here is the code for the existing column:

<ng-container cdkColumnDef="jobName">
   <th cdk-header-cell *cdkHeaderCellDef>
      <span class="cursor-pointer" (click)="doSort('jobName')">Job Name</span>
      <span *ngIf="sortKey === 'jobName'"> {{ sortDirection === 'asc' ? '↑' : '↓' }} 
      </span>
   </th>
   <td cdk-cell *cdkCellDef="let element">
      <u *ngIf="!hasContainedName(element.jobName); else contain"
         class="text-primary cursor-pointer">{{element.jobName}}</u>
      <ng-template #contain>{{element.jobName}}</ng-template>
   </td>
</ng-container>

javascript angular typescript hyperlink angular-ui-router

Answer 1

Answer №1

Appreciate all the feedback and assistance. Here is the solution that worked perfectly for me.

<ng-container cdkColumnDef="jobName">
                <th cdk-header-cell *cdkHeaderCellDef>
                  <span class="cursor-pointer" (click)="doSort('jobName')">Job Name</span>
                  <span *ngIf="sortKey === 'jobName'"> {{ sortDirection === 'asc' ? '↑' : '↓' }}</span>
                </th>
                <td cdk-cell *cdkCellDef="let element">
                  <u *ngIf="!hasContainedName(element.jobName); else contain"
                     class="text-primary cursor-pointer"><a href="/#/jobs/{{element.jobId}}/job-maintenance/general">{{element.jobName}}</a></u>
                   <ng-template #contain >{{element.jobName}}</ng-template>
                </td>
              </ng-container>

Answer 2

Appreciate all the feedback and assistance. Here is the solution that worked perfectly for me.

<ng-container cdkColumnDef="jobName">
                <th cdk-header-cell *cdkHeaderCellDef>
                  <span class="cursor-pointer" (click)="doSort('jobName')">Job Name</span>
                  <span *ngIf="sortKey === 'jobName'"> {{ sortDirection === 'asc' ? '↑' : '↓' }}</span>
                </th>
                <td cdk-cell *cdkCellDef="let element">
                  <u *ngIf="!hasContainedName(element.jobName); else contain"
                     class="text-primary cursor-pointer"><a href="/#/jobs/{{element.jobId}}/job-maintenance/general">{{element.jobName}}</a></u>
                   <ng-template #contain >{{element.jobName}}</ng-template>
                </td>
              </ng-container>

What is the best way to add a hyperlink to a cell in an Angular Grid column

Answer №1

Similar questions

What is the best way to track and display the window.scrollY value in the console using Next.js

Embedding a file in a word document with a hyperlink

Sending JavaScript array to PHP server-side script

Locate the class ID and refine the search results by another class

Choose from a variety of video play options

Strategies for Effectively Managing Null Checks in Your JavaScript Project

Syntax error triggered and caught by ajaxError

Guide to sending back an Observable within Angular 4

It appears that the ngOnInit function is being activated prior to receiving any data through the Input()

The reason why Express is not directing to the static React build files is due to the absence of a specific URL slug

Display the number of items that have been filtered as soon as the Mixitup page loads

What is the method for writing the following line in CSHTML server-side code?

What is limiting me from utilizing the entire Google Calendar feed?

Create a new modal design by keeping the structure but updating the text and images for

Adjusting icons based on the length of the text

Dealing with JWT management in the absence of Cookies

Leveraging material elements in React applications

Retrieving Twitter posts using the screen_name parameter in a Node.js environment

Using regular expressions to replace text within brackets that have the same type of bracket in between

Adding an item to a collection using NgRx