#StackBounty: #html #css #angular2 Angular 2 get elements width, and offset

Bounty: 50

I have a template that creates a list of links using *ngFor and a separate div element that I want to change its location based on the currently active link.

Template:


This results in a structure like so:

I want my highlighter div to get the width of Link 1 when activeLink = 0. Similar to this plain js:

var High = document.getElementById('highlighter');
High.style.width = document.getElementsByClass('div-link')[0].children[activeLink].offsetWidth; //activeLink = 0

In my app.component.ts file:

import { Component, AfterViewInit, ViewChildren, Directive, QueryList, ElementRef} from '@angular/core';

@Directive({selector: '[class~=div-link]'})
@Directive({selector: '.div-link'}) // variant
@Directive({selector: '#divHandle'}) // variant
@Directive({selector: '[divHandle]'}) // variant
export class ChildDirective {
    constructor(elem: ElementRef){}
}

@Component({
    selector: 'my-app',
    ...
})
export class AppComponent implements AfterViewInit {
    @ViewChildren(ChildDirective) childrenContent: QueryList<ChildDirective>;

    ngAfterViewInit(){
        console.log(this.childrenContent);
    }
}

When I log the childrenContent I get a QueryList object, but it is empty, no elements to get info from.

I have tried several @Directive selectors and always my QueryList is empty.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.