Molto spesso capita di dover creare pulsanti con un HTML complesso per dare la possibilità di aggiungere icone a destra o sinistra del test, per dare uniformità di stile o per aggiungere determinati comportamenti. Per evitare di scrivere codice HTML duplicato per ogni pulsante, possiamo creare un component che al suo interno include tutto il codice HTML e di logica necessario al corretto funzionamento del pulsante.
Il nostro component deve esporre un evento che corrisponde al click del pulsante interno. Se chiamiamo l'evento click, Angular eseguirà l'evento due volte, una per il pulsante e una per il tag che viene renderizzato in HTML per il component.
<!--component--> <button class="btn btn-primary btn-sm" (click)="bubbleClick($event)"> <i [class]="iconFirst" *ngIf="iconFirst"></i> <ng-content></ng-content> <i [class]="iconLast" *ngIf="iconLast"></i> </button>import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-button', templateUrl: './button.component.html' }) export class ButtonComponent implements OnInit { @Output() click = new EventEmitter(); bubbleClick(event: Event) { this.click.emit(); } }
Come detto, in questo caso l'HTML dichiara un evento click per il pulsante dentro il component, e ne dichiarerà un altro per il tag che contiene il component (
bubbleClick(event: Event) { event.stopPropagation(); this.click.emit(); }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare un service principal per accedere a Azure Container Registry
Miglioramenti nell'accessibilità con Angular CDK
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Determinare lo stato di un pod in Kubernetes
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Utilizzare politiche di resiliency con Azure Container App
Generare file per il download da Blazor WebAssembly
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
.NET Conference Italia 2023
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser