diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
index af0ebcaf055a..b52cf0511189 100644
--- a/src/dev-app/chips/chips-demo.html
+++ b/src/dev-app/chips/chips-demo.html
@@ -19,6 +19,19 @@
Unstyled
Basic Chip 3
+
+ Basic Chip Option 1
+ Basic Chip Option 2
+ Basic Chip Option 3
+
+
+
+ Basic Chip Row 1
+ Basic Chip Row 2
+ Basic Chip Row 3
+
+
+
With avatar, icons, and color
diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss
index b07f18078108..022cad5fe239 100644
--- a/src/dev-app/chips/chips-demo.scss
+++ b/src/dev-app/chips/chips-demo.scss
@@ -17,7 +17,7 @@
}
}
- mat-basic-chip {
+ .mat-mdc-basic-chip {
margin: auto 10px;
}
diff --git a/src/material/chips/chip-option.ts b/src/material/chips/chip-option.ts
index b47e0cde7fec..49a5df9c683d 100644
--- a/src/material/chips/chip-option.ts
+++ b/src/material/chips/chip-option.ts
@@ -44,8 +44,10 @@ export class MatChipSelectionChange {
styleUrls: ['chip.css'],
inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'],
host: {
- 'class':
- 'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter mdc-evolution-chip--selectable',
+ 'class': 'mat-mdc-chip mat-mdc-chip-option',
+ '[class.mdc-evolution-chip]': '!_isBasicChip',
+ '[class.mdc-evolution-chip--filter]': '!_isBasicChip',
+ '[class.mdc-evolution-chip--selectable]': '!_isBasicChip',
'[class.mat-mdc-chip-selected]': 'selected',
'[class.mat-mdc-chip-multiple]': '_chipListMultiple',
'[class.mat-mdc-chip-disabled]': 'disabled',
@@ -141,7 +143,8 @@ export class MatChipOption extends MatChip implements OnInit {
@Output() readonly selectionChange: EventEmitter =
new EventEmitter();
- ngOnInit() {
+ override ngOnInit() {
+ super.ngOnInit();
this.role = 'presentation';
}
diff --git a/src/material/chips/chip-set.ts b/src/material/chips/chip-set.ts
index 484957676dc3..db012fd23bef 100644
--- a/src/material/chips/chip-set.ts
+++ b/src/material/chips/chip-set.ts
@@ -222,8 +222,7 @@ export class MatChipSet
let currentElement = event.target as HTMLElement | null;
while (currentElement && currentElement !== this._elementRef.nativeElement) {
- // Null check the classList, because IE and Edge don't support it on all elements.
- if (currentElement.classList && currentElement.classList.contains('mdc-evolution-chip')) {
+ if (currentElement.classList.contains('mat-mdc-chip')) {
return true;
}
currentElement = currentElement.parentElement;
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index f56882005299..c475a21c1db3 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -167,6 +167,12 @@
}
}
+// Keeps basic listbox chips looking consistent with the other variations. Listbox chips don't
+// inherit the font size, because they wrap the label in a `button` that has user agent styles.
+.mat-mdc-basic-chip .mdc-evolution-chip__action--primary {
+ font: inherit;
+}
+
// MDC's focus and hover indication is handled through their ripple which we currently
// don't use due to size concerns so we have to re-implement it ourselves.
.mat-mdc-chip-focus-overlay {
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
index 1329f71cbbe6..49651eaad59f 100644
--- a/src/material/chips/chip.ts
+++ b/src/material/chips/chip.ts
@@ -28,6 +28,7 @@ import {
Attribute,
ContentChildren,
QueryList,
+ OnInit,
} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import {
@@ -116,6 +117,7 @@ const _MatChipMixinBase = mixinTabIndex(
export class MatChip
extends _MatChipMixinBase
implements
+ OnInit,
AfterViewInit,
AfterContentInit,
CanColor,
@@ -136,7 +138,7 @@ export class MatChip
readonly _onBlur = new Subject();
/** Whether this chip is a basic (unstyled) chip. */
- readonly _isBasicChip: boolean;
+ _isBasicChip: boolean;
/** Role for the root of the chip. */
@Input() role: string | null = null;
@@ -263,18 +265,23 @@ export class MatChip
@Attribute('tabindex') tabIndex?: string,
) {
super(elementRef);
- const element = elementRef.nativeElement;
this._document = _document;
this._animationsDisabled = animationMode === 'NoopAnimations';
- this._isBasicChip =
- element.hasAttribute(this.basicChipAttrName) ||
- element.tagName.toLowerCase() === this.basicChipAttrName;
if (tabIndex != null) {
this.tabIndex = parseInt(tabIndex) ?? this.defaultTabIndex;
}
this._monitorFocus();
}
+ ngOnInit() {
+ // This check needs to happen in `ngOnInit` so the overridden value of
+ // `basicChipAttrName` coming from base classes can be picked up.
+ const element = this._elementRef.nativeElement;
+ this._isBasicChip =
+ element.hasAttribute(this.basicChipAttrName) ||
+ element.tagName.toLowerCase() === this.basicChipAttrName;
+ }
+
ngAfterViewInit() {
this._textElement = this._elementRef.nativeElement.querySelector('.mat-mdc-chip-action-label')!;
diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md
index 83cee41db08b..318e8659fb9d 100644
--- a/tools/public_api_guard/material/chips.md
+++ b/tools/public_api_guard/material/chips.md
@@ -61,7 +61,7 @@ export const MAT_CHIP_TRAILING_ICON: InjectionToken;
export const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken;
// @public
-export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
+export class MatChip extends _MatChipMixinBase implements OnInit, AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
protected _allLeadingIcons: QueryList;
protected _allRemoveIcons: QueryList;
@@ -89,7 +89,7 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterCo
// (undocumented)
protected _highlighted: boolean;
id: string;
- readonly _isBasicChip: boolean;
+ _isBasicChip: boolean;
readonly _isRippleCentered = false;
_isRippleDisabled(): boolean;
leadingIcon: MatChipAvatar;
@@ -100,6 +100,8 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterCo
// (undocumented)
ngOnDestroy(): void;
// (undocumented)
+ ngOnInit(): void;
+ // (undocumented)
protected _ngZone: NgZone;
readonly _onBlur: Subject;
readonly _onFocus: Subject;