title: how to disable matchip in angular
body: <p>So I have Tags component and I imported that component in my Chart-details component. In my Chart Details component I have a checkbox that will disable all the input box, drop down box, buttons that are located inside chart-details page but some reason my imported tags component is not disabling when I click the checkbox. Any suggestion or help on how to fix this so that a user cannot add or remove tags when the checkbox is clicked will be really appreciated.</p>
  <p>Chart Details Component. HTML</p>
  <pre><code>//Check box to disable all the input, drop down, buttons
      &lt;mat-checkbox *ngIf=&quot;chart &amp;&amp; workspace&quot; color=&quot;primary&quot; [disabled]=&quot;this.workspace.type === WorkspaceType.user&quot;
          [(ngModel)]=&quot;chart.isPublished&quot; (ngModelChange)=&quot;publishChange($event)&quot;&gt;Published&lt;/mat-checkbox&gt;
  
  //Example Button
     &lt;button color=&quot;primary&quot; mat-flat-button (click)=&quot;saveClick()&quot; [disabled]=&quot;this.chart.isPublished&quot;&gt;Save&lt;/button&gt;
  
  // Imported Tags Component
          &lt;mc-tags [_normalTags]=&quot;chart.tags&quot; [removable]=&quot;true&quot; [selectable]=&quot;true&quot;
          (added)=&quot;tagAdded($event)&quot; (removed)=&quot;tagRemoved($event)&quot; [disabled]=&quot;this.chart.isPublished&quot; &gt;
          &lt;/mc-tags&gt;
  </code></pre>
  <p>I have added [disabled]=&quot;this.chart.isPublished&quot; but I got an error saying &quot;Can't bind to 'disabled' since it isn't a known property of 'mc-tags'. &quot;. Also I tried (disabled) but still not working and user can still add or remove tags even though checkbox is checked.</p>
  <p>Tags Component.HTML</p>
  <pre><code>        &lt;mat-chip-list #chipList [disabled]=&quot;true&quot;&gt;
              &lt;mat-chip *ngFor=&quot;let chip of normalTags&quot; [selectable]=&quot;selectable&quot; 
              [removable]=&quot;removable&quot;
                  (removed)=&quot;removeTags(chip)&quot;&gt;
                  {{chip.tag}}
              &lt;/mat-chip&gt;
  
              &lt;input matInput #input [(ngModel)]=&quot;tagIn&quot; [formControl]=&quot;tagCtrl2&quot; 
              [matAutocomplete]=&quot;auto&quot; /&gt;
          &lt;/mat-chip-list&gt;
  </code></pre>
  <p>Right now I have to do [disabled]=&quot;true&quot; on mat-chip-list in Tags component.html so that user can't add or remove it. I don't want to hard code this and want to control this using Chart Detail Component Checkbox.</p>
  <p><a href="https://i.stack.imgur.com/hGtSy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hGtSy.png" alt="enter image description here" /></a></p>
  <p>It's not gonna run but I've attached the whole code for these two component over here <a href="https://stackblitz.com/edit/angular-ivy-wwfcai" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-wwfcai</a> . thanks</p>