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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...