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?