Изменить селектор дочернего компонента в динамическом компоненте

Question

rjf = [{"type": "title", "Deep": 0, "Text": "Здравствуйте, Добро пожаловать в мир Angular"}, {"type": "абзац", "глубина":1, «текст»: «Lorem Ipsum - просто фиктивный текст индустрии печати и набора текста»}, {«type»: «абзац», «текст»: «Зарегистрируйся и узнай больше о», «глубина»: 1, {"type": "LINK", "offset": 16, "data": {"url": "https://www.google.com"},}]}];

В коде, указанном ниже,Компонент списка - это элемент ввода, в котором я пытаюсь связать содержимое с помощью вышеуказанного массива.

Что я хочу сделать, так это то, что в приведенном выше массиве, если type это абзац, я хочу следующий вывод внутри

tag.

Lorem Ipsum - просто фиктивный текст индустрии печати и набора текста

А также мне не нужен тег 'div' в шаблоне в listcomponent, 'list' {селектор дочерних компонентов}. Мне нужен только приведенный выше результат.

Теперь, когда я пытаюсь это сделать, я получаю следующий вывод.

<app-root >
  <template></template>
  <list>      
    <div><h1>Hello, Welcome to the world of Angular</h1><h1></h1></div>  
  </list>
  <list>      
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>  
  </list>
  <list>      
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>  
  </list>
  <list>      
    <div>Registrate and <a href="https://www.google.com">read more</a> about</div>  
  </list>    
</app-root>

The expected result is.

<app-root >
    <template></template>      
    <h1>Hello, Welcome to the world of Angular</h1>  
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>  
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>  
    <p>Registrate and <a href="https://www.google.com">read more</a> about</p>  
</app-root>

app.component.ts
================

import {Component, NgModule,Input,ComponentFactory,ComponentRef, ComponentFactoryResolver, ViewContainerRef, ChangeDetectorRef, TemplateRef, ViewChild, Output, EventEmitter, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser';
import {ListComponent} from './list.component';
import {ManageListService} from "./manage-list.service"

@Component({
  selector: 'app-root',
  template: `
    <template #listContainer></template>    
  `,
})
export class App implements AfterViewInit {

 rjf = [
          {
            "type": "title"            
          },
          {
              "type": "paragraph"
          }
       ];

 constructor(private managelistservice : ManageListService) {}

 @ViewChild("listContainer", { read: ViewContainerRef }) container;
 componentRef: ComponentRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  createComponent(objval) {

  const factory: ComponentFactory = this.resolver.resolveComponentFactory(ListComponent);

    this.componentRef = this.container.createComponent(factory);

    this.componentRef.instance.objval = objval;    

  }

    ngOnDestroy() {
      this.componentRef.destroy();    
    }

    ngAfterViewInit(){

      for (let [key, value] of Object.entries(this.rjf)) {

        let compval = this.managelistservice.managelist(value);
        console.log(compval);
        this.createComponent(compval);

      }
    }


}




list.component.ts
=================

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

@Component({
  selector: "list",
  template: `      

    <div [innerHTML]="objval | noSanitize"></div>  

  `,
})
export class ListComponent {
  @Input() objval;
}


Actual result
=============

<app-root>
    <list>
        <div>
            <h1>...</h1>
        </div>
    </list>
    <list>
        <div>
            <span>...</span>
        </div>
    </list>
    <list>
        <div>
            <span>...</span>
        </div>
    </list>
</app-root>

Expected result
===============

<app-root>
    <h1>...</h1>
    <p>...</p>
    <p>...</p>
</app-root>

Может кто-нибудь предложить решение для этого