This is not a bug, just a question

[Loic57]

BEEQ package

beeq/core

BEEQ version

none

Current Behavior

Hello,

This is the only way I found to contact you, I know I'm not in the good place for this, sorry !

I have a question about your library and how you managed to use valueAccessor for angular. I'm also building a components library with stencil/storybook for angular.

I have more or less the same conf than you in stencil.config.ts but on my side the valueAccessor are not working so I completely removed them and built my own directives.

It works great but I don't really like this solution. One thing strikes me, you are not using ngDefaultControl or formControlName in your html files in angular to make the bridge with the .ts part.

For example, to make my directives work I have to do this : <webc-ds-checkbox label="this is a checkbox" ngDefaultControl formControlName="checkbox" webcCheckboxAccessor />

webcCheckboxAccessor comes from my home made directive file and ngDefaultControl/formControlName are provided by reactive form.

In your readme here : https://github.com/Endava/BEEQ/tree/main/packages/beeq-angular I don't see anything related to ngDefaultControl/formControlName.

Have you maybe add something specific inside your stencil components ?

Again, sorry for this ticket. Loïc

Expected Behavior

none

Steps to Reproduce

none

Code Reproduction URL

none

Your Environment

none

Additional Information

none

[dgonzalezr]

Hi @Loic57 👋🏼

Actually we do use also ngDefaultControl and formControlName when using value accessors on the BEEQ angular wrapper components. I'm afraid that without it, it won't work either on our side. You can check the example here, there's also a Sandbox at the bottom for more details 🙂

I apologies if the readme wasn't reflecting the changes, that's a good catch and we will update it accordingly.

[Loic57]

Thank you very much @dgonzalezr

Another question : Do you need to import your value accessors into your angular project ? On my side, If I install my web components into an angular app the forms components won't work correctly with reactiveform.

I need to manually put the value accessors files into my npm package and call them like

import { BooleanValueAccessor } from '@angular-components/value-accessors/boolean-accessor'
import { TextValueAccessor } from '@angular-components/value-accessors/text-accessor'
import { SelectValueAccessor } from '@angular-components/value-accessors/select-accessor'

@Component({
    standalone: true,
    imports: [
        BooleanValueAccessor,
        TextValueAccessor,
        SelectValueAccessor,
        ....
    ]
})

[dgonzalezr]

Hi @Loic57, in the past we used to do the same, but we managed to make value accessor part of the angular module wrapper and in that way, consumers no longer needs to add those manually. On the consumers' side, they will only import the BEEQ Angular module which contains the value accessors:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BeeQModule } from '@beeq/angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BeeQModule.forRoot(),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Here is the full codesandbox example.