title: How to select all and Unselect checkbox in Angular?
body: <p>I am doing an angular Todo list. In that I am trying to do selectall and unselect all checkbox part.</p>
  
  <p>todo.ts</p>
  
  <pre><code>import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
  import { TodoService } from '../../services/todo.service';
  
  import { Todo } from 'src/app/models/Todo';
  
  @Component({
    selector: 'app-todo-item',
    templateUrl: './todo-item.component.html',
    styleUrls: \['./todo-item.component.css'\]
  })
  export class TodoItemComponent implements OnInit {
    @Input() todo: Todo;
    @Output() deleteTodo: EventEmitter&lt;Todo&gt; = new EventEmitter();
  
    constructor(private todoService:TodoService) { }
  
    ngOnInit() {
    }
  
    // Set Dynamic Classes
    setClasses() {
      let classes = {
        todo: true,
        'is-complete': this.todo.completed
      }
  
      return classes;
    }
  
    onToggle(todo) {
      // Toggle in UI
      todo.completed = !todo.completed;
      // Toggle on server
      this.todoService.toggleCompleted(todo).subscribe(todo =&gt; console.log(todo));
    }
  
    onDelete(todo) {
      this.deleteTodo.emit(todo);
    }
  checkUncheckAll() {
    for (var i = 0; i &lt; this.todos.length; i++) {
      this.checkUncheckAll\[i\].isSelected = this.todos;
    }
    this.checkUncheckAll();
  }
  
  
  }][1]][1]
  </code></pre>
  
  <p>todo.html</p>
  
  <pre><code>&lt;div class="login-page"&gt;
      &lt;form class="form" (ngSubmit)="onSubmit()" class="login-form"&gt;
          &lt;input (change)="onToggle(todo)" type="checkbox" /&gt;
      {{ todo.title }}
      &lt;button (click)="onDelete(todo)" class="del"&gt;x&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above is my Html code. In that I try to do insert a Select All and Unselect all button.
  I try for the function to Select all Checkboxs.</p>