fix(material/form-field): allow ng-container to be used as prefix/suffix (#26127)

* fix(material/form-field): allow ng-container to be used as text prefix/suffix

* fixup! fix(material/form-field): allow ng-container to be used as text prefix/suffix

(cherry picked from commit b3da94a)

Author: mmalerba

src/material/form-field/directives/prefix.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, InjectionToken} from '@angular/core';
+import {Directive, InjectionToken, Input} from '@angular/core';
 
 /**
  * Injection token that can be used to reference instances of `MatPrefix`. It serves as
@@ -21,9 +21,10 @@ export const MAT_PREFIX = new InjectionToken<MatPrefix>('MatPrefix');
   providers: [{provide: MAT_PREFIX, useExisting: MatPrefix}],
 })
 export class MatPrefix {
-  _isText = false;
-
-  constructor(elementRef: ElementRef) {
-    this._isText = elementRef.nativeElement.hasAttribute('matTextPrefix');
+  @Input('matTextPrefix')
+  set _isTextSelector(value: '') {
+    this._isText = true;
   }
+
+  _isText = false;
 }

src/material/form-field/directives/suffix.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, InjectionToken} from '@angular/core';
+import {Directive, InjectionToken, Input} from '@angular/core';
 
 /**
  * Injection token that can be used to reference instances of `MatSuffix`. It serves as
@@ -21,9 +21,10 @@ export const MAT_SUFFIX = new InjectionToken<MatSuffix>('MatSuffix');
   providers: [{provide: MAT_SUFFIX, useExisting: MatSuffix}],
 })
 export class MatSuffix {
-  _isText = false;
-
-  constructor(elementRef: ElementRef) {
-    this._isText = elementRef.nativeElement.hasAttribute('matTextSuffix');
+  @Input('matTextSuffix')
+  set _isTextSelector(value: '') {
+    this._isText = true;
   }
+
+  _isText = false;
 }

src/material/input/input.spec.ts

@@ -784,6 +784,21 @@ describe('MatMdcInput without forms', () => {
     expect(iconSuffixEl.nativeElement.innerText.trim()).toEqual('favorite');
   }));
 
+  it('should allow ng-container as prefix and suffix', () => {
+    const fixture = createComponent(InputWithNgContainerPrefixAndSuffix);
+    fixture.detectChanges();
+
+    const textPrefixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-text-prefix'))!;
+    const textSuffixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-text-suffix'))!;
+    const iconPrefixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-icon-prefix'))!;
+    const iconSuffixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-icon-suffix'))!;
+
+    expect(textPrefixEl.nativeElement.innerText.trim()).toEqual('text-prefix');
+    expect(textSuffixEl.nativeElement.innerText.trim()).toEqual('text-suffix');
+    expect(iconPrefixEl.nativeElement.innerText.trim()).toEqual('icon-prefix');
+    expect(iconSuffixEl.nativeElement.innerText.trim()).toEqual('icon-suffix');
+  });
+
   it('should update empty class when value changes programmatically and OnPush', fakeAsync(() => {
     let fixture = createComponent(MatInputOnPush);
     fixture.detectChanges();
@@ -2064,3 +2079,16 @@ class MatInputWithRequiredFormControl {
   `,
 })
 class MatInputSimple {}
+
+@Component({
+  template: `
+    <mat-form-field>
+      <ng-container matIconPrefix>icon-prefix</ng-container>
+      <ng-container matTextPrefix>text-prefix</ng-container>
+      <input matInput>
+      <ng-container matTextSuffix>text-suffix</ng-container>
+      <ng-container matIconSuffix>icon-suffix</ng-container>
+    </mat-form-field>
+  `,
+})
+class InputWithNgContainerPrefixAndSuffix {}

tools/public_api_guard/material/form-field.md

@@ -223,22 +223,24 @@ export class MatLabel {
 
 // @public
 export class MatPrefix {
-    constructor(elementRef: ElementRef);
     // (undocumented)
     _isText: boolean;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPrefix, "[matPrefix], [matIconPrefix], [matTextPrefix]", never, {}, {}, never, never, false, never>;
+    set _isTextSelector(value: '');
+    // (undocumented)
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPrefix, "[matPrefix], [matIconPrefix], [matTextPrefix]", never, { "_isTextSelector": "matTextPrefix"; }, {}, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPrefix, never>;
 }
 
 // @public
 export class MatSuffix {
-    constructor(elementRef: ElementRef);
     // (undocumented)
     _isText: boolean;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSuffix, "[matSuffix], [matIconSuffix], [matTextSuffix]", never, {}, {}, never, never, false, never>;
+    set _isTextSelector(value: '');
+    // (undocumented)
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSuffix, "[matSuffix], [matIconSuffix], [matTextSuffix]", never, { "_isTextSelector": "matTextSuffix"; }, {}, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSuffix, never>;
 }