Волшебная линия навигации в Angular 2?

Question

Как я могу сделать волшебную навигационную линию в Angular 2 без JQuery? Мои элементы навигации имеют переменную ширину, которая не упрощает ее.

Я попытался добавить элемент списка в мою навигацию по магической линии. Затем я хотел изменить его ширину и позицию, основываясь на позиции и ширине активного элемента списка. Однако я не знал, как напрямую обращаться к DOM (что, вероятно, не лучшее решение в Angular), чтобы получить ширину активного навигационного элемента. Я попытался использовать ElementRef, но я не мог заставить его работать (даже после того, как он был помещен в мои провайдеры ngModule).

В простом JavaScript это такая простая задача с небольшим кодом. Есть ли прямолинейный Угловой способ достижения этого?

Пример: https://css-tricks.com/examples/MagicLine/

Answer 1

Обновлено Угловой до последней версии и ElementRef начал работать.