Angular v6 Elements @Input() For Initial Binding Not Working

Question

I have created a custom element and placed on a page like this:

<my-custom-element [value]="100"></my-custom-element>

In the component definition, I have this:

@Input() value: number = 50;

At run-time, the value is always 50. I expect it to be 100. If I remove the default, value is undefined. What am I missing?

Thanks!!

This code seems correct, it is difficult to know what's happening without the rest of it. Have you tried to restart npm? — Benjamin Caure
– Benjamin Caure, Commented May 31, 2018 at 15:19
After restart the element exhibits the same behavior. What else would you like to see in the code? — Bill Cunnien
– Bill Cunnien, Commented May 31, 2018 at 15:27
I removed the brackets ... um ... it is working. I could have sworn I tried that already. Now, why do all of the examples I have ever seen have the brackets? Confused. — Bill Cunnien
– Bill Cunnien, Commented May 31, 2018 at 15:48
i'm trying to reproduce your problem but i can't. are you sure you are printing your value and you are not looking at the beginning automated logging that prints initial value? — firegloves
– firegloves, Commented May 31, 2018 at 15:51
I threw the value into a console.log within the ngOnInit method. Once i removed the square brackets, things started working. I probably did something else (because that does not make sense to me), however, I am not certain what I may have done other than that to correct the problem. It would still be good to know whether my syntax is valid or not. — Bill Cunnien
– Bill Cunnien, Commented May 31, 2018 at 16:42

Varun Jain · Accepted Answer · 2018-10-12 07:49:01Z

0

In NG Elements you may not find in your OnIt but in OnChanges.

Please add below line and check it is defined.

public ngOnChanges(): void {
    console.log('on changes value: ', this.value);
}

answered Oct 12, 2018 at 7:49

Varun Jain

732 silver badges8 bronze badges

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

Comments

Sunil Kashyap · Accepted Answer · 2021-02-06 08:53:02Z

0

You can set data using HTML attributes and to change/update data in Angular Elements you have to use vanilla js, query selector and assign data like below

custom element tag with initial value = 0

<my-custom-element value="0" ></my-custom-element>

select custom element through the query selector and assign value.

var customElement = document.querySelector('my-custom-element');
customElement.value = 100;

edited Feb 6, 2021 at 8:53

answered May 16, 2019 at 10:51

Sunil Kashyap

2,9842 gold badges17 silver badges33 bronze badges

6 Comments

Kavinda Jayakody Over a year ago

This is totally wrong. You can pass arguments the HTML attributes way in angular elements

Saturn K Over a year ago

@KavindaJayakody, if you pass in using ElementRef or HtmlElement or whatever, then the attributes have to be added/modified in ngAfterViewInit of the component. If your element needs that input on ngOnInit, then this won't work.

Kavinda Jayakody Over a year ago

@KeyvanSadralodabai yeah right. But what I mentioned was, we don't actually need to do it the way this answer suggests, we can actually use html attributes for the problem. The way it should be

Sunil Kashyap Over a year ago

Kavinda Jayakody and @KeyvanSadralodabai this scenario is for changing data on runtime.

Saturn K Over a year ago

@KavindaJayakody, I think html attributes don't work with angular elements the same way they do with regular DOM elements. I haven't been successful in wrapping attributes in brackets ([ and ]) for angular elements. The input property attributes of angular elements have to be literal values, or if you need dynamic variables to use as values, then you need to inject the Renderer2, get an ElementRef and use the Renderer2 to add attributes/events, etc. Please let me know if you need further details.

|

Collectives™ on Stack Overflow

Angular v6 Elements @Input() For Initial Binding Not Working

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related