Flex-layout: [solved] Custom breakpoints not working after upgrading to Angular 8

Created on 29 May 2019 · 9Comments · Source: angular/flex-layout

Bug Report

Hello. ngClass and ngStyle are not working when used with custom breakpoints after upgrading angular version from 7 to 8.

What is the expected behavior?

ngClass and ngStyle should be working ( when used with custom breakpoints ) as they are working in angular version 7

What is the current behavior?

an error is thrown when trying to use one of these directives with a custom defined breakpoint
error message : (No provider for NgClassImpl!)

What are the steps to reproduce?

minimal StackBlitz version:
https://stackblitz.com/github/Saied-Za/Angular-FlexLayout

P2 docs

Source

ghost

👍2

Most helpful comment

Ok, I know why this is happening, and it's very much due to a lack of documentation on our part.

When Angular v8 came out, they changed the internal API for NgClass and NgStyle, which Angular Layout extends. We patched this in our own directives, but we couldn't do this for the base directive that's extended for custom breakpoints. We _do_ export a provider for both classes to patch this behavior. To resolve this issue, do the following:

import {Directive} from '@angular/core';
import {LayoutNgClassImplProvider, ClassDirective} from '@angular/flex-layout';

@Directive({selector, inputs, providers: [LayoutNgClassImplProvider]})
export class MyCustomDirective extends ClassDirective {
  ...
}

CaerusKaru on 30 May 2019

👍7

All 9 comments

Ok, I know why this is happening, and it's very much due to a lack of documentation on our part.

import {Directive} from '@angular/core';
import {LayoutNgClassImplProvider, ClassDirective} from '@angular/flex-layout';

@Directive({selector, inputs, providers: [LayoutNgClassImplProvider]})
export class MyCustomDirective extends ClassDirective {
  ...
}

CaerusKaru on 30 May 2019

👍7

Thanks for quick response.

ghost on 30 May 2019

I’m going to keep this issue open for people with the same problem, at least until we find a way to document this.

CaerusKaru on 30 May 2019

Thanks for to keep this issue open!!

CristianPumaES6 on 6 Jun 2019

😄1

I had the same issue but your suggestion helped!

SerkanSipahi on 1 Jul 2019

I have kind a same issue in Angular 8.
I use in my custom-component.ts

constructor(@Self ngClass: NgClass)

as injection to manually set classes on the host component and run into the same runtime error (No provider for NgClassImpl). I implemented a custom directive as you advised, but same error.

What i did wrong? Thanks!

wlr on 17 Jul 2019

@wlr

providers: [
  {
    provide: ɵNgClassImpl,
    useClass: ɵNgClassR2Impl,
  },
],

and then in component

constructor(@Self() @Optional() ngClassInstance: NgClass, ngClassDelegate: ɵNgClassImpl) {
  this._ngClass = ngClassInstance || new NgClass(ngClassDelegate);
}