components: BUG: mat-chip without mat-chip-list has no styles
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?
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 51
- Comments: 28 (5 by maintainers)
I have just encountered this “bug”/“design flaw”. I was about to write an issue:
Workaround:
<mat-chip-list></mat-chip-list>somewhere in your template. Then you can usemat-chipsas stand-alones.Weird thing is, when adding a
mat-chip-list, it works correctly for all mat-chips.2 years passed and still no fix! This is really weird, it needs some attention.
I still can’t believe this issue is open after 2 years
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 format-chipBug sitting around for almost 4 years. Not sure if I should be impressed or disappointed.
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.
Will be fixed by https://github.com/angular/components/pull/23931.
this needs to be resolved ASAP, I mean its 2020 and Angular material bugs still exists 😦
This is happening because the
mat-chipis a directive and without a view does not load styles or styleUrls. Oncemat-chip-listis loaded, the chips styling is loaded and will be applied to all things it matches via css.2023-10-11 and still not fixed
The irony of myself not fixing open source code is not lost on me.
Is this still a thing after all these years omg 🗡️
Having the same issue, any update?
Thanks m8… did this too… They really dropped the ball on this one
@striky1 The colors only appear when the
selectedproperty is set on themap-chip.As far as I can tell this is fixed. See https://stackblitz.com/edit/oekksb?file=src%2Fexample%2Fchips-overview-example.html. The issue can be reopened if there’s a repro.
2022-07-22 and still not fixed