How to add hyperlink in the row's cell of ag-Grid.

Hello folks, Welcome back to an another tutorial of ag-Grid. Today, We will learn, How to create an hyperlink in cell of ag-Grid.

Prerequisites: 

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Set up of angular environment.
• Created Table in ag-Grid.

Here i am working on Angular10 Application.

Now follow the below steps to do:

Step 1: Add cellRenderer property in columnDefs of ag-Grid.

columnDefs = [

    { headerName: 'Name', field: 'Name', cellRenderer: this.createHyperLink.bind(this), },

    { headerName: 'Code', field: 'Code' },

    { headerName: 'Ex Rate', field: 'ExchangeRate' }

  ];

Step 2: Add Router service in constructor.

Router service is used to navigate from one page to another page in angular. But if you are not using angular then you can skip this step.

private router: Router,

Step 3: Now copy the below code to create an hyperlink in cell.

 createHyperLink(params): any {

    if (!params.data) { return; }

    const spanElement = document.createElement('span');

    spanElement.innerHTML = `<a href="${this.homeUrl}" > ${params.value} </a> `;

    spanElement.addEventListener('click', ($event) => {

      $event.preventDefault();

      // The below code is used to navigate from one page to another page in angular. you can change it          // according to your requirement.

      this.router.navigate([this.homeUrl]);

    });

    return spanElement;

  }

  get homeUrl(): string {

    return 'home';

  }

Note: params.data has the data of the row. And params.value has the value of the cell.

Now run the application and then check...

Hope it's helps you to learn about it.

Keep learning , Keep Growing, Keep sharing !!!