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.