Использование [style] для позиционирования элемента не работает

Question

У меня проблемы с позиционированием div, используя [style]. Мне кажется, что я следовал инструкциям соответствующих постов / блогов, но не получаю правильных результатов. (чтобы разместить div на 100,100). Кто-нибудь может увидеть, что не так с кодом ниже?

Полный образец: https://stackblitz.com/edit/angular-j4kryx?file=app%2Fhello.component.ts

@Component({
  selector: 'hello',
  template:
  `<div 
  [style.left]="left"
  [style.top]="top"
  [style.color]="color">Hello!</div>`
})
export class HelloComponent {
  top = "100px" // does nothing
  left = "100px" // does nothing
  color = "red" // works!
}

Answer 1

Вам также необходимо установить позицию.

@Component({
  selector: 'hello',
  template:
  `<div 
  [style.left]="left"
  [style.top]="top"
  [style.position]="position"
  [style.color]="color">Hello!</div>`
})
export class HelloComponent {
  top = "100px";
  left = "100px";
  position = "relative";
  color = "red";
}

Смотрите здесь: https://stackblitz.com/edit/angular-45x1px?file=app/hello.component.ts