CODEWITHSUNDEEP
angularmat-chip
user17249158
user17249158

Reputation: 1

How to display angular material chips in bootstrap themed project?

Mat chip Display

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:

<input id="intrest" placeholder="Enter Interest" #interestInput [formControl]="interestCtrl" list="interestList" [matChipInputFor]="chipList [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="addInterests($event)" autocomplete="off" (keypress)="intrestKeyPress($event)"/>
<mat-chip-list #chipList>
    <mat-chip style="background-color:#0F52BA; color: white;" *ngFor="let interest of Interests" [selectable]="selectable" [removable]="removable" (removed)="removeInterests(interest)" [(ngModel)]="interest"> {{interest}}
        <i class="fa fa-times" matChipRemove *ngIf="removable"></i>
    </mat-chip>
</mat-chip-list>

Hope someone can help me in this issue. Many thanks!

Upvotes: 0

Views: 799

Answers (1)

bacem ben daly
bacem ben daly

Reputation: 1

I faced the same problem. I think it's easier to use a bootstrap chip.

Upvotes: 0

Related Questions