2

I have an angular container component named AppComponent. I want to load my non angular component HelloComponent inside AppComponent.

My actual goal is to load existing old components into angular 6 components.

export class HelloComponent extends HTMLElement {
   constructor() {
      super();
   }
   connectedCallback() {
      this.innerHtml = `<h1>Native component loaded successfully</h1>`;
      //init and load component.
   }
}

my angular code is as follows:

<angular-app>
     <hello-comp></hello-com>
</angular-app>

How do I inject this HelloComponent into this class.

html customElements does not work.

Intervalia
  • 10,248
  • 2
  • 30
  • 60
Mayur Patil
  • 303
  • 3
  • 17
  • If @Intervalia answered your question, please accept his answer. This site is based on community recognition of contributions. – Fuzzical Logic Feb 04 '19 at 03:20

1 Answers1

3

As long as the native component is properly defined it should load anywhere. Don't forget to call customElements.define('hello-comp', HelloComponent); after defining the class HelloComponent

I assume you are using es6 imports so you will need to import the HelloComponent file in your angular file.

And, Make sure you are running on a browser that supports Native Components or make sure to load the polyfill.

Intervalia
  • 10,248
  • 2
  • 30
  • 60
  • yes, it worked. using CUSTOM_ELEMENT_SCHEMA, angular allows to use it. I also tried 2 way communication between angular components and my hello-comp. It worked using custom events & getters and setters methods. – Mayur Patil Jan 24 '19 at 10:29