Angular 全て選択チェックボックス

連動するチェックボックス。
テンプレート部分。

foo<input type="checkbox" [(ngModel)]="foo">
bar<input type="checkbox" [(ngModel)]="bar">
baz<input type="checkbox" [(ngModel)]="baz">
<br>
all<input type="checkbox" [(ngModel)]="all">

ロジック部分。ゲッターとセッターを利用する。

foo = false
bar = false
baz = false

get all() {
  return this.foo && this.bar && this.baz
}

set all(v) {
  const getObj = (bool) => {
    return {
      foo: bool,
      bar: bool,
      baz: bool,
    }
  }
  if (this.all) {
    Object.assign(this, getObj(false))
  } else {
    Object.assign(this, getObj(true))
  }
}