0

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!

Nolequen
  • 3,032
  • 6
  • 36
  • 55
user17249158
  • 1
  • 1
  • There is a typo here: `[matChipInputFor]="chipList` you forgot the closing quotes. Use an editor with syntax highlighting to prevent these. – Robin De Schepper Oct 27 '21 at 10:43
  • Additionally, if there are no errors raised, then most likely your data structures do not contain the data you think they contain. Perhaps `interests` is `[""]` and then the result on the image is correct. Try to continue debugging until you have a specific solvable code error that StackOverflow can help you with. Most of these you'll find have been solved here before and a quick google will sort you out. – Robin De Schepper Oct 27 '21 at 10:45

1 Answers1

0

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

bacem ben daly
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 28 '22 at 00:34
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30926509) – Mahdi Zarei Feb 01 '22 at 09:52