Создание нового элемента DOM со встроенным стилем программно в Angular2

Question

Я хочу создать новый элемент dom для каждого нового ввода, который я получаю через поле ввода, и стилизовать его по своему желанию. Я написал следующий код. Тем не менее, стиль не работает.

import { Component,ViewChild } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {ElementRef,Renderer} from '@angular/core';


@Component({
  selector: 'app-html-producer',
  templateUrl: './html-producer.component.html',
  styleUrls: ['./html-producer.component.css']
})
export class HtmlProducerComponent {

  @ViewChild('search') el:ElementRef;
  inputWord:string='';
  myHtml: string = '<div><i>basic initial HTML</i></div>';
  appendedHtml: string = `<span></span>`;
  randomColor:string;

  //set a property that holds a random color for our style.

  constructor(){

  }

  ngAfterViewInit() { 
    this.el.nativeElement.focus(); 
    Observable.fromEvent(this.el.nativeElement,"keyup")
      .map((e:any)=>e.target.value)
      .debounceTime(1000)
      .subscribe(v=>{
        this.inputWord = v;
        this.randomColor = this.getRandomColor();
        this.appendedHtml = `<p style="color:${this.randomColor}">${this.inputWord}</p>`;
        this.append();
      })

  }


  //function to get random colors
  public getRandomColor() {
      var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i < 6; i++){
          color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
  }

  append(): void {
    console.log('Appending...')
    this.myHtml = this.myHtml + this.appendedHtml;
  }

}

и HTML:

<h2 class="initial">Append or Prepend HTML to div</h2>
<div>
  <input type="text" #search [(ngModel)]="inputWord">
</div><br/><br/>
<div [innerHTML]="myHtml"></div>
<br>

Мне бы хотелось, чтобы добавляемый новый элемент имел указанный встроенный стиль. Но у него просто нет стиля.