Since RC.11 Class HostBinding throws an error

[Benny739]

Since RC.11 Class HostBinding throws an error in dev mode (only in dev mode).

core.js:5816 ERROR Error: ASSERTION ERROR: Expecting an array [Expected=> true == false <=Actual]
at throwError (core.js:1311)
at assertEqual (core.js:1260)
at _arrayIndexOfSorted (core.js:1614)
at keyValueArrayIndexOf (core.js:1576)
at keyValueArrayGet (core.js:1558)
at findStylingValue (core.js:23794)
at updateStyling (core.js:23727)
at checkStylingProperty (core.js:23201)
at Module.ɵɵclassProp (core.js:23089)
at MatIcon_HostBindings (icon.js:1304)

Prod mode is working finde, looks like some test is not working properly.

[pkozlowski-opensource]

@Benny739 could you please:

• try with the latest RC (rc.13 at the time of writing);
• provide a reproduction scenario if you still can see the problem with rc.13?

Thank you!

[Benny739]

It's also happing with RC13.
The error is only happening when rendered through ngFor.

Edit:
Just figured out, the error is only thrown with mat-icon tag. With an i tag it's working fine.

import { Directive, HostBinding, Input } from '@angular/core';

@Directive({
    selector: '[appFileIcon]'
})
export class FileIconDirective {

    private iconClass = 'fas fa-file-alt';

    constructor() { }

    @Input('appFileIcon')
    @HostBinding('class')
    get elementClass(): string {
        return this.iconClass;
    }
    set elementClass(type: string) {
        this.iconClass = `fas ${this.getFontAwesomeIconFromMIME(type)}`;
    }

    getFontAwesomeIconFromMIME(mimeType: string) {
        // List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
        const iconClasses = {
            // Media
            image: 'fa-file-image',
            audio: 'fa-file-audio',
            video: 'fa-file-video',
            // Documents
            'application/pdf': 'fa-file-pdf',
            'application/msword': 'fa-file-word',
            'application/vnd.ms-word': 'fa-file-word',
            'application/vnd.oasis.opendocument.text': 'fa-file-word',
            'application/vnd.openxmlformatsfficedocument.wordprocessingml':
                'fa-file-word',
            'application/vnd.ms-excel': 'fa-file-excel',
            'application/vnd.openxmlformatsfficedocument.spreadsheetml':
                'fa-file-excel',
            'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel',
            'application/vnd.ms-powerpoint': 'fa-file-powerpoint',
            'application/vnd.openxmlformatsfficedocument.presentationml':
                'fa-file-powerpoint',
            'application/vnd.oasis.opendocument.presentation': 'fa-file-powerpoint',
            'text/plain': 'fa-file-text',
            'text/html': 'fa-file-code',
            'application/json': 'fa-file-code',
            // Archives
            'application/gzip': 'fa-file-archive',
            'application/zip': 'fa-file-archive'
        };

        for (const key of Object.keys(iconClasses)) {
            if (mimeType.search(key) === 0) {
                // Found it
                return iconClasses[key];
            }
        }
        return 'fa-file-alt';

    }

}

export class AppComponent {

  el2 = [
    'application/pdf',
    'application/msword',
    'application/pdf',
    'application/pdf',
  ];

}

<ul>

// not working
    <li *ngFor="let el of el2">
        <mat-icon [appFileIcon]="el"></mat-icon>
    </li>

//working
  <li *ngFor="let el of el2">
        <i [appFileIcon]="el"></i>
    </li>
</ul>

The error is only happening when rendered through ngFor.

[pkozlowski-opensource]

@Benny739 thnx for the info regarding rc.13 and code snippet(s). What would be immensely helpful, though, is a narrowed-down reproduce scenario that we could run (a minimal git repository). It might be hard to investigate / know that we are fixing the right bug based just on the code snippets provided.

[alexzuza]

I reproduced the issue:

import { Component, VERSION, Input, HostBinding, Directive } from '@angular/core';

@Component({
  selector: 'app-icon',
  template: 'icon',
  host: {
    '[class.mat-icon-inline]': 'inline',
  },
})
export class IconComponent {}
 
@Directive({
  selector: '[appFileIcon]',
})
export class FileIconDirective {
  @HostBinding('class') elementClass;
}


@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let item of [1,2]">
    <app-icon appFileIcon></app-icon>
  </div>
  `
})
export class AppComponent {}

DEMO https://ng-run.com/edit/G9pVPW5M9g6fNoOnZuWC?open=app%2Fapp.component.ts&aot=true

[mhevery]

@alexzuza thank you for the repro. It helped a lot!

[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.}