Cómo enlazar atributos HTML en Angular [tutorial]

Cómo enlazar atributos HTML en Angular [tutorial]

En este tutorial, aprenderemos cómo enlazar dinámicamente atributos HTML en angular.

Este es nuestro código de inicio.

aplicación.componente.html

aplicación.componente.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myimg = 'https://images.unsplash.com/photo-1519058497187-7167f17c6daf';}

En el código anterior tenemos una expresión myimg y tenemos que vincular src atributo de un img elemento a myimg expresión.

Índice
  1. Atributo vinculante a una expresión
  2. Otros atributos HTML

Atributo vinculante a una expresión

En Angular, podemos vincular dinámicamente un atributo a la expresión usando [attributename] sintaxis de paréntesis.

aplicación.componente.html

<div>
    <img [src]="myimg" height="250px" /></div>



Angular-img-attribute-binding

Otros atributos HTML

También podemos vincular otros atributos HTML de la misma manera usando este [] sintaxis.

  
<button [disabled] = "isActive">Change image</button>
  
<a [href] = "url" >Google</a>

Si quieres conocer otros artículos parecidos a Cómo enlazar atributos HTML en Angular [tutorial] puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas