Esta es una parte de una aplicación de comercio electrónico en la que los clientes pueden seleccionar un pedido e ir a la caja. Un grupo de botones similares que tienen un atributo de datos, con extensiones respectivas a datos- algo . Puedo implementar esto bien en JavaScript y Html 5. Quiero saber cómo lograr exactamente lo mismo usando Angular.
<button data-plan="bronze">Select Plan</button> <button data-plan="silver">Select Plan</button> <button data-plan="gold">Select Plan</button> <button data-plan="diamond">Select Plan</button>A continuación se muestra JavaScript que deseo implementar en Angular,
// Select Plan Logic const planButtons = document.querySelectorAll("button[data-plan]");Para interactuar con elementos HTML en Angular y tener referencias sobre ellos, debe usar los decoradores @ViewChild o @ViewChildren . El primero es para un solo elemento y el segundo para más de uno.
Al usar estos decoradores, debe considerar el método de ciclo de vida ngAfterViewInit en el que puede acceder a las referencias a los elementos DOM. Debajo del capó, @ViewChild o @ViewChildren están usando document.querySelector y document.querySelectorAll .
Aprende y lee más sobre ellos: