#StackBounty: #css #angular #angular-material How to add remove button to mat-basic-chip

Bounty: 50

I created a custom styled chips list with mat-basic-chip(Unstyled chips) as per official docs

My Chips look like
enter image description here

Now, I want to add remove buttons to my chips as default mat-chips have
enter image description here

Here is the template of mat-basic-chip

<mat-basic-chip *ngFor="let signal of signals">
                    <div matLine class="text-center">{{signal .name}}</div>
                    <div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>

As per the official docs receives the mat-basic-chip CSS class in addition to the mat-chip class.
So, here is the CSS of .mat-basic-chip to style my custom chips:

.mat-basic-chip {
  display: inline-block;
  clear: right;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 1vh;
  padding: .7vh 0vh .7vh .7vh;
  margin-right: 2vh;
  min-width: 15vh;

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.