Components: BUG: mat-chip without mat-chip-list has no styles

[ninjaonsafari]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

<mat-chip> without parent <mat-chip-list> should render the same styles.
chip.scss is only injected to the <mat-chip-list> component.

What is the current behavior?

<mat-chip> has no styles.

What are the steps to reproduce?

add <mat-chip> to template without <mat-chip-list>
stackblitz

What is the use-case or motivation for changing an existing behavior?

i dont want to add the <mat-chip-list> if i render only one chip

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular: 5.2.2
material: 5.1.0
typescript: 2.6.2
os: *
browsers: *

Is there anything else we should know?

[donroyco]

Weird thing is, when adding a mat-chip-list, it works correctly for all mat-chips.

[josephperrott]

This is happening because the mat-chip is a directive and without a view does not load styles or styleUrls. Once mat-chip-list is loaded, the chips styling is loaded and will be applied to all things it matches via css.

[Manostion]

Heya,

I'm pretty new to Angular and have only worked with AngularJS before. I wanted to try using the mat-chip-list component in a test project following the instructions on the official documentation but for some reason all of my chips receive the ~mat-basic-chip~ [edit: nevermind, it was mat-standard-chip] class and are thus unstyled. In addition they get extremely large for a second or so when I click them. This issue persists, even if I manually add styles for them, so this is my main issue, I guess.

I know it's not this exact issue but I felt it was related. Does anyone know what I'm missing...?

---

I have imported the module in my app.module.ts like so:

...
import { MatChipsModule } from "@angular/material/chips";
...
@NgModule({
  declarations: [...],
  imports: [
    MatChipsModule,
    ...
  ]
})
export class AppModule { }

...and my layout inside the app.component.html looks something like this:

<div fxLayout="column">
  ...
  <div fxLayout="column" fxLayoutAlign="center center">
    <mat-card fxFlex fxFlexFill>
      ...
      <mat-card-content>
        <mat-chip-list>
          <mat-chip>My</mat-chip>
          <mat-chip>Awesome</mat-chip>
          <mat-chip>Chips</mat-chip>
        </mat-chip-list>
      </mat-card-content>
    </mat-card>
  </div>
</div>

---

Update / solved:
My bad, I forgot to include a prebuilt Angular Material theme...

[striky1]

Something new about that? Still not working. Thank you

Angular v6.0.0
Material v6.2.1
TypeScript v2.7.2

[jelbourn]

Agreed that it would be nice to have chips without a chip-list, but currently this would be a low priority issue.

[striky1]

Thank you for your reply.

Btw. I tried it with <mat-chip-list> and styles are missing too (I mean, styles for primary/accent/warn color), it is something changed? See example here:

https://stackblitz.com/edit/angular-9vs2ga

Thank you.

[frederikschubert]

@striky1 The colors only appear when the selected property is set on the map-chip.

[striky1]

@frederikschubert oh, u are right! Thank you so much ;)

[rivernews]

Just if someone's wondering the same issue - even wrapping up <mat-chip> by <mat-chip-list> still won't apply theme styling e.g. typography.

It turns out that you will need to again wrap the whole thing up by something else like <mat-card-content>.

If you don't want to use chips within a card, you can wrap it up by <mat-form-field>. But then there's an unwanted underline under the chips. You can eliminate it by doing:

mat-form-field.mat-form-field .mat-form-field-underline {
    display: none;
}

For applying colors to chips like primary/accent/warn, as @frederikschubert mentioned, the selected property does the work.

[andreElrico]

I have just encountered this "bug"/"design flaw". I was about to write an issue:

• Here is a STACKBLITZ
• In stackblitz look at the solution in the comment.

Workaround:

• place an empty <mat-chip-list></mat-chip-list> somewhere in your template. Then you can use mat-chips as stand-alones.

[JorgeMCSilva]

Just spent a few hours today chasing this issue down. This should move up a bit in priority, this is poor design.

@andreElrico Thanks, had to place a random mat-chip-list in a template for everything to work.

[baci5190]

I have just encountered this "bug"/"design flaw". I was about to write an issue:

• Here is a STACKBLITZ
• In stackblitz look at the solution in the comment.

Workaround:

• place an empty <mat-chip-list></mat-chip-list> somewhere in your template. Then you can use mat-chips as stand-alones.

Thanks m8... did this too...
They really dropped the ball on this one

[yuwu9145]

any plan to fix it in future release?

[AJHanekom]

You can always apply typography with class="mat-typography"

[MithrilMan]

I've created a gist to show my fix that may be an inspiration for people who wants more chip features: https://gist.github.com/MithrilMan/46de5430df3f5945f68e3e1e64d46a18

My need was to have a kind of bootstrap badge implementation (so a chip that just surround text with the same aspect of chip, without ripple)

I'll post code here too... I started recently using angular so I don't know if what I did may contains some DON'T, so in case let me know, here the code:

import { Component, OnInit, Input, AfterViewInit, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
    selector: 'chip',
    template: `
<ng-template #fixTemplate>
   <!--ugly fix for chips, add an hidden mat-chip-list to be able to add mat-chip without including them in the list-->
   <mat-chip-list style="display:none" id="chip-fix" disabled></mat-chip-list>
</ng-template>
<ng-container #fixContainer></ng-container>
<ng-content></ng-content>
`,
    host: {
        class: 'mat-chip mat-chip-selected mat-standard-chip ',
        '[class.mat-accent]': 'color=="accent"',
        '[class.mat-primary]': 'color=="primary"',
        '[class.mat-warn]': 'color=="warn"'
    }
})
export class ChipComponent implements OnInit {
    @Input() color: string;

    @ViewChild('fixContainer', { read: ViewContainerRef, static: true })
    chipFix: ViewContainerRef;

    @ViewChild('fixTemplate', { read: TemplateRef, static: true })
    fixTemplate: TemplateRef<null>;

    ngOnInit(): void {
        if (!document.getElementById("chip-fix")) {
            this.chipFix.createEmbeddedView(this.fixTemplate);
        }
    }
}

(basically I borrowed some material classes, but to have them all we need the mat-chip-list so I inject one if the page doesn't have it)

gist https://gist.github.com/MithrilMan/46de5430df3f5945f68e3e1e64d46a18

note: I preserved the ability to specify a material color
<chip color="primary">My Primary Chip</chip>

[shadyabouelmakarem]

2 years passed and still no fix! This is really weird, it needs some attention.

[pavankjadda]

I still can't believe this issue is open after 2 years

[lorenzocovarrubiasjr]

Having the same issue, any update?

[am-awais]

this needs to be resolved ASAP, I mean its 2020 and Angular material bugs still exists :(

[Frankkwizera]

Hey
any update on this issue?!