title: Show input checkbox as checked on-load in angular
body: <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/lUWA3.png" rel="nofollow noreferrer">pipe.ts</a></p>
  
  <pre><code>export class PlayerFilterPipe implements PipeTransform {
    transform(items: Array&lt;any&gt;, position1: any, position2: any, position3: any, position4: any, active:any) {
      //debugger
      if (items &amp;&amp; items.length){
          return items.filter(item =&gt;{
              if (position1 &amp;&amp; item.position_name.toLowerCase().indexOf('حارس مرمى') !== -1) {
                  return true;
              }
              if (position2 &amp;&amp; item.position_name.toLowerCase().indexOf('مدافع') !== -1){
                  return true;
              }
              if (position3 &amp;&amp; item.position_name.toLowerCase().indexOf('خط وسط') !== -1){
                  return true;
              }
              if (position4 &amp;&amp; item.position_name.toLowerCase().indexOf('مهاجم') !== -1){
                  return true;
              }
              if (active &amp;&amp; item.P_Active.toLowerCase().indexOf('1') !== -1){
                  return true;
              }
              return false;
         })
      }
      else{
          return items;
      }
    }
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="col-12 col-sm-4 col-md"&gt;
          &lt;label class="tgl tgl-gray"&gt;
              &lt;input type="checkbox"  name="position1" [(ngModel)]="position1" value="حارس مرمى"&gt;
              &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt; 
              حارس مرمى
          &lt;/label&gt;
      &lt;/div&gt;
  </code></pre>