CODEWITHSUNDEEP
cssangularangular-material
DevLoverUmar
DevLoverUmar

Reputation: 14001

How to add close icon button to mat-basic-chip in Angular Material?

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 close 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>
</mat-basic-chip>

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;
  margin-top:1vh;
  min-width: 15vh;
 }

Upvotes: 6

Views: 10800

Answers (5)

Ling Vu
Ling Vu

Reputation: 5181

How to add a remove button to the mat-basic chip

You can use the normal chip mat-chip with all your customizations like in the picture without changing any css.

I took the basic example of the mat-chip fruits. There is changed it to the following:

<mat-chip
  *ngFor="let fruit of fruits"
  [selectable]="selectable"
  [removable]="removable"
  (removed)="remove(fruit)">
  <div>
    <div matLine>{{fruit}}</div>
    <div matLine><small>(Default)</small></div>
  </div>
  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

Modified example: https://stackblitz.com/angular/mjygopomxvq

Customize your mat-chip

This method is officially supported and recommended. For more information look at

Using that you can add the color property to make customizations for different states. For that modify the .mat-chip.mat-custom class whereas the mat-custom can be anything. Just the mat-... has to be the same.

SCSS

.mat-chip.mat-primary {
    background-color: blue;
    color: white;
}

.mat-chip.mat-accent {
    background-color: yellow;
    color: black;
}

/* Your implementation from the description */

.mat-chip.mat-anything {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vh;
    padding: .7vh 0vh .7vh .7vh;
    margin-right: 2vh;
    margin-top:1vh;
}

HTML

<mat-chip-list>
  <mat-chip color="primary" selected>Primary</mat-chip>
  <mat-chip color="accent" selected>Accent</mat-chip>
  <mat-chip color="anything" selected>
    <div>
      <div matLine>Anything</div>
      <div matLine><small>(Default)</small></div>
    </div>
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

custom-mat-chip-image

DEMO for your reference: https://stackblitz.com/edit/angular-v5xq8y

Feel free to leave some feedback.

Upvotes: 2

beanic
beanic

Reputation: 562

Here you have an example:

<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
          [removable]="removable" (removed)="remove(fruit)">
           {{ fruit.type }}
           <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

Upvotes: 0

Aleksandr Belugin
Aleksandr Belugin

Reputation: 2227

one of solutions is to use flexbox.

should be something like this:

.flex-container {
    display: flex;
    white-space: nowrap;
}

.content {
    text-align: center;
}

.cancel-button {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
}


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;
    margin-top:1vh;
    min-width: 15vh;
}
    <mat-basic-chip *ngFor="let signal of signals">
        <div class="flex-container">
            <div class="content">
                <div matLine class="text-center">{{signal.name}}</div>
                <div matLine class="mt-sm-n1 text-center"><small>(Default)</small></div>
            </div>
            <div class="cancel-button">
                <mat-icon matChipRemove *ngIf="removable">X</mat-icon>
            </div>
        </div>
</mat-basic-chip>

css is more illustative and could be modified for your criteries and used framework specifications, the main idea is in template layout.

Upvotes: 0

Awais
Awais

Reputation: 4912

You can easily achieve this, I got this solution last week where i need this same thing in mat-chips

SCSS

  .mat-chip-list-wrapper {
    margin: 1px 0 !important;
    .mat-standard-chip {
      padding: 0 $space-5 !important;
      display: flex;
      .mat-icon {
        font-size: 17px;
      }
    }
  }

HTML

<mat-chip-list class="mat-chip-list-wrapper" aria-label="Selected list">
      <mat-chip>Hello
       <mat-icon matChipRemove >cancel</mat-icon>
      </mat-chip>      
</mat-chip-list>

Upvotes: 0

Wirde
Wirde

Reputation: 410

You can click the view source button in the offial docs to se how they have done it. They add a mat-icon in the chip like this:

<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
         [removable]="removable" (removed)="remove(fruit)">
  {{fruit.name}}
  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

You don't need to reinvent the wheel here and write your own icon for the remove button, it's already been done.

Take a closer look in the offical docs and press the view source button.

Good luck!

Upvotes: 4

Related Questions