How to make a hyperlink non clickable based on certain conditions to the column of a table using 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; let idx=index">
            <span *ngIf="idx == 1 && someCondition">
                 <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>

I have provided a hyperlink to all the rows of second column i.e city. I want to make this non-clickable if "someCondition" is false. How do I that?

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

Angular2, what is the correct way to disable an anchor element?

a.disabled {
   pointer-events: none;
   cursor: not-allowed; 
}

<a [class.disabled]="!someCondition" href="your-target-url">

edited May 23 '17 at 12:32

Community

1
1

answered Feb 06 '17 at 13:30

Günter Zöchbauer

623,577
216
2,003
1,567

This is disabling all the rows of the column, not the specific row of a column – Protagonist Feb 07 '17 at 05:40
No, it's not. It's disablingbwhere `someCondition` is false. You need to refine where `someCondition` is false – Günter Zöchbauer Feb 07 '17 at 09:05

How to make a hyperlink non clickable based on certain conditions to the column of a table using Angular2

1 Answers1