1

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.

Daniel
  • 3,541
  • 3
  • 33
  • 46
Rahul
  • 5,594
  • 7
  • 38
  • 92
  • Nothing in the link you provide says anything about `ElementRef` being deprecated. It says it is a security risk, and to consider using [Renderer](https://angular.io/api/core/Renderer). Am I missing something? – R. Richards Jul 18 '17 at 16:26
  • @R.Richards Even of go with renderer it is using same native element to change this style. – Rahul Jul 18 '17 at 16:33
  • better use a directive and inject ElementRef into its constructor – Max Koretskyi Jul 18 '17 at 19:20

0 Answers0