title: Dynamically check/uncheck checkbox based off of selection
body: <p>Basically, I just want to uncheck one checkbox if I select a certain checkbox. I would like to uncheck or check a checkbox depending on what is checked. Example. If I check &quot;Admin&quot;, &quot;SuperAdmin&quot; and then later select &quot;ProcessLevel&quot;, I want &quot;Admin&quot; and &quot;SuperAdmin&quot; to be removed from my array and &quot;Admin&quot; and &quot;SuperAdmin&quot; checkbox to be unchecked if checked. I am populating my checkbox using a &quot;Role&quot; array. I'm trying to use 2 way binding.</p>
  <p>I'm using Angular 11.</p>
  <p>Here's my html code for the checkbox control:</p>
  <pre><code>    &lt;input type=&quot;checkbox&quot; name=&quot;{{ member.roleId }}&quot; id=&quot;{{ member.roleName }} 
     [disabled]=&quot;role.roleName == 'User'&quot; [checked]=&quot;role.roleName == 'User'&quot; 
      (change)=&quot;onRoleChange(role.roleId, role.roleName, $event)&quot;&gt; {{ role.roleName }}
  </code></pre>
  <p>Here's my .ts code:
  This is the object I'm using to hold my checkbox data and the &quot;user&quot; object that I want to send to the server to insert the data.</p>
  <pre><code>    roles: Role[]; //this is what I use to populate the checkbox data with.
  
  isUserRole: boolean = false;
  
  // this is the object I want to populate from the form and send to the api to insert into the 
  Db.
  user: Member = {
  userId: '',
  userName: '',
  emailAddress: '',
  roles: [],
  userAgencies: [],
  processLevels: []
  };
  
  this.roleService.getAllroles().subscribe(response =&gt; {
    this.roles = response;
    this.user.roles = response;
    var role = this.roles.find(r =&gt; r.roleName == &quot;User&quot;);
    if (role.roleName == &quot;User&quot;) {
      this.isUserRole = true;
    }
  }
  );
  
      onRoleChange(roleId, roleName, $event) {
      if ($event.target.checked)
          this.user.roles.push(roleId);
      else {
          this.user.roles.splice(index, 1);
      }
    }
  </code></pre>