Checkbox angular material checked by default

Question

I am trying to use an Angular Material checkbox, and set it by default as checked, but it is displayed as non-checked, what is wrong?

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

obj.impresora property is boolean

Vega · Accepted Answer · 2018-02-17T18:30:36.907

58

You can either set with ngModel either with [checked] attribute. ngModel binded property should be set to '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>

DEMO

edited Feb 17 '18 at 18:30

answered Nov 07 '17 at 17:39

Vega

27,856
27
95
103

1

I'm new to Angular. Could you/somebody point me in a direction as to the pros/cons of each of these styles? Just trying to figure out what's happening / why I'd choose one way over another. – user3773048 Jan 10 '19 at 20:41
Based on the Angular documentation, it looks like the second method might be the better way to start off using: https://angular.io/guide/template-syntax#template-expressions . – user3773048 Jan 10 '19 at 21:05
2

@user3773048, it depends what you are trying to achive. The first one would do two-way binding, i.e. the model will be updated from template. The two other are one-way and you can update the model programatically – Vega Jan 10 '19 at 23:53
Very interesting. Thank you very much for this explanation. I'll have to look more into that. Getting 2-way binding, as you put it, seems like a nice thing to be able to get for free. Hm, I see, I could imagine what the difference between methods 2 and 3 would entail. Interesting / will have to look into this further. – user3773048 Jan 11 '19 at 07:48

score 12 · Answer 2 · answered Feb 22 '19 at 22:02

this works for me in 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>

I hope help someone ... greetings. let me know if someone have some easiest

Rohan Shenoy · Answer 3 · 2019-03-15T07:58:48.573

There are several ways you can achieve this based on the approach you take. For reactive approach, you can pass the default value to the constructor of the FormControl(import from @angular/forms)

this.randomForm = new FormGroup({
      'amateur': new FormControl(false),
});

Instead of true or false value, yes you can send variable name as well like FormControl(this.booleanVariable)

In template driven approach you can use 1 way binding [ngModel]="this.booleanVariable" or 2 way binding [(ngModel)]="this.booleanVariable" like this

<mat-checkbox
     name="controlName"
     [(ngModel)]="booleanVariable">
     {{col.title}}
</mat-checkbox>

You can also use the checked directive provided by angular material and bind in similar manner

score 3 · Answer 4 · answered Jul 13 '18 at 17:02

The chosen answer does work however I wanted to make a comment that having 'ngModel' on the html tag causes the checkbox checked to not be set to true.

This occurs when you are trying to do bind using the checked property. i.e.

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

And then inside your app.component.ts file

var = true;

will not work.

TLDR: Remove ngModel if you are setting the checked through the [checked] property

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

score 1 · Answer 5 · answered Nov 28 '21 at 18:15

Option 1: Setting the checkbox checked from the template:

<mat-checkbox checked="true"> I accept </mat-checkbox>

Option 2: Setting the value dynamically.

In the component.html file

<mat-checkbox [checked]="isChecked"> I accept </mat-checkbox>

inside the component.ts file

 isChecked:boolean;
 ngOnInit(): void {
  this.isChecked = true;  
 }

score 0 · Answer 6 · answered Nov 07 '17 at 16:20

0

You need to make sure the checked property to be true inside the component.ts

export class CheckboxComponent implements OnInit {
 checked = true;
}

answered Nov 07 '17 at 16:20

Sajeetharan

216,225
63
350
396

I wanna set de property of type bool "impresora" like this: Printer label> mat-checkbox> – ararb78 Nov 07 '17 at 16:25
then impersora should be true – Sajeetharan Nov 07 '17 at 16:25
Yes but doesn´t work, the checkbox remains unchecked – ararb78 Nov 07 '17 at 16:27
it should , can you create a plunker – Sajeetharan Nov 07 '17 at 16:27
It works when the property is string type obj.impresora = "true" but my objt.impresora is boolean, would you recommend that I create a pipe to evaluate the value and return it as a string type? – ararb78 Nov 07 '17 at 16:55
you could just cast it – Sajeetharan Nov 07 '17 at 16:56
Where could I cast it, in the ts component? – ararb78 Nov 07 '17 at 17:02
yes inside the component, usualy it should work with boolean, not sure why its not in your case – Sajeetharan Nov 07 '17 at 17:02

score 0 · Answer 7 · answered Nov 07 '17 at 16:27

0

Make sure you have this code on you component:

export class Component {
  checked = true;
}

answered Nov 07 '17 at 16:27

Arampg

107
6

score 0 · Answer 8 · answered Feb 14 '18 at 08:38

If you are using Reactive form you can set it to default like this:

In the form model, set the value to false. So if it's checked its value will be true else false

let form = this.formBuilder.group({
    is_known: [false]
})

//In HTML

 <mat-checkbox matInput formControlName="is_known">Known</mat-checkbox>

score 0 · Answer 9 · edited Oct 12 '18 at 14:46

Set this in HTML:

    <div class="modal-body " [formGroup]="Form">
        <div class="">
            <mat-checkbox formControlName="a" [disabled]="true"> Display 1</mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="b"  [disabled]="true">  Display 2 </mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="c"  [disabled]="true">  Display 3 </mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="d"  [disabled]="true">  Display 4</mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="e"  [disabled]="true"> Display 5 </mat-checkbox>
        </div>
    </div>

Changes in Ts file

this.Form = this.formBuilder.group({
a: false,
b: false,
c: false,
d: false,
e: false,
});

Conditionvalidation in Ur Business logic

if(true){
this.Form.patch(a: true);
}

score 0 · Answer 10 · answered Jun 12 '19 at 14:42

0

For check it with ngModel, make a merge between "ngModel" and "value", Example:

 <mat-checkbox [(ngModel)]="myVariable"  value="1" >Subscribe</mat-checkbox>

Where, myVariable = 1

Greeting

answered Jun 12 '19 at 14:42

Angel Hernandez

1

Sara · Answer 11 · 2019-11-19T09:10:10.997

// in component.ts
checked: boolean = true;
indeterminate:boolean = false;
disabled:boolean = false;
label:string;

onCheck() {
    this.label = this.checked?'ON':'OFF';
}

// in component.html`enter code here`
<mat-checkbox class="example-margin" [color]="primary" [(ngModel)]="checked" [(indeterminate)]="indeterminate" [labelPosition]="after" [disabled]="disabled" (change)="onCheck()">
                    {{label}}
                  </mat-checkbox>

The above code should work fine. Mat checkbox allows you to make it checked/unchecked, disabled, set indeterminate state, do some operation onChange of the state etc. Refer API for more details.

score -1 · Answer 12 · answered Feb 23 '18 at 12:50

You can use

<mat-checkbox [attr.checked] = "myCondition ? 'checked' : null">

if the checked attribute is set to null, it gets removed from the html tag

or you can use Vega's anwser which should work too (mine is a completion that can be usefull if you don't want to link it with ngModel)

Checkbox angular material checked by default

12 Answers12

Linked

Related