title: How to make 2 chip lists interact with each other Angular Material
body: <p>I'm new to angular and I wanted to implement a form that is based on chips from material UI. The user should be able to choose chips with options that they are interested in, and chosen chips should be then given on the right side, so it would be easier to deselect them.</p>
  <p>Right now my chips on the right do update, when chips on the left are changed, but it doesn't work the other way.</p>
  <p>I've tried to make strings in development array objects with their own ids, because I thought that would make displayed chips the same object. I've also wanted to use selected array from MatChipList but I don't know how to access it, because I have found no examples of it being used and it's only mentioned in the documentation of Material UI.</p>
  <p>Is there any way to connect them and to gather selected chips to a form?</p>
  <p><a href="https://i.stack.imgur.com/FFq7e.png" rel="nofollow noreferrer">selecting left chips</a></p>
  <p><a href="https://i.stack.imgur.com/oP3FV.png" rel="nofollow noreferrer">deselecting right chips</a></p>
  <p>I was thinking of using checkboxes, but the person who gave me this as a task insists on using chips.</p>
  <p>html file:</p>
  <pre class="lang-html prettyprint-override"><code> &lt;div class=&quot;column&quot;&gt;
  
        &lt;mat-chip-list selectable multiple [formControl]=&quot;devControl&quot;&gt;
          &lt;mat-chip #chip=&quot;matChip&quot; (click)=&quot;chip.toggleSelected(true)&quot;
            *ngFor=&quot;let option of development&quot;
              [selected]=&quot;option&quot;
              [value]=&quot;option&quot;&gt;
            &lt;mat-icon *ngIf=&quot;chip.selected&quot;&gt;clear&lt;/mat-icon&gt;
            {{option}}
  
          &lt;/mat-chip&gt;
        &lt;/mat-chip-list&gt;
        &lt;div&gt;Value: {{chipsValue$ | async}}&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;column&quot;&gt;
        &lt;mat-chip-list selectable multiple [formControl]=&quot;devControl&quot;&gt;
          &lt;mat-chip #chip=&quot;matChip&quot; (click)=&quot;chip.toggleSelected(true)&quot;
            *ngFor=&quot;let option of devControl.value&quot;
              [selected]=&quot;option&quot;
              [value]=&quot;option&quot;&gt;
            &lt;mat-icon *ngIf=&quot;chip.selected&quot;&gt;clear&lt;/mat-icon&gt;
            {{option}}
  
          &lt;/mat-chip&gt;
        &lt;/mat-chip-list&gt;
       &lt;/div&gt;
  </code></pre>
  <p>ts file:</p>
  <pre class="lang-js prettyprint-override"><code>  development = new Set([&quot;React&quot;, &quot;Redux&quot;, &quot;Webpack&quot;, &quot;Javascript&quot;,
    &quot;SCRUM&quot;,&quot;C#&quot;, &quot;Docker&quot;]);
  
    devControl= new FormControl('');
    chipsValue$ = this.devControl.valueChanges;
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-ivy-pudk8d?file=src%2Fapp%2Fskills%2Fskills.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-pudk8d?file=src%2Fapp%2Fskills%2Fskills.component.html</a></p>