Angular 4 динамическое изменение DOM, проблема с обновлением стилей?

Question

[Dream8]

Привет.
Делаю игру на Angular. И у меня возникла заминка с обновлением стилей для добавленных элементов в DOM.

import { Component, OnInit } from '@angular/core';

interface IUser {
  balance: number
}

interface ICard {
  number: number,
  suit: number
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  cardsExample: Array<ICard> = [{
    number: 10,
    suit: 2
  },
  {
    number: 13,
    suit: 1
  }
  ];
  cards = 20;
  botCard = this.visualCard(this.cardsExample);
  user: IUser = {
    balance: 8000
  }

  constructor() { }

  ngOnInit() {
  }

  private visualCard(card: Array<ICard>) {
    let cardString = "";

    card.forEach(element => {
      cardString += "<img class=\"card\" style=\"height: 20vh;\" src=\"/assets/img/card/"+element.number+"."+element.suit+".png\">";
    });

    return cardString;
  }
  
}

Вообщем добавляю карты картинками в DOM как мне сделать так чтобы к ним применялся CSS?

Answer 1

[ozknemoy]

либо выносить styleUrls из компонента, либо в компоненте ViewEncapsulation=none/ это выключит Shadow DOM и инкапсуляцию стилей. я бы сделал как в первом примере