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?
3 answers
solution1
2 2019-02-14 05:20:43
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);
}
}
solution2
1 2020-05-08 22:05:08
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);
}
}
solution3
0 2019-02-13 05:10:29
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 gc 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.