Evite que el panel de expansión del tapete cambie cuando se hace clic en la casilla de verificación del tapete en el encabezado

Preguntas HTML
⏰ 2 minutos de lectura

Avatar de usuario de Nehal Damania
nehal damania

¿Podemos evitar que el panel de expansión cambie cuando se hace clic en la casilla de verificación dentro del encabezado? De alguna manera detener la propagación del evento. En este momento, con el siguiente código de muestra, cuando se hace clic en la casilla de verificación, el panel también alterna (abre/cierra). El estado deseado es que el panel de expansión cambie cuando se hace clic en cualquier área del encabezado, excepto en la casilla de verificación dentro del encabezado.

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox>Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

Puede llamar al método stopPropagation $event cuando se hace clic en mat-checkbox:

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox (click)="$event.stopPropagation();">Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

  • ¿Es la manera perfecta de dejar de alternar?

    – Ganesh Babu

    12 de junio de 2018 a las 4:37

  • Es difícil de decir… “Perfecto” implica varias cosas, y esta gestión de eventos, en mi opinión, no es la forma más bonita y perfecta. Pero tratando de responder al comentario, sí, es la “mejor” manera de dejar de alternar

    – Kalamarico

    13 de junio de 2018 a las 9:32

  • Gracias señor, también funcionó perfectamente para mí con un mat select

    – MoxxiManagarm

    27 de junio de 2019 a las 15:28

  • @Kalamarico ¿Y si tuviera y input en vez de checkbox y solo quiero desactivar pointer event por primera vez cuando la entrada es hacer clic en no todo el tiempo

    – Awais

    30 de octubre de 2019 a las 12:41

  • @Awais bufff, en un “pensamiento rápido…” puede configurar (hacer clic) una función que ejecuta “$event.stopPropagation” y se redefine después de eso, por ejemplo: “this.myFunc = () => { }” ¿sabes? Primero ejecute stopPropagation y luego se redefine como una función vacía, por lo que la primera vez que haga clic detendrá la propagación y se redefinirá como vacía, por lo que el segundo clic no hará nada.

    – Kalamarico

    30 de octubre de 2019 a las 13:08

¿Ha sido útil esta solución?