Loading Angular component in a Knockout application - Angular elements

Question

I am trying to add a Angular web component in a KnockoutJS application using Angular elements. Following this method of creating individual elements - "Angular Elements — A Practical Introduction To Web Components With Angular 6"

My Angular element uses angular material design and the base Knockout app is built using jQuery and bootstrap.

The idea here is that upon click of a button on the base Knockout app, a modal opens up showing the Angular element.

Knockout Code -

<button type="button" data-bind="click: editContent" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                            Edit Content
                        </button>

<div class="modal video-modal" id="edit-content-info" tabindex="-2" role="dialog" aria-labelledby="video-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <app-home-content></app-home-content>
                <script src="~/Content/edit-content-view/app-home-content.js" type="text/javascript"></script>
            </div>
        </div>
    </div>
</div>

JS

    self.editContent = function () {
    $('#edit-content-info').modal('show');
}

PROBLEM - The component loads up fine in the Knockout app, however I am not able to perform any operations on that component like clicking checkboxes, editing the text box etc. Also, those different tabs, upon clicking on them, nothing happens.

That being said, I tested this component outside of the knockout application, in plain vanilla HTML file, and everything works fine.

CODE

My Angular app set up - App Module

import { Injector } from "@angular/core";
import { createCustomElement } from "@angular/elements";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  declarations: [
    AppComponent,
    GeneralInfoComponent,
    ContentNavbarComponent,
    HomeContentComponent,
    EpisodeInfoComponent,
    KeywordsInfoComponent,
    ContributorsInfoComponent,
    AttachmentsInfoComponent,
    TechattributesInfoComponent,
    AudioprogramsInfoComponent,
    NotesInfoComponent,
    DetailsInfoComponent,
    SecurityInfoComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    NoopAnimationsModule,
  ],
  providers: [],
  bootstrap: [HomeContentComponent],
  entryComponents: [HomeContentComponent],
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(HomeContentComponent, {
      injector: this.injector,
    });
    customElements.define("app-home-content", el);
  }
}

The app-home-content component has a nested a component called app-content-navbar and navbar component nests a series of components seen in the tabs in above screen capture

app-home-content html

    <div class="container">
      <app-content-navbar></app-content-navbar>
      <div class="save-content-info">
        <button mat-raised-button color="accent">Save</button>
      </div>
    </div>

app-home-content ts

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

@Component({
  selector: "app-home-content",
  templateUrl: "./home-content.component.html",
  styleUrls: ["./home-content.component.css"],
  encapsulation: ViewEncapsulation.None,
})
export class HomeContentComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

app-content-navbar html

<div class="content-edit-dialog">
  <h3>Edit Content - 4049008</h3>
  <mat-tab-group>
    <mat-tab label="General">
      <app-general-info></app-general-info>
    </mat-tab>

    <mat-tab label="Episode">
      <app-episode-info></app-episode-info>
    </mat-tab>

    <mat-tab label="Keywords">
      <app-keywords-info></app-keywords-info>
    </mat-tab>

    <mat-tab label="Contributors">
      <app-contributors-info></app-contributors-info>
    </mat-tab>

    <mat-tab label="Attachments">
      <app-attachments-info></app-attachments-info>
    </mat-tab>

    <mat-tab label="Tech Attributes"
      ><app-techattributes-info></app-techattributes-info>
    </mat-tab>

    <mat-tab label="Audio Programs">
      <app-audioprograms-info></app-audioprograms-info>
    </mat-tab>

    <mat-tab label="Notes"> <app-notes-info></app-notes-info> </mat-tab>

    <mat-tab label="Details"> <app-details-info></app-details-info> </mat-tab>

    <mat-tab label="Security">
      <app-security-info></app-security-info>
    </mat-tab>
  </mat-tab-group>
</div>

Is there any specific way of implementing angular elements in KnockoutJS?