Casilla de verificación material angular marcado por defecto

Solución:

Puede configurar con ngModel o con [checked] atributo. La propiedad enlazada ngModel debe establecerse en ‘true’:

1.

  <mat-checkbox class = "example-margin" [(ngModel)] = "myModel"> 
    <label>Printer </label> 
  </mat-checkbox>

2.

<mat-checkbox [checked]= "myModel" class = "example-margin" > 
    <label>Printer </label> 
</mat-checkbox>

3.

<mat-checkbox [ngModel]="myModel" class="example-margin">
    <label>Printer </label> 
</mat-checkbox>

MANIFESTACIÓN

esto funciona para mí en Angular 7

// in component.ts
checked: boolean = true;

changeValue(value) {
    this.checked = !value;
}

// in component.html
<mat-checkbox value="checked" (click)="changeValue(checked)" color="primary">
   some Label
</mat-checkbox>

Espero ayudar a alguien … saludos. avíseme si alguien tiene algo más fácil

La respuesta elegida funciona, sin embargo, quería hacer un comentario de que tener ‘ngModel’ en la etiqueta html hace que la casilla de verificación marcada no se establezca en verdadera.

Esto ocurre cuando intenta enlazar usando la propiedad marcada. es decir

<mat-checkbox [checked]='var' ngModel name="some_name"></mat-checkbox>

Y luego dentro de su archivo app.component.ts

var = true;

no trabajará.

TLDR: elimine ngModel si está configurando el marcado a través del [checked] propiedad

    <mat-checkbox [checked]='var' name="some_name"></mat-checkbox>

---

---

Utiliza Nuestro Buscador