如何在角组件TS中调用组件

Question

I can't show a component when I put it through a function in another component.

This is my code(main component):

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

    @Component({
      selector: 'app-body',
      templateUrl: './body.component.html'
    })
    export class BodyComponent implements OnInit{
    dtOptions: DataTables.Settings = {};

    customizing() {
        let html = `<app-button></app-button>`;
        console.log("ingresa");
        var element = document.getElementsByClassName("personalizado");

        element[0].innerHTML=html;
      }

    ngOnInit() {

         let scope = this;

          this.dtOptions = {
          dom: "<'row'"+
          "<'.extra-elements personalizado'>"+
          "<'.extra-elements'<li>>>"+
         "<'row'<'.col-12'<t>>>"+
         "<'row'<'.col-12'p>>",
          pagingType: 'full_numbers',
          initComplete: function(settings, json) {
            scope.personalizado();
          }
        };
      }

I call < app-button ><./app-button> in the function customizing() and put all the contain of app-button using innerHTML. Thats not work, app-button is not compiled and the renderised show the tag in dom but only like a simple tag.

This is the app-button component:

<div class='col'><button type='button' class='btn btn-dark'>Clicked</button></div>

In other words, The DOM show app-button like a tag and not compiled the button HTML.

Are there a way to do that?

Answer 1

Templates need to be complied, you can't inject a components selector into the html and then expect it to be rendered. You can either use ngIf or ngFor to conditionally render components.

in ./body.component.html

<app-button *ngIf="conditionToShowButton">Button Text</app-button>

or

<app-button *ngFor="let btn of btns">{{btn.text}}</app-button>

For a list of buttons.