Angular 5 - динамическое добавление стиля к определенному элементу

Согласно нашим комментариям, вы должны использовать document.querySelector после перехвата жизненного цикла

ngAfterViewInit() {
    (document.querySelector('.app-alerts') as HTMLElement).style.top = '150px';
}

Я очень опоздал на эту вечеринку, но НЕТ! НЕ ИСПОЛЬЗУЙТЕ DOCUMENT.QUERYSELECTOR. Это НЕ стиль Angular DOM-элемента!

<div [ngStyle]="{'top.px': divStyle}">

Затем в вашем компоненте у вас есть

ngAfterViewInit() {
  this.divStyle = 200; 
}

Я наткнулся на страницу с хорошим объяснением и образцом кода для динамического добавления стиля в Angular 2+. Динамическое присоединение стиля в Angular

У меня была такая же проблема, мне нужно было прокручивать div, когда пользователь прокручивает страницу, и я решил мою проблему с помощью кода ниже. В компоненте, на котором вы хотите захватить прокрутку:

import { HostListener } from '@angular/core';

@ViewChild('curtain') divCurtain: ElementRef;

export class ComponentX {
    @HostListener('window:scroll', ['$event']) onScrollEvent($event) {
        console.log(window.pageYOffset);
        this.divCurtain.nativeElement.style.top = window.pageYOffset.toString().concat('px');
    }

    ngOnInit(): void { }
}

Только это, я не создавал никаких директив или другого кода. Этот HostListener выполняется каждый раз, когда пользователь прокручивает страницу, и я получаю window.pageYOffset для отправки в свой div.

Я надеюсь, что это помогает.