diff --git a/goldens/size-test.yaml b/goldens/size-test.yaml
index de23533f915e..b402f11a24dc 100644
--- a/goldens/size-test.yaml
+++ b/goldens/size-test.yaml
@@ -1,7 +1,9 @@
cdk/drag-drop/all-directives: 153063
cdk/drag-drop/basic: 150321
+material-experimental/mdc-chips/basic: 147613
material/autocomplete/without-optgroup: 208091
material/button-toggle/standalone: 119400
+material/chips/basic: 162733
material/datepicker/range-picker/without-form-field: 330101
material/expansion/without-accordion: 130562
material/list/nav-list: 130473
diff --git a/integration/size-test/material-experimental/mdc-chips/BUILD.bazel b/integration/size-test/material-experimental/mdc-chips/BUILD.bazel
new file mode 100644
index 000000000000..e0da7773f1a9
--- /dev/null
+++ b/integration/size-test/material-experimental/mdc-chips/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+ name = "basic",
+ file = "basic.ts",
+ deps = ["//src/material-experimental/mdc-chips"],
+)
diff --git a/integration/size-test/material-experimental/mdc-chips/basic.ts b/integration/size-test/material-experimental/mdc-chips/basic.ts
new file mode 100644
index 000000000000..bf44c255ee35
--- /dev/null
+++ b/integration/size-test/material-experimental/mdc-chips/basic.ts
@@ -0,0 +1,25 @@
+import {Component, NgModule} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
+
+/**
+ * Basic component using `MatChipSet` and `MatChip`. Other supported parts of the
+ * chip module such as `MatChipRemove` are not used and should be tree-shaken away.
+ */
+@Component({
+ template: `
+
+ First
+
+ `,
+})
+export class TestComponent {}
+
+@NgModule({
+ imports: [MatChipsModule],
+ declarations: [TestComponent],
+ bootstrap: [TestComponent],
+})
+export class AppModule {}
+
+platformBrowser().bootstrapModule(AppModule);
diff --git a/integration/size-test/material/chips/BUILD.bazel b/integration/size-test/material/chips/BUILD.bazel
new file mode 100644
index 000000000000..4a2dc13e56c0
--- /dev/null
+++ b/integration/size-test/material/chips/BUILD.bazel
@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+ name = "basic",
+ file = "basic.ts",
+ deps = ["//src/material/chips"],
+)
diff --git a/integration/size-test/material/chips/basic.ts b/integration/size-test/material/chips/basic.ts
new file mode 100644
index 000000000000..41cd96ab7096
--- /dev/null
+++ b/integration/size-test/material/chips/basic.ts
@@ -0,0 +1,25 @@
+import {Component, NgModule} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {MatChipsModule} from '@angular/material/chips';
+
+/**
+ * Basic component using `MatChipList` and `MatChip`. Other supported parts of the
+ * chip module such as `MatChipRemove` are not used and should be tree-shaken away.
+ */
+@Component({
+ template: `
+
+ First
+
+ `,
+})
+export class TestComponent {}
+
+@NgModule({
+ imports: [MatChipsModule],
+ declarations: [TestComponent],
+ bootstrap: [TestComponent],
+})
+export class AppModule {}
+
+platformBrowser().bootstrapModule(AppModule);
diff --git a/src/material-experimental/mdc-chips/chip-icons.ts b/src/material-experimental/mdc-chips/chip-icons.ts
index f46e90f8aff2..6788bb0b3c90 100644
--- a/src/material-experimental/mdc-chips/chip-icons.ts
+++ b/src/material-experimental/mdc-chips/chip-icons.ts
@@ -7,7 +7,7 @@
*/
import {BooleanInput} from '@angular/cdk/coercion';
-import {ChangeDetectorRef, Directive, ElementRef, OnDestroy} from '@angular/core';
+import {ChangeDetectorRef, Directive, ElementRef, InjectionToken, OnDestroy} from '@angular/core';
import {
CanDisable,
CanDisableCtor,
@@ -20,6 +20,13 @@ import {MDCChipTrailingActionAdapter, MDCChipTrailingActionFoundation} from '@ma
import {Subject} from 'rxjs';
+/**
+ * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
+ * alternative token to the actual `MatChipAvatar` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
+
/**
* Directive to add CSS classes to chip leading icon.
* @docs-private
@@ -29,7 +36,8 @@ import {Subject} from 'rxjs';
host: {
'class': 'mat-mdc-chip-avatar mdc-chip__icon mdc-chip__icon--leading',
'role': 'img'
- }
+ },
+ providers: [{provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar}],
})
export class MatChipAvatar {
constructor(private _changeDetectorRef: ChangeDetectorRef,
@@ -42,6 +50,14 @@ export class MatChipAvatar {
}
}
+/**
+ * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
+ * alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_CHIP_TRAILING_ICON =
+ new InjectionToken('MatChipTrailingIcon');
+
/**
* Directive to add CSS classes to and configure attributes for chip trailing icon.
* @docs-private
@@ -53,7 +69,8 @@ export class MatChipAvatar {
'mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
'tabindex': '-1',
'aria-hidden': 'true',
- }
+ },
+ providers: [{provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon}],
})
export class MatChipTrailingIcon implements OnDestroy {
private _foundation: MDCChipTrailingActionFoundation;
@@ -110,6 +127,13 @@ export class MatChipTrailingIcon implements OnDestroy {
}
}
+/**
+ * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
+ * alternative token to the actual `MatChipRemove` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_CHIP_REMOVE = new InjectionToken('MatChipRemove');
+
/**
* Boilerplate for applying mixins to MatChipRemove.
* @docs-private
@@ -154,7 +178,8 @@ const _MatChipRemoveMixinBase:
// We need to remove this explicitly, because it gets inherited from MatChipTrailingIcon.
'[attr.aria-hidden]': 'null',
- }
+ },
+ providers: [{provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove}],
})
export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable, HasTabIndex {
/**
diff --git a/src/material-experimental/mdc-chips/chip.ts b/src/material-experimental/mdc-chips/chip.ts
index 782ab568f510..9de75fe27d6e 100644
--- a/src/material-experimental/mdc-chips/chip.ts
+++ b/src/material-experimental/mdc-chips/chip.ts
@@ -47,7 +47,13 @@ import {numbers} from '@material/ripple';
import {SPACE, ENTER, hasModifierKey} from '@angular/cdk/keycodes';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
-import {MatChipAvatar, MatChipTrailingIcon, MatChipRemove} from './chip-icons';
+import {
+ MatChipAvatar,
+ MatChipTrailingIcon,
+ MatChipRemove,
+ MAT_CHIP_AVATAR,
+ MAT_CHIP_TRAILING_ICON, MAT_CHIP_REMOVE
+} from './chip-icons';
let uid = 0;
@@ -226,14 +232,17 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
/** Subject that emits when the component has been destroyed. */
protected _destroyed = new Subject();
+ // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
/** The chip's leading icon. */
- @ContentChild(MatChipAvatar) leadingIcon: MatChipAvatar;
+ @ContentChild(MAT_CHIP_AVATAR as any) leadingIcon: MatChipAvatar;
+ // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
/** The chip's trailing icon. */
- @ContentChild(MatChipTrailingIcon) trailingIcon: MatChipTrailingIcon;
+ @ContentChild(MAT_CHIP_TRAILING_ICON as any) trailingIcon: MatChipTrailingIcon;
+ // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
/** The chip's trailing remove icon. */
- @ContentChild(MatChipRemove) removeIcon: MatChipRemove;
+ @ContentChild(MAT_CHIP_REMOVE as any) removeIcon: MatChipRemove;
/** Reference to the MatRipple instance of the chip. */
@ViewChild(MatRipple) ripple: MatRipple;
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
index 89054b501f52..65e486c439d7 100644
--- a/src/material/chips/chip.ts
+++ b/src/material/chips/chip.ts
@@ -6,25 +6,25 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {DOCUMENT} from '@angular/common';
import {FocusableOption} from '@angular/cdk/a11y';
import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
import {BACKSPACE, DELETE, SPACE} from '@angular/cdk/keycodes';
import {Platform} from '@angular/cdk/platform';
+import {DOCUMENT} from '@angular/common';
import {
+ Attribute,
+ ChangeDetectorRef,
ContentChild,
Directive,
ElementRef,
EventEmitter,
- forwardRef,
Inject,
+ InjectionToken,
Input,
NgZone,
OnDestroy,
Optional,
Output,
- ChangeDetectorRef,
- Attribute,
} from '@angular/core';
import {
CanColor,
@@ -33,18 +33,18 @@ import {
CanDisableRippleCtor,
HasTabIndex,
HasTabIndexCtor,
- mixinTabIndex,
MAT_RIPPLE_GLOBAL_OPTIONS,
mixinColor,
mixinDisableRipple,
+ mixinTabIndex,
RippleConfig,
RippleGlobalOptions,
RippleRenderer,
RippleTarget,
} from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {Subject} from 'rxjs';
import {take} from 'rxjs/operators';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
/** Represents an event fired on an individual `mat-chip`. */
@@ -64,6 +64,27 @@ export class MatChipSelectionChange {
public isUserInput = false) { }
}
+/**
+ * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
+ * alternative token to the actual `MatChipRemove` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_CHIP_REMOVE = new InjectionToken('MatChipRemove');
+
+/**
+ * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
+ * alternative token to the actual `MatChipAvatar` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
+
+/**
+ * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
+ * alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+export const MAT_CHIP_TRAILING_ICON =
+ new InjectionToken('MatChipTrailingIcon');
// Boilerplate for applying mixins to MatChip.
/** @docs-private */
@@ -82,7 +103,8 @@ const _MatChipMixinBase: CanColorCtor & CanDisableRippleCtor &
*/
@Directive({
selector: 'mat-chip-avatar, [matChipAvatar]',
- host: {'class': 'mat-chip-avatar'}
+ host: {'class': 'mat-chip-avatar'},
+ providers: [{provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar}]
})
export class MatChipAvatar {}
@@ -92,10 +114,12 @@ export class MatChipAvatar {}
*/
@Directive({
selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
- host: {'class': 'mat-chip-trailing-icon'}
+ host: {'class': 'mat-chip-trailing-icon'},
+ providers: [{provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon}],
})
export class MatChipTrailingIcon {}
+
/**
* Material design styled Chip component. Used inside the MatChipList component.
*/
@@ -165,14 +189,17 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
/** Whether the chip list as a whole is disabled. */
_chipListDisabled: boolean = false;
+ // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
/** The chip avatar */
- @ContentChild(MatChipAvatar) avatar: MatChipAvatar;
+ @ContentChild(MAT_CHIP_AVATAR as any) avatar: MatChipAvatar;
+ // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
/** The chip's trailing icon. */
- @ContentChild(MatChipTrailingIcon) trailingIcon: MatChipTrailingIcon;
+ @ContentChild(MAT_CHIP_TRAILING_ICON as any) trailingIcon: MatChipTrailingIcon;
+ // TODO: Remove cast once https://github.com/angular/angular/pull/37506 is available.
/** The chip's remove toggler. */
- @ContentChild(forwardRef(() => MatChipRemove)) removeIcon: MatChipRemove;
+ @ContentChild(MAT_CHIP_REMOVE as any) removeIcon: MatChipRemove;
/** Whether the chip is selected. */
@Input()
@@ -429,7 +456,6 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
static ngAcceptInputType_disableRipple: BooleanInput;
}
-
/**
* Applies proper (click) support and adds styling for use with the Material Design "cancel" icon
* available at https://material.io/icons/#ic_cancel.
@@ -448,7 +474,8 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
host: {
'class': 'mat-chip-remove mat-chip-trailing-icon',
'(click)': '_handleClick($event)',
- }
+ },
+ providers: [{provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove}],
})
export class MatChipRemove {
constructor(
diff --git a/tools/public_api_guard/material/chips.d.ts b/tools/public_api_guard/material/chips.d.ts
index 31b434eca948..1ac0c6d338a8 100644
--- a/tools/public_api_guard/material/chips.d.ts
+++ b/tools/public_api_guard/material/chips.d.ts
@@ -1,3 +1,9 @@
+export declare const MAT_CHIP_AVATAR: InjectionToken;
+
+export declare const MAT_CHIP_REMOVE: InjectionToken;
+
+export declare const MAT_CHIP_TRAILING_ICON: InjectionToken;
+
export declare const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken;
export declare class MatChip extends _MatChipMixinBase implements FocusableOption, OnDestroy, CanColor, CanDisableRipple, RippleTarget, HasTabIndex {