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, May 07 '18 at 14:15
@tt9 yes, I want `inputValue` to change when checkbox is checked/unchecked — Valera, May 07 '18 at 14:32
Maybe this will help: https://stackoverflow.com/a/40214714/2313300 — tt9, May 07 '18 at 15:01

score 1 · Accepted Answer · answered May 07 '18 at 15:19

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 07 '18 at 15:19

Kim Kern

54,283
17
197
195

Thank you.I ended up doing this. Strange that this doesn't work out of the box. – Valera May 07 '18 at 19:38

Dynamic input of type checkbox in Angular 5

1 Answers1