0

https://angular.io/guide/elements

Before asking i try to find solution by myself but i can't solve my issue. I have a web component (for example <test-component></test-component>) And for initialization i need pass to it some param (for example some-string-url). When i try to do it like that <test-component some-string-url="https://example.com"></test-component> everything works fine, but that param should be dynamic for each website or appliaction, so when i try to do that like that: <test-component [some-string-url]="someVariable"></test-component> or <test-component some-string-url="{{ someVariable }}"></test-component> it doesn't work. The only way what i found it's create component and append it to the div like that:

  const widget = document.createElement('test-component');
  widget.setAttribute('some-string-url', this.exampleUrl);
  document.getElementById('widget-container').append(widget);

but is there i can use another way to pass param?

P.S. ngOnChanges() didn't see any changes and don't triggered at all.

UPDATE:__________________________________________

I need to get @Input property from variable inside my web component (https://angular.io/guide/elements), for example <test-component [some-string-url]="someVariable"></test-component> should get me some-string-url inside my web-component.

Currently i've got undefined when i try to get some-string-url inside onInit, afterviewchecked.

Similar question but without solution Angular Elements: @Input decorator not working with variables

BizzyBob
  • 12,309
  • 4
  • 27
  • 51
Igor Zinchenko
  • 305
  • 3
  • 13
  • Share source of `test-component`. – Zunayed Shahriar Mar 25 '21 at 13:16
  • `it doesn't work` can you specify ? What did you expect / What happened ? What you write should work. The common problem comes when you try to use this variable "too soon", before it has been passed to the component. Please show the code. – Arnaud Denoyelle Mar 25 '21 at 13:30
  • can you please share the code of your web component. – BizzyBob Mar 25 '21 at 14:22
  • For values set with `@Input`, I recommend to use the setter form because you don't know *when* the value is filled and `ngOnInit` is too soon. The safest is to do it like this : `@Input set someStringUrl(value: string) { [...] }`. Also, the setter is called each time the value is changed, which can sometimes be useful – Arnaud Denoyelle Mar 25 '21 at 18:04

1 Answers1

0

I'm not exactly sure why it isn't working for you, both of those binding formats should work.

Here is a working example:

test.component.ts

export class TestComponent {

  @Input() someStringUrl: string;

}

app.component.html

<test-component [someStringUrl]="someVariable"></test-component>

<button (click)="increaseCounter()">Increase Counter</button>

app.component.ts

export class AppComponent  {
  private counter = 1;

  get someVariable() { 
    return `http://www.fake-address.com/${this.counter}`; 
  }

  increaseCounter() {
    this.counter++;
  }
}
BizzyBob
  • 12,309
  • 4
  • 27
  • 51