Как применить угловой материал и анимацию по требованию?

Question

• Я возвращаю HTML-строку ввода с помощью нажатия кнопки, используя Angular6 и Angular материал 6

• Строка возвращается и добавляется к основному HTML,
  однако свойстваи стили angular-материала не применяются к HTML-вводу mat.

  Есть ли способ инициализировать представление после вызова события click?

Ниже приведен мой код.
html file

  <div id='main'>

  </div>
 <input type = 'button' style='width:50px; height:50px;' value='Add'
 (click) = 'generateTextBox()'/>

.ts файл

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

import { Controls } from '../main/main.component';

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

  constructor() { }

  ngOnInit() {
  }

  /**
   * name
   */
  public generateNewControl(controlType:string):string {
    console.log('new control generated');
    switch(controlType){
      case 'text':
        return this.renderTextBox();
      break;
    }
  }

  renderTextBox():string{
    return '<mat-form-field class="example-full-width"><input matInput 
           placeholder="Favorite food" value="Sushi"></mat-form-field>'
  }

  generateTextBox():void{
  var d = document.getElementById('main');
    d.insertAdjacentHTML('beforeend', 
    this.generator.generateNewControl('text'));
  }
}