How does Angular two-way-data-binding work without a component property?

Question

I implemented the following set in my template:

<input type="checkbox" [(ngModel)]="something" />
<span *ngIf="something">I'm shown when the checkbox is checked!</span>

I have not declared a variable called something anywhere in my component. Still the checkbox and span are working as expected. Can someone please explain how this can be? Is some property created under the hood? Where and when is this happening?

I'm using WebStorm and a Chrome browser.

Poul Kruijt · Accepted Answer · 2020-09-22 11:05:48Z

3

The property is created on your component class, which is nothing more than an object. If a property does not exist on an object it will return as undefined, which will resolve to false. When you check the checkbox, the ngModel will set componentIntance.something to true. At this point the property will be there, when you uncheck the checkbox after this, the property will still be there, but will now be false.

What you are doing there though, does not work anymore with the latest angular versions and with the strict template check turned on. The compiler will detect that the something property is not declared on the component class and will throw an error during compile phase

answered Sep 22, 2020 at 11:05

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Collectives™ on Stack Overflow

How does Angular two-way-data-binding work without a component property?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related