Comment puis-je ajouter Angulaire composant html en application existante?

Je veux appliquer des composants angulaires

import { Component } from '@angular/core'
import { DialogService } from './dialog/dialog.service'

@Component({
  selector: 'app-root',
  templateUrl: '<div></div>',
})
export class AppComponent {
  dialogs: any;
  constructor(public dialogService: DialogService) {
       dialogs = dialogService.getDialogs();

       // dialogs are like following = 
       //   { "id": 1, "name": "D1", component: "<x-component>…</x-component>" },
  }
}

boîte de dialogue service obtient de données JSON qui comprend un élément html. Comment puis-je ajouter ce (<x-component>) composant un composant existant?