title: How to pass JSON object to angular custom elements
body: <p>I have created an custom element in angular 7 using CUSTOM_ELEMENTS_SCHEMA.
  My app.module.ts is as follows:</p>
  
  <pre><code>    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);
    }
  }
  </code></pre>
  
  <p>I have referenced these custom elements in my app.component.html as below:</p>
  
  <pre><code>&lt;footer-element footer-data="footerInputData"&gt;&lt;/footer-element&gt;
  </code></pre>
  
  <p>This footerInputData is referenced in my app.component.ts file as a string.</p>
  
  <pre><code> export class AppComponent {
    footerInputData: any = {title: "Page Title"};
  }
  </code></pre>
  
  <p>Inside the HTML of my custom element, I have used interpolation to display the data passed to it as an input.</p>
  
  <pre><code>&lt;div class="nav-list-wrap"&gt;
          {{footerData}}
  &lt;/div&gt;
  </code></pre>
  
  <p>When the page loads, I do not see the object displayed. Instead, it is showing 'footerInputData'.</p>
  
  <p>How to make my custom element fetch the data from my app.component.ts file, instead of displaying the data as a sting.</p>
  
  <p>Also, can JSON objects be passed to my custom element?</p>