How do I insert anchor tag dynamically in the cell of a table using typescript?

I am trying to insert a working anchor tag as a link inside the HTML table which I am creating dynamically using typescript, but when I add the anchor tag using innerHTML and append it to the cell, The table only shows the text for anchor tag and the link doesn’t work.I am attaching the screenshot of the typescript,html and the frontend.

TypeScript Function

populateList(){
let table = document.querySelector("table");
let data=["Sr.No","Exam Name","Link to Exam"];
let thead = table!.createTHead();
let row = table!.insertRow();
  for (const key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }

// var tablebody:string=``
// var output:any=[];
// var tablerow:any=[];
// var tableend=``
this.myData.forEach((currentExam:any,examNumber:any) => {
  var htmlVariable=`<a [routerLink]="['session']" [queryParams]="{id:'${currentExam.id}'}">Start Exam</a>`
  let row=table!.insertRow();
  let cell = row!.insertCell();
  let text = document.createTextNode(`${examNumber}`)
  cell.appendChild(text);
  cell=row.insertCell();
  text=document.createTextNode(`${currentExam.examName}`);
  cell.appendChild(text);
  cell=row.insertCell();
  var content=document.createElement("div");
  content.innerHTML=htmlVariable;
  cell.appendChild(content);
});

HTML Code

<html>
<head>
    <title>Student Homepage</title>
</head>
<body>
    <h1 align="center">Welcome to Student Homepage.</h1>
    <table class="center">
    </table>
    <div id="container"></div>
</body>

FrontEnd Screenshot.

How can I add a working anchor tag dynamically to the cell element of an HTML table using typescript?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You could use the following setup to dynamically build a table:

students.component.ts

@Component({
  selector: "app-students",
  templateUrl: "./students.component.html",
  styleUrls: ["./students.component.css"]
})
export class StudentsComponent {
  tableColumnLabels = ["Sr.No", "Exam Name", "Link to Exam"];

  exams = [
    { id: "1", name: "first Exam" },
    { id: "2", name: "second Exam" }
  ];
}

students.component.html

<table>
  <th *ngFor="let columnLabel of tableColumnLabels">{{ columnLabel }}</th>
  <tr *ngFor="let exam of exams; index as examNumber;">
    <td>{{ examNumber }}</td>
    <td>{{ exam.name }}</td>
    <td>
      <a [routerLink]="['session']" [queryParams]="{id: exam.id}">Start Exam</a>
    </td>
  </tr>
</table>

You can easily add more components using ng generate component MyComponent.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating