angular 2 checkbox to select all
<h1>Problem</h1>
<p>I looked for answers to this problem but I'm still stuck I have a table with multiple rows with a checkbox on every row, I need a checkbox to select all and deselect all, here some example code</p>
<p><strong>Template</strong></p>
<pre><code>&lt;table class=&quot;table table-bordered table-condensed table-striped table-hover&quot;&gt;
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;Size&lt;/th&gt;
        &lt;th&gt;Diameter&lt;/th&gt;
        &lt;th class=&quot;text-center&quot;&gt;
            &lt;input type=&quot;checkbox&quot; name=&quot;all&quot; (change)=&quot;checkAll($event)&quot;/&gt;
        &lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
    &lt;tr *ngFor=&quot;let size of sizes | async ; let i = index&quot;&gt;
        &lt;td class=&quot;text-right&quot;&gt;{{i + 1}}&lt;/td&gt;
        &lt;td class=&quot;text-right&quot;&gt;{{size.size}}&lt;/td&gt;
        &lt;td&gt;{{size.diameter}}&lt;/td&gt;
        &lt;td class=&quot;text-center&quot;&gt;
            &lt;input type=&quot;checkbox&quot; name=&quot;sizecb[]&quot; value=&quot;{{size.id}}&quot;/&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;
</code></pre>

<p><strong>Component</strong></p>
<pre><code>    export class ListSizeComponent implements OnInit {
    constructor () {
    }

    sizes: any;

    setSizes() {
        this.sizes = [
            {'size': '0', 'diameter': '16000 km'},
            {'size': '1', 'diameter': '32000 km'}
        ]
    }

    checkAll(ev) {
        if (ev.target.checked) {
            console.log(&quot;True&quot;)
        } else {
            console.log(&quot;False&quot;);
        }
    }

    ngOnInit(): void {
        this.setSizes();
    }
}
</code></pre>