Skip to content
Related Articles

Related Articles

How to create a hyperlink for values from an array in Angular 8?
  • Last Updated : 11 Sep, 2020

Introduction:
In angular 8, we can create hyperlinks for all the values that are present in the array using *ngFor.

Approach:
1) First declare and initialize array in .ts file.
2) Then use *ngFor directive for iterating through the array.
3) Using this *ngFor directive in .html file, we can use it as per the requirement.
4) Once the implementation is done then the serve the project.

Syntax:
Syntax for starting the project.

ng serve --open

Implementation by code:

app.component.html:
 






<div *ngFor = "let item of data"
  <a [attr.href]="item.url">
   {{item.name}}
  </a>
</div>

app.component.ts:
 




import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ 
  `a{
     text-decoration: none;
     color:black;
     cursor: pointer
     }
  `
  ]
})
export class AppComponent  {
  
  data=[
    {
      name:"GeeksForGeeks",
      url:"www.geeksforgeeks.org"
    },
    {
      name:"Google",
      url:"www.google.com"
    },
    {
      name:"HackerRank",
      url:"www.hackerrank.com"
    }
  ]
  
  
}

Output:
 

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :