1

hola actualmente tengo un mat-list-option en el cual agregue una casilla de verificación para seleccionar todos, pero al quitar alguna seleccion de los check deberia dejar de marcar la casilla todos, como puedo lograr eso funcion?

Utilizo una refefencia del mat-select-list con ViewChild para marcar todas las casilla y acceder al metodo de selectAll() pero como puedo verificar que se desmarco alguna?

Comparto mi link de stackblitz

https://stackblitz.com/edit/angular-8kbwk2?file=src/app/app.component.html

1
  • Por favor, aunque el stackblitz es muy útil, pon el código del componente aquí, en la pregunta: si esa página se borra la pregunta dejará de tener valor porque no se podrá acceder al código que presenta el problema. el 12 ago. 2020 a las 7:10

1 respuesta 1

1

Trasteando un poco con el API de Angular Material, podemos ver que la clase MatSelectionList tiene una lista de elementos, en este caso 11 elementos (tu 10 opciones más el "select all").

Así que se me ocurrió crear el siguiente método:

  checkAllSelected() {
    let selected = this.allSelected.options.filter(option => option.selected);
    // nos quedamos con los que están marcados (checked)
    if (selected.length < 10) {
      //si son menos de 10, es seguro que hay alguno además del "select all"
      //que no está marcado, así que el último lo desmarcamos
      this.allSelected.options.last.selected = false;
    } else if (selected.length === 10) {
      //Si hay 10, hay dos opciones:
      //el último no está marcado y debería
      //el último está marcado y no debería porque hay otro desmarcado
      //Así que le cambiamos el estado, sea cual sea
      this.allSelected.options.last.toggle();
    }

  }

Para usar este método sólo necesitas añadir un manejador de eventos a tu lista:

<mat-selection-list #allSelected *ngIf='dataIsAvailable'
        (selectionChange)="checkAllSelected()">

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.