How to add hyperlink to the column of a table using *ngFor in Angular2

Question

I have a table with 4 columns-Name, id, Dept, City and I'm providing both row data and column data as an array from a typescript file and iterating through *ngFor. Here is my piece of code

<tbody>
   <tr *ngFor=let rowData of data | orderBy:convertSorting()>
       <td *ngFor=let column of columns>
            {{rowData[column.columnValue] | format:column.filter}}
       </td>
   </tr>
</tbody>

I want to provide a hyperlink to all the rows of second column i.e city so that if I click that, it should navigate to a new page to display detailed info. How do I achieve it using *ngFor?

score 5 · Accepted Answer · answered Feb 03 '17 at 18:45

5

<tbody>
   <tr *ngFor="let rowData of data | orderBy:convertSorting()">
       <td *ngFor="let column of columns; let idx=index">
            <span *ngIf="idx == 1">
                 <a href="your-target-url">{{rowData[column.columnValue] | format:column.filter}}</a>
            </span>
            <span *ngIf="idx != 1">
                {{rowData[column.columnValue] | format:column.filter}}
            </span>
       </td>
   </tr>
</tbody>

answered Feb 03 '17 at 18:45

chrispy

3,552
1
11
19

Thanks for your answer. How do I disable the hyperlink on a certain condition? i.e. . Here showLink is a boolean value and if it is false, id should be displayed but without hyperlink – Protagonist Feb 05 '17 at 06:41
define showLink in your component, then you can use it that way in your view :). – chrispy Feb 06 '17 at 15:05
I've defined it in my component and it's value changes true/false accordingly and if it's false, I wanna make the hyperlink unclickable. How do I do that? – Protagonist Feb 06 '17 at 16:05
http://stackoverflow.com/questions/28318057/html-how-to-disable-a-href -- use the CSS there to make it unclickable, then dynamically apply the class to the link using ngClass and your showLink https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html – chrispy Feb 06 '17 at 16:07

score 0 · Answer 2 · answered Feb 03 '17 at 18:51

Might be easier to add via TypeScript:

<tbody>
   <tr *ngFor=let rowData of data | orderBy:convertSorting()>
       <td *ngFor=let column of columns>
            {{rowData[column.columnValue] | format:column.filter}}
       </td>
    <td (click)="LinktoCity(column.city)">{{city}}</td>

   </tr>
</tbody>

TypeScript

LinktoCity(city: string){        
        let mainLink = "www..."
        window.open(mainLink+city);
    }

How to add hyperlink to the column of a table using *ngFor in Angular2

2 Answers2