How to get reference to - and position of - an element created by NgFor
<p>I have a component that uses <code>NgFor</code> to build a row of elements...</p>

<pre><code>&lt;div *ngFor="let item of list"&gt;{{item.text}}&lt;/div&gt;
</code></pre>

<p>I don't know how wide these elements are but later on I need to be able to reference a specific one, get its <code>left</code> value and shift the whole lot so that the chosen one lines up with a certain point.</p>

<p>I've done this by adding <code>id</code> to each element...</p>

<pre><code>&lt;div *ngFor="let item of list" [id]="item.id"&gt;{{item.text}}&lt;/div&gt;
</code></pre>

<p>Then I just use the standard <code>getElementById()</code>...</p>

<pre><code>let el:HTMLElement = document.getElementById(someId);
let pos:number = el.offsetLeft;
</code></pre>

<p>This works fine but seems like the kind of thing that could probably be done in a more '<em>Angular2 way</em>'. So my question is...</p>

<p>Is this approach ok? If not then what is the <strong>best</strong> way to get a reference to elements created by NgFor so that I can get their various positional and stylistic properties.</p>

<p>Cheers</p>