How to pass JSON object to angular custom elements

Asked 13/2, 2019 at 4:44 Answered 8/5, 2020 at 22:5

javascript angular typescript angular7 custom-element

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?

Archaeological answered 13/2, 2019 at 4:44 Comment(2)

Can you create stackblitz for the same? – Bernina 13/2, 2019 at 4:58

@Archaeological how do you overcome this problem? I am facing this right now. – Maskanonge 2/10, 2019 at 14:18

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

Hosiery answered 14/2, 2019 at 5:20 Comment(1)

Great example! Thanks so much! Now I'm trying to figure out the right Angular syntax to pass in a variable as part of the object.. – Yip 3/12, 2021 at 1:6

This was the only way I got this working for me, hope this could help to you guys: Note: each time you change the attribute value the type script code will be fired:

<body>
 <my-element settings=""></my-element>
 <script>
    var myConfig = {name: "oswaldo"}

    var element = document.getElementsByTagName("my-element")[0];
    if(element){
      element.setAttribute("settings", JSON.stringify(myConfig));
    }
  </script>
</body>

This is what is in my .ts file:

@Component({
  selector: 'my-element',
  templateUrl: './my-element.component.html',
  styleUrls: ['./my-element.component.less']
})
export class MyElementComponent implements OnInit {

  @Input('settings') set settings(init: any) {
    if (init) {
      const myset = JSON.parse(init);
      console.log(myset.name);
   }
}

Archbishopric answered 8/5, 2020 at 22:5 Comment(0)

There should be a [] in your footer-data and there may need a changeDetectRef needed to re-check the value after changes.

Step 1 ng new testing

Step 2 ng g c footer

Step 3 In app.module.ts

import { createCustomElement } from '@angular/elements';
import { FooterComponent } from './footer/footer.component';
...
@NgModule({
  declarations: [AppComponent, FooterComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [FooterComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { 
  constructor(private injector: Injector) {
    const customElement = createCustomElement(FooterComponent, { injector });
    customElements.define('some-component', customElement);
  }
  ngDoBootstrap() { }
}

Step 4 In app.component.html

<some-component [data]="footerInputData"></some-component>

Step 5 In app.component.ts

...
export class AppComponent {
   footerInputData = {"testing": "abc"}
}

Step 6 In footer.component.ts

import { Component, OnInit, Input, AfterViewChecked } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit, AfterViewChecked {

  @Input() public data: any;
  displayedData = ""

  constructor(
    private cdRef:ChangeDetectorRef
  ) { }

  ngOnInit() {

  }

  ngAfterViewChecked()  {
    this.displayedData = this.data
    this.cdRef.detectChanges();
  }
}

Step 7 In footer.component.html

<p>
  {{ displayedData | json }}
</p>

Blepharitis answered 13/2, 2019 at 5:10 Comment(2)

I am using Angular with AEM, and for that I am using angular custom elements. Hence, I need a solution for passing array of objects to custom elements. – Archaeological 13/2, 2019 at 5:20

@Archaeological I have edited the answer. It is able to pass the json in the above example. Let me know if it suits your scenario. – Blepharitis 13/2, 2019 at 8:21

Recommended topics

Hot tags