Angular Elements - Is it Possible to Data Bind Inputs?

Question

I've searched everywhere on the internet and I cannot figure out the answer. I was wondering if it was possible to data bind an Angular Element's input AFTER its been turned into a script and brought into plain HTML/JavaScript files. I've tested data binding an Angular Element within an Angular environment and it worked fine. It's only when I bring it out as a script to plain HTML/JavaScript where it stops working. Is it possible to do it and if so can someone please show me an example?

We have our Angular Element called my-element and I want to data bind a boolean value to its input.

public _random: boolean = false;
@Input()
get random(): boolean {
   return this._random;
}
set random(value: boolean){
   this._random = value;
}

Then in the plain HTML/JavaScript file where we bring the Angular Element in as a script we have

<my-element [random]="true”></my-element>

did you get solution to this problem?

vp310
– vp310

2022-06-20 12:14:11 +00:00
Commented Jun 20, 2022 at 12:14 — vp310
– vp310, Commented Jun 20, 2022 at 12:14

Dev Shah · Accepted Answer · 2021-08-18 03:00:00Z

1

Yes it is possible . One-way data binding will bind the data from the component to the view (DOM) or from view to the component. One-way data binding is unidirectional. You can only bind the data from component to the view or from view to the component.

Two-way data binding in Angular will help users to exchange data from the component to view and from view to the component. It will help users to establish communication bi-directionally. For more information Explained here

answered Aug 18, 2021 at 3:00

Dev Shah

605 bronze badges

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

Comments

Sunny Prajapati · Accepted Answer · 2021-08-18 07:12:23Z

0

<my-element [random]="'true'"></my-element>

Actually, here you're trying to set string type value. And you have declared as boolean. So, that's why not working. So, code would be...

<my-element [random]="true"></my-element>

answered Aug 18, 2021 at 7:12

Sunny Prajapati

1391 silver badge12 bronze badges

2 Comments

Koreanwest Over a year ago

My apologizes that was a typo on my end. I meant to write it as just the double quotes in the question.

Sunny Prajapati Over a year ago

It would be better if you can share your code?

Collectives™ on Stack Overflow

Angular Elements - Is it Possible to Data Bind Inputs?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related