Setting a property of external HTML element to a component property value in Angular?

Question

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!

Answer 1

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;
}