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

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

Open wiedikerli opened this issue 6 years ago • 26 comments

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?

Feb 15 '18 12:02 wiedikerli

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

Feb 15 '18 18:02 donroyco

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.

Feb 15 '18 23:02 josephperrott

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...

Jun 14 '18 07:06 Manostion

Something new about that? Still not working. Thank you

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

Aug 07 '18 06:08 striky1

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

Aug 07 '18 16:08 jelbourn

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.

Aug 07 '18 16:08 striky1

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

Aug 14 '18 05:08 frederikschubert

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

Aug 14 '18 08:08 striky1

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.

Sep 16 '18 15:09 rivernews

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.

Apr 05 '19 14:04 andreElrico

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.

May 14 '19 13:05 JorgeMCSilva

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

Jun 25 '19 03:06 baci5190

any plan to fix it in future release?

Aug 30 '19 01:08 yuwu9145

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

Nov 19 '19 09:11 AJHanekom

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>

Dec 08 '19 03:12 MithrilMan

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

Apr 30 '20 12:04 shadyabouelmakarem

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

May 08 '20 21:05 pavankjadda

Having the same issue, any update?

Sep 17 '20 04:09 lorenzocovarrubiasjr

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

Jan 25 '21 11:01 am-awais

Hey any update on this issue?!

Mar 23 '21 19:03 Frankkwizera

Facing the same issue, adding <mat-chip-list></mat-chip-list> in template fixed it however it's a real time waste for a lot of people who encounter this problem for the first time. If it's not gonna be fixed then I will suggest it will be better to at least add an error message about <mat-chip-list> being a required parent for mat-chip