Angular 5 HTML boolean on checkbox is checked

Question

Angular 5  Typescript 2 7 1  I can t seem to get the checkbox to be checked when returning a boolean  I ve tried  item check returns either true or false    lt tr class  even   ngFor  let item of rows  gt   lt input value    item check    type  checkbox  checked  item check  gt    The checkbox is always checked when checked is written inside input  And it does not get unchecked when checked  false    Is there a better way to do it with Angular features instead  like ngModel or ngIf     Solution   lt input type  checkbox   checked   item check     true   gt

User · Answer

When you have a copy of an object the  checked  attribute might not work  in that case  you can use  change  in this way            lt input type  checkbox   checked   item selected   change   item selected    item selected  gt

User · Answer

You can use this    lt input type  checkbox   checked   record status   change   changeStatus record id  event   gt    Here  record is the model for current row and status is boolean value

User · Answer

Work with checkboxes using observables You could even choose to use a behaviourSubject to utilize the power of observables so you can start a certain chain of reaction starting at the isChecked  observable  In your component ts  public isChecked    new BehaviorSubject false   toggleChecked       this isChecked  next  this isChecked  value     In your template  lt input type  quot checkbox quot   checked   quot isChecked    async quot   change   quot toggleChecked   quot  gt

User · Answer

Here is my answer   In row model ts  export interface Row      otherProperty   type     checked   bool     otherProperty   type             In  html    lt tr class  even   ngFor  let item of rows  gt      lt input  checked   item checked  type  checkbox  gt   lt  tr gt    In  ts   rows   Row          update the rows in component ts

User · Answer

Hope this will help somebody to develop custom checkbox component with custom styles  This solution can use with forms too   HTML    lt label class  lbl  gt      lt input  inputEl type  checkbox   name   label    ngModel    isChecked   change   onChange inputEl checked       ngIf  isChecked  checked gt     lt input  inputEl type  checkbox   name   label    ngModel    isChecked   change   onChange inputEl checked       ngIf   isChecked   gt     lt span class  chk-box   isChecked    chk        gt  lt  span gt     lt span class  lbl-txt   ngIf  label   gt   label   lt  span gt   lt  label gt    checkbox component ts      import   Component  Input  EventEmitter  Output  forwardRef  HostListener   from   angular core   import   ControlValueAccessor  NG VALUE ACCESSOR   from   angular forms    const noop        gt        export const CUSTOM INPUT CONTROL VALUE ACCESSOR  any       provide  NG VALUE ACCESSOR    useExisting  forwardRef      gt  CheckboxComponent     multi  true         Custom check box      Component     selector   app-checkbox     templateUrl     checkbox component html     styleUrls      checkbox component scss      providers   CUSTOM INPUT CONTROL VALUE ACCESSOR     export class CheckboxComponent implements ControlValueAccessor        Input   label  string     Input   isChecked   false     Input   disabled   false     Output   getChange   new EventEmitter       Input   className  string        get accessor   get value    any       return this isChecked            set accessor including call the onchange callback   set value value  any        this isChecked   value         private onTouchedCallback       gt  void   noop    private onChangeCallback      any    gt  void   noop      writeValue value  any   void       if  value     this isChecked          this isChecked   value               onChange isChecked        this value   isChecked      this getChange emit this isChecked       this onChangeCallback this value             From ControlValueAccessor interface   registerOnChange fn  any        this onChangeCallback   fn            From ControlValueAccessor interface   registerOnTouched fn  any        this onTouchedCallback   fn         setDisabledState  isDisabled  boolean   void             checkbox component scss      import           assets scss  variables      CHECKBOX      lbl       font-size  12px      color   282828      display  -webkit-box      display  -ms-flexbox      display  flex      -webkit-box-align  center      -ms-flex-align  center      align-items  center      cursor  pointer       amp  checked           font-weight  600             amp  focus          chk-box          border  1px solid  a8a8a8           amp  chk            border  none                              input           display  none                checkbox icon         chk-box           display  block          min-width  15px          min-height  15px          background  url   assets i checkbox-not-selected svg            background-size  15px 15px          margin-right  10px            input checked  chk-box           background  url   assets i checkbox-selected svg            background-size  15px 15px             lbl-txt           margin-top  0px              Usage  Outside forms   lt app-checkbox  label    Example    isChecked   true  gt  lt  app-checkbox gt    Inside forms   lt app-checkbox  label    Type 0   formControlName  Type1  gt  lt  app-checkbox gt

User · Answer

try    checked   item checked    check out  How to Deal with Different Form Controls in Angular

[html] Angular 5, HTML, boolean on checkbox is checked

Examples related to html

Examples related to angular

Examples related to typescript