Angular UpgradeModule cannot downgrade @Directive

Question

I am trying to work around not being able to downgrade an Angular 8 @Directive using UpgradeModule.

I have a nested angular material component that needs to hook into cdkScrollable. My hierarchy look likes this:

<div class="some-class-that-allows-scroll"> <-- angularjs scrollable component
  <mat-form-field></mat-form-field> <-- angular 8 component that needs cdkScrollable on parent

There is no way to downgrade the cdkScrollable directive to work in angularjs, IE

<div cdkScrollable class="some-class-that-allows-scroll"> <-- Will not work in angularjs template
  <mat-form-field></mat-form-field>

Since I cannot downgrade the cdkScrollable @directive I was trying to "wrap" that directive in a reusable angular 8 component, and then downgrade that component.

IE: Angular 8 component:

import { Component } from '@angular/core';

@Component({
  selector: 'scroll-wrapper',
  templateUrl: './scroll.component.html',
  styleUrls: ['./scroll.component.scss']
})
export class ScrollWrapperComponent {

  constructor() { }

}

Template:

<div cdkScrollable>
  <ng-content></ng-content>
</div>

When using that downgraded component in angularjs template:

<scroll-wrapper>
  <div class="some-class-that-allows-scroll"> <-- angularjs scrollable component
    <mat-form-field></mat-form-field> <-- angular 8 component that needs cdkScrollable on parent
  </div>
</scroll-wrapper>

However when doing this the scrollable class and the cdkScrollable directive do not end up on the same element. Is there a way to create an angular 8 component that wraps another component and have the cdkScrollable directive applied to the same element that is being wrapped?

Angular UpgradeModule cannot downgrade @Directive

0 Answers0