[v5.2.5] Error when using mixinColor

[LayZeeDK]

Bug, feature request, or proposal:

When using the mixinColor like it is used in MatToolbar, my browsers throw errors.

What is the expected behavior?

No errors.

What is the current behavior?

When I use mixinColor like in MatToolbar, I get these errors when running my app in AOT (I also tried JIT):

Google Chrome 64-bit version 66.0 on Windows:

my-material.component.html:5 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at MyMaterialComponent.set [as color] (core.es5.js:277)
    at updateProp (core.js:12661)
    at checkAndUpdateDirectiveInline (core.js:12368)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (my-material.component.html:5)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)

Firefox Quantum 64-bit version 59.0.2 on Windows:

Error: this._elementRef is undefined
Error: cyclic object value

Edge version 16.16299:

ERROR TypeError: Unable to get property 'nativeElement' of undefined or null reference
ERROR TypeError: Circular reference in value argument not supported

What are the steps to reproduce?

Here's a StackBlitz illustrating the problem and throwing the error:
https://stackblitz.com/edit/angular-material-theme-palette?file=app/ui/my-material/my-material.component.ts

Component model

import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  ViewEncapsulation,
} from '@angular/core';
import { CanColor, mixinColor } from '@angular/material';

export class MyMaterialBase {
    constructor(public _elementRef: ElementRef) { }
}

export const _MyMaterialMixinBase = mixinColor(MyMaterialBase);

@Component({
    selector: 'my-material',
    styleUrls: ['my-material.component.scss'],
    templateUrl: 'my-material.component.html',
    host: {
        'class': 'my-material',
    },
    inputs: ['color'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    preserveWhitespaces: false,
})
export class MyMaterialComponent
extends _MyMaterialMixinBase
implements CanColor {}

What is the use-case or motivation for changing an existing behavior?

Some documentation on using mixinColor would be nice.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular version 5.2.10
Angular Material version 5.2.5
TypeScript version 2.6.2 (when trying it out on localhost, I am not sure of StackBlitz)

Is there anything else we should know?

You are doing a great job!

[jelbourn]

You're missing the super call in the constructor

  constructor(elementRef: ElementRef) {
    super(elementRef);
  }

[LayZeeDK]

You're missing the super call in the constructor

Thank you for the support. Where is that snippet supposed to go?

The only constructor I have in my example is in MyMaterialBase. When I add the super call to it, TypeScript complains (see images).

[LayZeeDK]

Alright, so for some reason I have to have an actual constructor in my component class that injects an ElementRef and passes that to the base class constructor like this:

@Component({
    selector: 'my-material',
    styleUrls: ['my-material.component.scss'],
    templateUrl: 'my-material.component.html',
    host: {
        'class': 'my-material',
    },
    inputs: ['color'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    preserveWhitespaces: false,
})
export class MyMaterialComponent
extends _MyMaterialMixinBase
implements CanColor {
  constructor(
    elementRef: ElementRef) {
    super(elementRef);
  }
}

My StackBlitz has been updated to reflect this change.

Thank you, Jeremy!

[bardiel]

Out of curiosity, might this angular/tsickle#760 be the reason why an explicit constructor is required in this case?

[jelbourn]

It's because the component has a dynamic base class due to the mixin, which Angular can't resolve statically, so it doesn't know do inject the dependencies of the base class.

FYI, the mixins aren't intended to be a public API (that's why they're undocumented).

[LayZeeDK]

FYI, the mixins aren't intended to be a public API (that's why they're undocumented).

Why are they exported to the @angular/material and @angular/material/core packages through the public-api.ts files then?

[jelbourn]

Since people can use specific imports (e.g. @angular/material/button), the mixins have to be exported publicly from core; TypeScript unfortunately doesn't have a good way of doign something like "package-internal" visibility.

[LayZeeDK]

Oh, I was wondering why e.g. MatToolbarBase and _MatToolbarMixinBase were exported. It seems like this is related.

Anyways, the mixins are handy for building custom components. I will keep in mind that the mixins may be moved or get breaking changes without a warning.

Thank you for your time and effort.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}