title: How to display angular material chips in bootstrap themed project?
body: <p><a href="https://i.stack.imgur.com/LJoeB.jpg" rel="nofollow noreferrer">Mat chip Display</a></p>
  <p>Based on the image above, I am facing issues to display mat chips in the bootstrap themed project. It only displays as a full chip after I click or tap on some keys. I've installed angular material and imported mat chip in my module.ts file. The code to the mat chip are as follows:</p>
  <pre><code>&lt;input id=&quot;intrest&quot; placeholder=&quot;Enter Interest&quot; #interestInput [formControl]=&quot;interestCtrl&quot; list=&quot;interestList&quot; [matChipInputFor]=&quot;chipList [matChipInputSeparatorKeyCodes]=&quot;separatorKeysCodes&quot; [matChipInputAddOnBlur]=&quot;addOnBlur&quot; (matChipInputTokenEnd)=&quot;addInterests($event)&quot; autocomplete=&quot;off&quot; (keypress)=&quot;intrestKeyPress($event)&quot;/&gt;
  &lt;mat-chip-list #chipList&gt;
      &lt;mat-chip style=&quot;background-color:#0F52BA; color: white;&quot; *ngFor=&quot;let interest of Interests&quot; [selectable]=&quot;selectable&quot; [removable]=&quot;removable&quot; (removed)=&quot;removeInterests(interest)&quot; [(ngModel)]=&quot;interest&quot;&gt; {{interest}}
          &lt;i class=&quot;fa fa-times&quot; matChipRemove *ngIf=&quot;removable&quot;&gt;&lt;/i&gt;
      &lt;/mat-chip&gt;
  &lt;/mat-chip-list&gt;
  </code></pre>
  <p>Hope someone can help me in this issue. Many thanks!</p>