I am trying to make a web component compatible with different development frameworks, in the rest of the frameworks I have tested it, but in Angular I am having a problem when binding with the properties.
The problem is the following, in my angular component, which will be the place where I will place the web component, I have prepared a series of values that I want to pass to the web component during its initialization, and if those values are altered, I will capture and process them under.
The fact of the matter is that when initializing the values, I do not receive any type of attribute from the Web Component side, and when altering the values, I also do not receive any type of reactive response.
I know that there are some frameworks for Web Components such as Lit Elements, but given the requirements of the project, I need to work with vanilla components and therefore with the Web Components standard (Shadow Root, Template, Custom Elements, etc ...)
I leave here a link to StackBlitz with a small playground so that this problem can be replicated: Problem With Angular and Web Components
You're looking for attributes so you should define it like that on the html:
<d-counter [attr.count]="count" #dCounter></d-counter>