0

Tengo un evento click en una card y dentro de esa card tengo un botón con otro evento click distinto, cuando presiono el botón se ejecuta el de la card y el del botón, lo que quiero es que cuando presiono el del botón solo se ejecute ese. Les dejo una imagen y el código del html.

    <mat-card *ngFor="let current of dataSource" fxFlex="30" (click)="viewClient(current.id)">
                <div class="title" fxLayout="row" fxLayoutAlign="space-between center">
                    <div fxLayoutAlign="start center">
                        <span>{{current.orderNumber}}.-</span>
                        <img mat-card-avatar src="{{current.avatar}}">
                        <span>{{current.companyName}}</span>
                    </div>
                    <div>
                        <button (click)="change(current.id)" mat-mini-fab
                            aria-label="Example icon button with a border_color icon">
                            <mat-icon>child_care</mat-icon>
                        </button>
                    </div>
                </div>
    </mat-card>
1
  • 1
    Intenta con (click)="change(current.id); $event.stopPropagation()" el 12 ene. a las 14:12

1 respuesta 1

3

Hace poco tuve el mismo problema, la solución la encontré en el mismo SO; lo que se hace es usar el método event.stopPropagation().

<button (click)="change(current.id),$event.stopPropagation()" mat-mini-fab
        aria-label="Example icon button with a border_color icon">
     <mat-icon>child_care</mat-icon>
</button>

Lo que hace básicamente este método es evitar que se siga propagando el evento (click en este caso), de tal modo que no afectará a los demás eventos ni procesos.

Referencias útiles:

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.