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...