Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 48894ad

Browse filesBrowse files
authored
fix(multiple): use DI token for tag name (#30892)
Reads the tag name through DI, instead of going through the DOM which should be more SSR-friendly.
1 parent 357cfd3 commit 48894ad
Copy full SHA for 48894ad

File tree

Expand file treeCollapse file tree

3 files changed

+13
-6
lines changed
Filter options
Expand file treeCollapse file tree

3 files changed

+13
-6
lines changed

‎src/cdk-experimental/combobox/combobox.ts

Copy file name to clipboardExpand all lines: src/cdk-experimental/combobox/combobox.ts
+4-2Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
Directive,
2424
ElementRef,
2525
EventEmitter,
26+
HOST_TAG_NAME,
2627
InjectionToken,
2728
Injector,
2829
Input,
@@ -60,6 +61,7 @@ export const CDK_COMBOBOX = new InjectionToken<CdkCombobox>('CDK_COMBOBOX');
6061
providers: [{provide: CDK_COMBOBOX, useExisting: CdkCombobox}],
6162
})
6263
export class CdkCombobox<T = unknown> implements OnDestroy {
64+
private readonly _tagName = inject(HOST_TAG_NAME);
6365
private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
6466
private readonly _overlay = inject(Overlay);
6567
protected readonly _viewContainerRef = inject(ViewContainerRef);
@@ -245,8 +247,8 @@ export class CdkCombobox<T = unknown> implements OnDestroy {
245247

246248
private _isTextTrigger() {
247249
// TODO: Should check if the trigger is contenteditable.
248-
const tagName = this._elementRef.nativeElement.tagName.toLowerCase();
249-
return tagName === 'input' || tagName === 'textarea' ? true : false;
250+
const tagName = this._tagName.toLowerCase();
251+
return tagName === 'input' || tagName === 'textarea';
250252
}
251253

252254
private _getOverlayConfig() {

‎src/material/badge/badge.ts

Copy file name to clipboardExpand all lines: src/material/badge/badge.ts
+5-1Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
OnInit,
2222
Renderer2,
2323
ViewEncapsulation,
24+
HOST_TAG_NAME,
2425
} from '@angular/core';
2526
import {_animationsDisabled, ThemePalette} from '../core';
2627
import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
@@ -156,15 +157,18 @@ export class MatBadge implements OnInit, OnDestroy {
156157

157158
if (typeof ngDevMode === 'undefined' || ngDevMode) {
158159
const nativeElement = this._elementRef.nativeElement;
160+
159161
if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
160162
throw Error('matBadge must be attached to an element node.');
161163
}
162164

165+
const tagName = inject(HOST_TAG_NAME);
166+
163167
// Heads-up for developers to avoid putting matBadge on <mat-icon>
164168
// as it is aria-hidden by default docs mention this at:
165169
// https://material.angular.io/components/badge/overview#accessibility
166170
if (
167-
nativeElement.tagName.toLowerCase() === 'mat-icon' &&
171+
tagName.toLowerCase() === 'mat-icon' &&
168172
nativeElement.getAttribute('aria-hidden') === 'true'
169173
) {
170174
console.warn(

‎src/material/chips/chip.ts

Copy file name to clipboardExpand all lines: src/material/chips/chip.ts
+4-3Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
DoCheck,
2222
ElementRef,
2323
EventEmitter,
24+
HOST_TAG_NAME,
2425
Injector,
2526
Input,
2627
NgZone,
@@ -90,6 +91,7 @@ export interface MatChipEvent {
9091
export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy {
9192
_changeDetectorRef = inject(ChangeDetectorRef);
9293
_elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
94+
private readonly _tagName = inject(HOST_TAG_NAME);
9395
protected _ngZone = inject(NgZone);
9496
private _focusMonitor = inject(FocusMonitor);
9597
private _globalRippleOptions = inject<RippleGlobalOptions>(MAT_RIPPLE_GLOBAL_OPTIONS, {
@@ -256,10 +258,9 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
256258
ngOnInit() {
257259
// This check needs to happen in `ngOnInit` so the overridden value of
258260
// `basicChipAttrName` coming from base classes can be picked up.
259-
const element = this._elementRef.nativeElement;
260261
this._isBasicChip =
261-
element.hasAttribute(this.basicChipAttrName) ||
262-
element.tagName.toLowerCase() === this.basicChipAttrName;
262+
this._elementRef.nativeElement.hasAttribute(this.basicChipAttrName) ||
263+
this._tagName.toLowerCase() === this.basicChipAttrName;
263264
}
264265

265266
ngAfterViewInit() {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.