Alternative to ElementRef - Angular

1.4k Views Asked by At

In my ng2 application, I am using an external library which hasn't exposed its HTML elements.

I am using it as:

<custom-component>
     <div custom-title> Title </div>
     <div custom-content> Content </div>
</custom-component>

Now when it renders in HTML then it is added as:

<custom-component>
    <div class='customComponentWrapper'>
         <div class='content'>
               <div custom-title> Title </div>
               <div custom-content> Content </div>
         </div>
    </div>
</custom-component>

To change the position dynamically I made a local template reference variable.

<custom-component>
     <div #customComponent custom-title> Title </div>
     <div custom-content> Content </div>
</custom-component>

And changing its width as:

@ViewChild('customComponent') customComponent: ElementRef;

const elem = this.customComponent.nativeElement.parentElement.parentElement.parentElement;
elem.style.marginRight = width + 'px';

Now A/c to angular.io doc ElementRef is going to be deprecated. I am not able to find any other way of doing this. Is there any other way around to achieve the same?

I also some links on SO. But didn't reach to a solution.

0

There are 0 best solutions below