Introducci贸n a Angular y Fundamentos

1

Creando tu primer proyecto en Angular

2

Implementando estilos

3

Mostrando elementos

4

Property Binding en Angular

5

Event Binding: click y doble click

6

Event binding: keydown

7

Modelo de reactividad con Signals

8

Creando un Signal en Angular

Estructuras de control en Angular

9

Directivas de control

10

Uso de ngFor

11

ngFor para objetos

12

Update Tasks

13

Uso de ngIf

14

Uso de ngSwitch y ngSwitchDefault

15

Controlando un input

16

Manejo de formularios en Angular

Alistando tu aplicaci贸n para producci贸n

17

Estilos al modo Angular

18

Clases en Angular

19

Editing mode

20

Estados compuestos con computed

21

Usando effect para localStorage

22

Uso de ngbuild

23

Despliegue con Firebase Hosting

24

Nueva sintaxis en Angular

25

Directivas @For, @switch

26

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicaci贸n

27

Construyendo un e-commerce en Angular

28

Componentes en Angular

29

Mostrando los componentes

30

Angular DevTools

31

Uso de Inputs en Angular

32

Uso de Outputs en Angular

33

Componentes para Producto

Ciclo de vida de los componentes

34

Ciclo de vida de componentes

35

Ciclo de vida de componentes: ngOnChanges

36

Ciclo de vida de componentes: ngOnInit

37

Detectando cambios en los inputs

38

Evitando memory leaks con ngDestroy

39

Audio player con ngAfterViewInit

40

Creando la p谩gina "about us" o "con贸cenos"

Mejorando la interfaz del producto

41

Creando componente de productos

42

Creando el Header

43

Creando el carrito de compras

44

Comunicaci贸n padre e hijo

45

Calculando el total con ngOnChanges

46

El problema del prop drilling

47

Reactividad con signals en servicios

48

Entendiendo la inyecci贸n de dependencias

Integraci贸n y Datos

49

Obteniendo datos una REST API

50

Importaciones cortas en Typescript

51

Pipes en Angular

52

Construyendo tu propio pipe

53

Utilizando librer铆as de JavaScript en Angular

54

Conociendo las directivas

55

Deployando un proyecto en Vercel

Enrutamiento y Navegaci贸n

56

Ruta 404

57

Uso del RouterLink

58

Vistas anidadas

59

Uso del RouterLinkActive

60

Detalle de cada producto

61

Obteniendo datos del producto

62

Galer铆a de imagenes

63

Detalle de la galer铆a

Perfeccionando tu e-commerce

64

Mostrando categorias desde la API

65

Url Params

66

LazyLoading y Code Splitting

67

Aplicando LazyLoading

68

Prefetching

69

Usando la nueva sintaxis de Angular 17

70

Lanzando tu aplicaci贸n a producci贸n

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Event Binding: click y doble click

5/70
Recursos

Aportes 9

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Event Binding
.
Permite controlar los eventos que suceden en estos elementos. Por ejemplo, el clic de un bot贸n, detectar cambios en un campo, el env铆o de un formulario, entre otros eventos. Para esto utiliza los par茅ntesis () para el bindeo de la propiedad del elemento.
.
Ejemplo, si tienes en tu componente:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  enviarFormulario() {
    // ...
  }
}

Puedes ejecutar el m茅todo enviarFormulario() cuando se realiza un clic en un bot贸n de la siguiente manera:

<button (click)="enviarFormulario()" >
Mejoro muchisomo este curso, en el anterior recuerdo que me confundio mucho la parte de Event binding.

Para detectar los cambios de un input de tipo number y mostrarlo en tiempo real en nuestro html

<input type="text" (change)="changeTextInput($event)" />
<p>I'm the input content => {{ valueInput }}</p>
valueInput = '';

changeTextInput(event: Event) {
  const elementInput = event.target as HTMLInputElement;
  this.valueInput = elementInput.value;
}
Existe alguna arquitectura donde se tenga separados los eventos de las variables en la class component? Me lo pregunto porque en proyectos grandes, este file de "labs.components.ts" estaria violando el Single Reponsability principle de SOLID, o existe alguna explicacion? Gracias muy buen curso
![](https://static.platzi.com/media/user_upload/image-2f11d55a-58dc-4a28-a597-79095752f054.jpg) input chandler
**Event binding** te permite escuchar y responder las acciones del usuario, como pulsaciones de teclas, movimientos del rat贸n, clics y toques. 1. **click**: Se activa cuando se hace clic en un elemento. Por ejemplo:`<button (click)="onSave()">Guardar</button>` 2. **dblclick**: Se activa cuando se hace doble clic en un elemento. Por ejemplo:`
Haz doble clic aqu铆
` 3. **input**: Se activa cuando se introduce texto en un campo de entrada (como un `input` o `textarea`). 脷til para detectar cambios en el contenido.`<input (input)="onInput($event.target.value)" />` 4. **change**: Se activa cuando cambia el valor de un elemento de entrada (por ejemplo, un `select`).`<select (change)="onSelectionChange($event.target.value)">` ` <option value="option1">Opci贸n 1</option>` ` <option value="option2">Opci贸n 2</option>` `</select>` 5. **keydown**: Se activa cuando se presiona una tecla. Puedes especificar la tecla o el c贸digo que deseas enlazar. Por ejemplo:`<input (keydown.enter)="onKeydown($event)" />` 6. **keyup**: Similar a `keydown`, pero se activa cuando se suelta una tecla. 7. **mouseover**: Se activa cuando el puntero del rat贸n entra en un elemento. 8. **mouseout**: Similar a `mouseover`, pero se activa cuando el puntero del rat贸n sale de un elemento. 9. **mouseleave**: Se activa cuando el puntero del rat贸n sale de un elemento. Similar a `mouseout`, pero no se propaga a los elementos secundarios. `
El rat贸n se fue
` 10. **focus**: Se activa cuando un elemento obtiene el foco. 11. **blur**: Similar a `focus`, pero se activa cuando un elemento pierde el foco. Esta es la [documentaci贸n oficial de Angular](https://angular.io/guide/event-binding) para obtener m谩s detalles sobre Event Binding
Tengo una pregunta un poco boba, jeje por que dice "l贸gica de negocio" es la l贸gica de la funci贸n no?
a alguien le fallo el evento doble click? ... a mi no me funciona... me dicen is es particular a mi o tambien les pasa a ustedes
El warning de \*ngFor es por que tenemos que importar CommonModule de @angular/common y a帽adirlo a los imports de nuestro componente ```js import { Component } from '@angular/core';import { CommonModule } from '@angular/common'; @Component({ selector: 'app-labs', standalone: true, imports: \[CommonModule], templateUrl: './labs.component.html', styleUrl: './labs.component.css',}) ```