[style.left.px]
@viewChildren
<p class="margin0 text-overflow table-cell" #ParentP>
<span id="managerDisplayName" #FirstSpan class="bold" title="{{ someBinding 1}}">{{ someBinding2 }}</span>
<span id="regionName" #SecondSpan class="bold regionName" title="{{ someBinding3 }}"> {{ someBinding4 }}</span>
<span class="service-level-icon">
<b placement="bottom" #IconHolder [style.left.px]="updatedLeftStyle" triggers="mouseenter:mouseleave" container="body" *ngIf=" someCondition1 " popoverTitle="" [ngbPopover]="servicelevelcontent"><i class="somecon"></i></b>
</span>
</p>
ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';
@ViewChildren('FirstSpan,SecondSpan') spans:QueryList<ElementRef>;
constructor(private cdRef:ChangeDetectorRef) { }
ngAfterViewInit() {
console.debug(this.spans);
let eleArr: any = this.spans.toArray();
this.updatedLeftStyle = eleArr[0].nativeElement.offsetWidth + eleArr[1].nativeElement.offsetWidth;
this.cdRef.detectChanges();
}
Demo Example