3

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!!

Bill Cunnien
  • 31
  • 4
  • 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 May 31 '18 at 15:19
  • After restart the element exhibits the same behavior. What else would you like to see in the code? – Bill Cunnien May 31 '18 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 May 31 '18 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 May 31 '18 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 May 31 '18 at 16:42
  • check this answer, it may help you https://stackoverflow.com/a/53955565/2721138 – cozmik05 Dec 28 '18 at 08:27
  • @cozmik05 The answer you referenced in that link is giving incorrect advice. You don't need to make the input property all lowercase. You can keep it camel-case, but when you use it as an angular element, then you need to separate the words by a dash character and make sure everything is lowercase. – Saturn K Feb 07 '21 at 04:13
  • @BillCunnien have you gotten this question answered or do you still need an answer? I have one if you need one. – Saturn K Feb 07 '21 at 04:14

2 Answers2

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);
}
Varun Jain
  • 73
  • 2
  • 8
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;
Sunil Kashyap
  • 2,946
  • 2
  • 15
  • 31
  • This is totally wrong. You can pass arguments the HTML attributes way in angular elements – Kavinda Jayakody Mar 21 '20 at 16:05
  • @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. – Saturn K Feb 05 '21 at 23:43
  • @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 – Kavinda Jayakody Feb 06 '21 at 07:27
  • Kavinda Jayakody and @KeyvanSadralodabai this scenario is for changing data on runtime. – Sunil Kashyap Feb 06 '21 at 08:53
  • @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. – Saturn K Feb 07 '21 at 04:11
  • @SunilKashyap I disagree. This is not for changing data on runtime, it's for assigning data period. His `value` is always 50 because the `[value]` is never being assigned for it to change. Let me know if you need clarification please. – Saturn K Feb 07 '21 at 04:16