Skip to main content
The @beeq/angular package wraps BEEQ web components as Angular components and provides NG_VALUE_ACCESSOR implementations so that BEEQ form controls work seamlessly with Angular’s bi-directional data flow.

​
Installation

1

Install the packages

npm install @beeq/{core,angular}
@beeq/core is a peer dependency of @beeq/angular. Both packages must be installed.
2

Add BEEQ styles

Register the BEEQ global stylesheet in your angular.json build configuration:
angular.json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/@beeq/core/dist/beeq/beeq.css"
            ]
          }
        }
      }
    }
  }
}
Or import it inside your root stylesheet:
styles.scss
@import '~@beeq/core/dist/beeq/beeq.css';
3

Copy SVG icon assets

BEEQ loads icons from SVG files at runtime. Copy the icon assets to your output directory via angular.json:
angular.json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@beeq/core/dist/beeq/svg",
                "output": "assets/svg/"
              }
            ]
          }
        }
      }
    }
  }
}
Then call setBasePath in your main.ts so the icon component knows where to fetch SVG files:
main.ts
import { setBasePath } from '@beeq/core';

setBasePath('/assets/svg/');
You can skip the asset-copy step by pointing setBasePath at a CDN instead:
import { setBasePath } from '@beeq/core';

setBasePath('https://cdn.jsdelivr.net/npm/[email protected]/24/outline');
4

Add BeeQModule to your NgModule

Import BeeQModule from @beeq/angular and add it to your AppModule imports:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BeeQModule } from '@beeq/angular';

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

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

​
NgModel and two-way data binding

To enable [(ngModel)] on BEEQ form controls, add FormsModule to your module imports:
app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BeeQModule } from '@beeq/angular';

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

@NgModule({
  declarations: [AppComponent],
  imports: [BeeQModule.forRoot(), BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [],
})
export class AppModule {}
Then use [(ngModel)] in your templates as usual:
app.component.html
<bq-checkbox
  name="userTermsConditions"
  [(ngModel)]="termsConditions"
  (bqChange)="onTermsConditionsChange()"
>
  Yes, I agree with the Terms &amp; Conditions
</bq-checkbox>

<bq-slider
  min="0"
  max="100"
  type="range"
  debounce-time="250"
  [(ngModel)]="sliderValue"
  (bqChange)="onSliderChange()"
></bq-slider>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  termsConditions = true;
  sliderValue = [20, 75];

  onTermsConditionsChange() {
    console.log('The terms and conditions value changed!', this.termsConditions);
  }

  onSliderChange() {
    console.log('Slider value changed!', this.sliderValue);
  }
}
You may need to disable aot to enable two-way data binding with ngModel. See stencil-ds-output-targets#317 for details.

​
Standalone components

For Angular applications using standalone components (Angular 14+), import individual BEEQ components directly from @beeq/angular/standalone:
app.component.ts
import { Component } from '@angular/core';
import { BqButton, BqCard, BqInput } from '@beeq/angular/standalone';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [BqButton, BqCard, BqInput],
  template: `
    <bq-card>
      <bq-input name="email" [value]="emailValue" (bqChange)="onInputChange($event)">
        <label slot="label">Your email</label>
      </bq-input>
      <bq-button>Subscribe me!</bq-button>
    </bq-card>
  `,
  schemas: [],
})
export class AppComponent {
  emailValue = 'BEEQ Design System';

  onInputChange(event: CustomEvent<{ value: string }>) {
    console.log('emailValue', event.detail.value);
  }
}
Standalone imports are tree-shakeable — only the components you import are included in your bundle.

​
Legacy Edge / IE polyfills

If you need to support older versions of Microsoft Edge or Internet Explorer, apply the polyfills manually in main.ts:
main.ts
import { applyPolyfills, defineCustomElements } from '@beeq/core/dist/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});
The @beeq/angular wrapper calls defineCustomElements for you in modern environments, so this step is only needed for legacy browser targets.

Build docs developers (and LLMs) love

Get started for freeTalk to us