Ir para o conteúdo principal

Angular – @govbr-ds/components-angular

npm (next)

Este é um wrapper Angular que encapsula os Web Components do GovBR-DS v4, habilita NG_VALUE_ACCESSORS e permite a vinculação de eventos de entrada diretamente a um value accessor, proporcionando uma integração perfeita no fluxo de dados bidirecional do Angular.

Por que usar este wrapper? 🤔​

  • Desacoplamento da detecção de mudanças dos elementos Web.
  • Conversão de eventos para observáveis RxJS, alinhado ao @Output().
  • Control Value Accessors para integração com Reactive Forms e ngModel.

[!TIP] Para mais detalhes, consulte a documentação oficial do Stencil.

Instalação 📦​

Instale os pacotes necessários como dependências de produção:

npm install @govbr-ds/core @govbr-ds/components @govbr-ds/components-angular
# ou
pnpm add @govbr-ds/core @govbr-ds/components @govbr-ds/components-angular
# ou
yarn add @govbr-ds/core @govbr-ds/components @govbr-ds/components-angular

[!NOTE] Certifique-se de incluir os estilos do @govbr-ds/core.

Nota importante: pnpm e tree-shaking​

Se ao consumir estes pacotes você notar que o bundler não está removendo código não utilizado (tree‑shaking), pode haver uma incompatibilidade com o layout padrão do pnpm.

Solução rápida (opcional, somente se precisar): crie um arquivo .npmrc na raiz do seu projeto com:

node-linker=hoisted

Por que isso ajuda: por padrão, o pnpm organiza as dependências em pastas isoladas com symlinks. Alguns bundlers/otimizadores se baseiam na estrutura de node_modules e no campo sideEffects para decidir o que pode ser eliminado. O layout hoisted aproxima o formato “achatado” (similar ao npm/yarn), facilitando essa análise e, em muitos casos, restaurando o tree‑shaking.

Observações:

  • Use apenas se o tree‑shaking realmente não estiver funcionando.
  • Pode aumentar o uso de disco e alterar a resolução de dependências do seu projeto.

Uso 📚​

Angular com módulos​

Angular standalone​

Uso com NgModel e binding​

Para habilitar ngModel e 2-way binding, adicione FormsModule e o atributo ngDefaultControl no componente de formulário.

[!CAUTION] Em algumas versões pode ser necessário desativar aot. Veja: issue #317

<br-checkbox
  name="userTermsConditions"
  [(ngModel)]="termsConditions"
  (checkedChange)="onTermsConditionsChange()"
  ngDefaultControl
>
  Concordo com os Termos e Condições
</br-checkbox>
// app.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  termsConditions = true
  onTermsConditionsChange() {
    console.log('O valor mudou!', this.termsConditions)
  }
}

Desenvolvimento 👨‍💻​

Estrutura do projeto​

├── 📁 src
│   ├── 📁 stencil-generated
│   ├── 📄 angular-components.module.ts
│   └── 📄 index.ts
├── 📁 standalone
│   └── 📁 src
│       ├── 📁 stencil-generated
│       └── 📄 index.ts
└── 📁 scripts

[!WARNING] Tudo dentro de stencil-generated é sobrescrito ao gerar o build de Web Components.

Scripts/Build​

Gere os Web Components antes de compilar o wrapper:

nx build components
nx build angular

Documentações Complementares 📖​

Contribuindo 🤝​

Reportar Bugs/Problemas 🐛​

Abra uma issue: gitlab.com/.../issues/new

Commits 📝​

Padrões de branches e commits: gov.br/ds/wiki

Precisa de ajuda? 🆘​

Créditos 🎉​

Desenvolvido pelo SERPRO com a comunidade.