ngClass.alias syntax no longer functional in Angular 17

[Mr-Vinti]

Bug Report

What is the expected behavior?

https://github.com/angular/flex-layout/wiki/ngClass-API#responsive-features using ngClass.xs for example to only apply conditional classes for specific resolution breakpoints

What is the current behavior?

Using this syntax will cause a console error and the component will not render ERROR TypeError: this._renderer.addClass is not a function at common.mjs:2744:36 at Array.forEach () at NgClass._toggleClass (common.mjs:2742:36) at NgClass._applyStateDiff (common.mjs:2720:22) at NgClass.ngDoCheck (common.mjs:2700:14) at DefaultClassDirective.updateWithValue (ngx-flexible-layout-extended.mjs:42:30) at MediaMarshaller.updateElement (ngx-flexible-layout-core.mjs:1355:17) at MediaMarshaller.setValue (ngx-flexible-layout-core.mjs:1297:18) at DefaultClassDirective.setValue (ngx-flexible-layout-core.mjs:1594:22) at set klass (ngx-flexible-layout-extended.mjs:27:14)

The following code block is throwing the exception:

_toggleClass(klass, enabled) {
        if (ngDevMode) {
            if (typeof klass !== 'string') {
                throw new Error(`NgClass can only toggle CSS classes expressed as strings, got ${ɵstringify(klass)}`);
            }
        }
        klass = klass.trim();
        if (klass.length > 0) {
            klass.split(WS_REGEXP).forEach((klass) => {
                if (enabled) {
                    this._renderer.addClass(this._ngEl.nativeElement, klass);
                }
                else {
                    this._renderer.removeClass(this._ngEl.nativeElement, klass);
                }
            });
        }
    }

Specifically, at line: this._renderer.addClass(this._ngEl.nativeElement, klass);

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

• StackBlitz starter using latest npm nightly release: https://stackblitz.com/edit/stackblitz-starters-ej6w3q

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

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

Angular 17

Is there anything else we should know?

[jtc10005]

i encountered this for the first time in the angular 18 upgrade. I made some changes for this based on what the angular team has done but I am unsure if there will be any impacts.

[Venipa]

i encountered this for the first time in the angular 18 upgrade. I made some changes for this based on what the angular team has done but I am unsure if there will be any impacts.

currently in angular v17 experiencing this issue

[Venipa]

not experiencing this issue anymore

@jtc10005