Angular Making Inputs HyperLinks

Question

In my code, I have an input field where the user can enter some stuff. When the user enters his input and presses done, I want that input to be a hyperlink. Here is my code. What should I add to make that input a link?

HTML:

<ng-container matColumnDef="FilePath" #filePath>
                                <th mat-header-cell *matHeaderCellDef> Dosya Yolu </th>
                                <td mat-cell *matCellDef="let row; let i = index">
                                    <span *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</span>
                                    <mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p">
                                        <input matInput name="FilePath" [(ngModel)]="row.LabAnalysisFiles.FilePath" type="text">
                                    </mat-form-field>
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="Actions">
                                <th mat-header-cell *matHeaderCellDef></th>
                                <td mat-cell *matCellDef="let row; let i = index">
                                    <div *ngIf="!isClosed">
                                        <button mat-icon-button *ngIf="EditIndex != i" (click)="editRow(row, i)">
                                            <mat-icon>edit</mat-icon>
                                        </button>
                                        <button mat-icon-button *ngIf="EditIndex == i"
                                            (click)="editRow(row, undefined)">
                                            <mat-icon>done</mat-icon>
                                        </button>

                                    </div>
                                </td>
                            </ng-container>
TS:


 testList: ILabConditionResult[] = [];
    filePath: ILabAnalysisFile;
        editRow(row: ILabConditionResult, index: number) {
            if (index == undefined) {
                if (
                    !row.LabAnalysisFiles.FilePath
                ) {
                    return;
                }
                this.testList = [];
            } else {
                this.testList = [];
            }
            this.EditIndex = index;
        }

Answer 1

For a text to appear like a hyperlink, you have to use the a tag with a href attribute.

Hence, in your code, you have to change

<span *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</span>

to

<a href *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</a>

Keep in mind that if you click the link it will navigate, so if this behavior is not desired you should add:

(click)="$event.preventDefault()"