How to create a hyperlink for values from an array in Angular 8?

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: