Angular directives inside InnerHTML

I know its not possible to inject angular directive along html code inside inner html, is there any work around it? I'm trying to read the html and the directive from a html file and inject it inside a div, I thought about using component factory and create the component dynamically but the directive in the html file can be anywhere in the code not sure how I can append it to the right place in dom, I don't have much experience working with component factory so please let me know if there is a way.

ngOnInit(): void {

    let loading = this.loadingService.addTask();

    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);
                    })
            }
            else {
                this.loadingService.completeTask(loading);
            }
        },
        error => {
            this.notificationService.error("Error retrieving training page", error);

            this.loadingService.clearAllTasks();
        })

here is my template

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

here is an html page example that should be injected (this is an external html page file)

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default b">
            <div class="panel-body">
                <div class="row">
                    <!--the directive-->
                    <sa-azure-media-player [source]="the link"></ss-azure-media-player>
                </div>
            </div>
        </div>
    </div>
</div>