Angular 4 dynamic DOM change, style update issue?

Question

Angular

Hello.
I am making a game in Angular. And I had a hitch with updating the styles for the added elements in the 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;
  }
  
}

In general, I add maps as pictures in the DOM, how do I make it so that CSS is applied to them?

Answer 1

either take styleUrls out of the component, or in the component ViewEncapsulation=none/ this will turn off Shadow DOM and style encapsulation. i would do like in the first example