Ejercicio de programación con Angular: Data binding

Código
Práctica
0h 20m

Ejercicios de programación Angular: Data Binding y enlace. Practica el enlace de datos en Angular con ejercicios que refuerzan el uso de data binding en aplicaciones web.

Dado un componente Angular con las siguientes propiedades y métodos, escribe el código HTML necesario para:

1. Interpolación: Mostrar el nombre definido en el componente.
2. Enlace de propiedad: Controlar la desactivación de un botón.
3. Enlace de evento: Cambiar el estado de una propiedad en el componente al hacer clic en el botón.
4. Enlace bidireccional: Permitir la edición de un texto que se muestra simultáneamente en otro lugar de la página.

Tarea: Escribe solamente el código HTML necesario.

Componente Angular (TypeScript):

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css']
})

export class AppComponent {
 nombre: string = 'Juan';
 deshabilitado: boolean = true;
 texto: string = 'Texto inicial';
 
 cambiarEstado() {
   this.deshabilitado = !this.deshabilitado;
 }
}
Empezar ejercicio de programación

Todos los ejercicios de programación de Angular

Evalúa tus conocimientos con ejercicios de programación en Angular de tipo Test, Puzzle, Código y Proyecto con VSCode.

Certificados de superación de Angular

Supera todos los retos de Angular y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Tutorial para resolver este ejercicio de programación

Angular

Angular

Data binding en Angular

Componentes

Otros tutoriales de programación con Angular