Introducción:
en angular 8, podemos crear hipervínculos para todos los valores que están presentes en la array usando *ngFor.
Enfoque:
1) Primero declare e inicialice la array en el archivo .ts.
2) Luego use la directiva * ngFor para iterar a través de la array.
3) Usando esta directiva *ngFor en el archivo .html, podemos usarla según el requisito.
4) Una vez que se realiza la implementación, se sirve el proyecto.
Sintaxis:
Sintaxis para iniciar el proyecto.
ng serve --open
Implementación por código:
aplicación.componente.html:
<div *ngFor = "let item of data">
<a [attr.href]="item.url">
{{item.name}}
</a>
</div>
aplicación.componente.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"
}
]
}
Producción:
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA