How to pass JSON object to angular custom elements

Question

I have created an custom element in angular 7 using CUSTOM_ELEMENTS_SCHEMA. My app.module.ts is as follows:

    export class AppModule {
     constructor(private injector: Injector) {}
     ngDoBootstrap() {
       this.registerCustomElements();
     }

    registerCustomElements() {
      const HeaderElement = createCustomElement(AppComponent, {
        injector: this.injector
      });
      const FooterElement = createCustomElement(BcAngFooterComponent, {
        injector: this.injector
      });
      customElements.define("header-element", HeaderElement);
      customElements.define("footer-element", FooterElement);
  }
}

I have referenced these custom elements in my app.component.html as below:

<footer-element footer-data="footerInputData"></footer-element>

This footerInputData is referenced in my app.component.ts file as a string.

 export class AppComponent {
  footerInputData: any = {title: "Page Title"};
}

Inside the HTML of my custom element, I have used interpolation to display the data passed to it as an input.

<div class="nav-list-wrap">
        {{footerData}}
</div>

When the page loads, I do not see the object displayed. Instead, it is showing 'footerInputData'.

How to make my custom element fetch the data from my app.component.ts file, instead of displaying the data as a sting.

Also, can JSON objects be passed to my custom element?

Answer 1

Custom elements are intended to use outside the angular wrapper, even though you can use them inside the angular wrapper. when you use them outside the angular wrapper you need to use it like this

<footer-element name='{"title": "Page Title"}'></footer-element> 

attribute value should be stringified, if you are passing json the json string should be strictly formatted.

When you use it inside the angular wrapper you can use it with the angular selector, and can pass data as the same old method.

<app-custom [name]="name"></app-custom>
//ts file
name = {title:"this is title"}

custom component.ts file

@Component({
  selector: 'app-custom',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  @Input() name: any;
}

app.module.ts

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, MainComponent],
  entryComponents:[
    AppComponent, MainComponent
  ]
})
export class AppModule {
  constructor(private injector: Injector) { }
  ngDoBootstrap() {
    //bootstraping angular app
    const AppElement = createCustomElement(MainComponent, { injector: this.injector });
    customElements.define('my-app', AppElement);

    //bootstraping custom element
    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('footer-element', el);
  }
}

Check out the working example