Dynamic input of type checkbox in Angular 5

Question

I have the following code

<input [type]="'checkbox'" [(ngModel)]="inputValue">
<p>Value: {{ inputValue }}</p>

Can somebody explain why the value in inputValue does not change?

I can't set just type="checkbox" because I have dynamic type of input.

It works fine when type is text or number. It also works when the type of input is static (type="checkbox")

i would not set the type dynamically but rather render one or the other with *ngIf — Riscie
– Riscie, Commented May 7, 2018 at 14:15
@tt9 yes, I want inputValue to change when checkbox is checked/unchecked — Valera
– Valera, Commented May 7, 2018 at 14:32

Kim Kern · Accepted Answer · 2018-05-07 15:19:54Z

1

If dynamically setting the input type does not work why don't you try an ngSwitch with a static input type for checkbox?

<ng-container [ngSwitch]="inputType">
    <input *ngSwitchCase="'checkbox'" type="checkbox" [(ngModel)]="inputValue">
    <input *ngSwitchDefault [type]="inputType" [(ngModel)]="inputValue">
</ng-container>

Check out this stackblitz.

answered May 7, 2018 at 15:19

Kim Kern

61.1k20 gold badges221 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Valera Over a year ago

Thank you.I ended up doing this. Strange that this doesn't work out of the box.

Collectives™ on Stack Overflow

Dynamic input of type checkbox in Angular 5

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related