Using NgRef on downgraded Angular 5 component in AngularJs 1.7.2

Question

I am working on a project in Angular 1.7.2 that utilizes some components that were built in Angular 5/6. We are downgrading the components using the downgradeComponent tool and everything is working just fine.

We recently added a new component that we need to integrate with but we need to access the components properties as well. I was looking into the ngRef directive but that does not seem to be working and I'm unable to find any other ngRef examples outside of the Angular documentation. When I add the ngRef and bind it to a variable in the current scope, it never gets assigned. Any help would be appreciated!

Angular 5 component

export class ImportedComponent implements OnInit {

    variable1: boolean = true;
    variable2: boolean = false;

    constructor(private certService: ImportedComponent) { }

    ngOnInit() {
        this.variable1 = true;
        this.variable2 = false

    }
}

Html - w/ AngularJS 1.7.2

<imported ng-ref="importedProperty" ></imported>

<custom-button ng-if="importedProperty.variable1"  [disabled]="!importedProperty.variable2"></custom-button>

Downgrading

angular
  .module("blah", [])
  .directive(
    "imported",
  downgradeComponent({ component: ImportedComponent }) as angular.IDirectiveFactory
  );

The downgrading for the imported component is working because the HTML is showing up and I'm able to see the console.log()s occurring from their end but when I try to access importedProperty, I get undefined (or empty object if I initialize it as such in my scope prior)

Answer 1

I ended up working with the component owner who is now passing the data back as an event. I then listen for that event and use those properties accordingly