I am trying to use an external HTML element inside the HTML of a component in my Angular app.
So I import the external library by adding the following snippet to my index.html
file:
<script src="https://embed.xxx.co/bundle.js"></script>
In my app.component.html
file, I use the HTML element like this:
<dashboard welcome-message="hello"></dashboard>
This works successfully!
However, when I now want to pass a variable to the external HTML, I define the property in my Angular component app.component.ts
file like this:
message: string;
ngOnInit() {
this.message = "Hello";
}
And then in the app.component.html
file, I pass the component property to the HTML like this (as described here - https://angular.io/guide/property-binding ):
<dashboard [welcome-message]="message"></dashboard>
The problem is that this does not work. The welcome-message
property is not binding properly, and when I inspect the <dashboard>
element in the UI, the welcome-message
property is missing.
It's really weird, as for example when using the <img>
element, binding to the img src
property works fine using the approach above.
I am using Angular v13.
Any ideas on what is going on here or what the problem is?
I have looked up everything online and I can't find an answer!
I don't know about your dashboard
. If it's not an Angular component really I don't not if can work get the element in javascript and give value
ngOnInit() {
this.message = "Hello";
const dashboard=document.getElementsByTag("dashboard")
if (dashboard && dashboard.length)
{
dashboard[0]['welcome-message']=this.message
//or, if not work
dashboard[0].setAttribute('welcome-message',this.message)
}
else
console.log("I coudn't find the dashboard")
}
NOTE: See that each change in "this.message" you should make the same. You can use a getter private _message;
set message(value) {
this._message = value;
const dashboard = document.getElementsByTagName("dashboard");
if (dashboard && dashboard.length) {
dashboard[0].setAttribute('welcome-message', value);
//or, if not work
dashboard[0].setAttribute('welcome-message', this._message);
} else {
console.log("I coudn't find the dashboard");
}
}
get message() {
return this._message;
}
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.