Angular load a component while runing

I have an angular page called training list , which by clicking on each button on the list has to load the html files content that I have created before inside my training component (which the code is below), in this html files I use other angular components that I created before, wanted to see if it is possible to do something like that, after assigning the content to my inner html in strips down the angular component. Here is the code for the component which loads the html:

this.route.paramMap
    .take(1)
    .subscribe(params => {
        let page: string = params.get("page") || "";
        if (page) {
            this.trainingService.getPageContent(page)
                .take(1)
                .subscribe(res => {
                    this.content = res;
                    this.loadingService.completeTask(loading);
                    console.log(this.content);
                })
        }
        else {
            this.loadingService.completeTask(loading);
        }
    },
    error => {
        this.notificationService.error("Error retrieving training page", error);

        this.loadingService.clearAllTasks();
    })
}

here is the component html:

<div [innerHtml]="content">
</div>

and here is a content of a html page that want to load in the inner html of training page:

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default b">
            <div class="panel-body">
                <div class="row">
                    <h1>This is a Test</h1>
                    <azure-media-player-component [source]="videoUrl">
                    </azure-media-player-component>
                </div>
            </div>
        </div>
    </div>
</div>