Show input checkbox as checked on-load in angular

Question

I'm very new with the angular. I've created a pipe for filtering content. Everything works fine. All I need "input as checked" on-load. All are unchecked by default.

pipe.ts

export class PlayerFilterPipe implements PipeTransform {
  transform(items: Array<any>, position1: any, position2: any, position3: any, position4: any, active:any) {
    //debugger
    if (items && items.length){
        return items.filter(item =>{
            if (position1 && item.position_name.toLowerCase().indexOf('حارس مرمى') !== -1) {
                return true;
            }
            if (position2 && item.position_name.toLowerCase().indexOf('مدافع') !== -1){
                return true;
            }
            if (position3 && item.position_name.toLowerCase().indexOf('خط وسط') !== -1){
                return true;
            }
            if (position4 && item.position_name.toLowerCase().indexOf('مهاجم') !== -1){
                return true;
            }
            if (active && item.P_Active.toLowerCase().indexOf('1') !== -1){
                return true;
            }
            return false;
       })
    }
    else{
        return items;
    }
  }
}

html

<div class="col-12 col-sm-4 col-md">
        <label class="tgl tgl-gray">
            <input type="checkbox"  name="position1" [(ngModel)]="position1" value="حارس مرمى">
            <span>&nbsp;&nbsp;&nbsp;</span> 
            حارس مرمى
        </label>
    </div>

Answer 1

You can use the [checked] attribute on your input tag. This attribute can be assigned to a variable on your controller which would render the value as true on page load.

So the input tag would look something like :

<input type="checkbox" name="active" [(ngModel)]="active" value="1" [checked]="setState">

And in the controller the setState variable can be defined as a boolean typeto return the condition during ngOnInit or any other process you are using to fetch the initial values.