Angular web component @Input with variable

Question

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

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
– Arnaud Denoyelle, Commented Mar 25, 2021 at 13:30
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
– Arnaud Denoyelle, Commented Mar 25, 2021 at 18:04

BizzyBob · Accepted Answer · 2021-03-25 13:27:45Z

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

answered Mar 25, 2021 at 13:27

BizzyBob

14.9k4 gold badges32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Igor Zinchenko Over a year ago

it's not angular web component, i mean angular.io/guide/elements

CE_REAL Over a year ago

This is just a normal Angular component, not a Web Component which was asked for

Collectives™ on Stack Overflow

Angular web component @Input with variable

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related