Angular
Set up OpenBridge components in an Angular project.
Setting up OpenBridge with Angular
Install
npm install @oicl/openbridge-webcomponents @oicl/openbridge-webcomponents-ngGlobal setup
Add the CSS via angular.json (not via a TS import):
{
"projects": {
"your-app": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/@oicl/openbridge-webcomponents/dist/openbridge.css",
"src/styles.css"
]
}
}
}
}
}
}Set the theme + size attribute / class on the root HTML:
<html data-obc-theme="day">
<body class="obc-component-size-regular">
<app-root></app-root>
</body>
</html>Register the Angular wrapper
In a standalone component:
import { Component } from '@angular/core';
import { ObcSliderComponent } from '@oicl/openbridge-webcomponents-ng';
@Component({
selector: 'app-root',
standalone: true,
imports: [ObcSliderComponent],
template: `
<obc-slider
[min]="0"
[max]="100"
[value]="value"
(value)="onValue($event)"
></obc-slider>
`,
})
export class AppComponent {
value = 50;
onValue(e: CustomEvent) {
this.value = (e.detail as { value: number }).value;
}
}The Angular wrapper is pre-wrapped — no CUSTOM_ELEMENTS_SCHEMA needed when you
import the wrapper class. If you prefer using the raw web component tags
directly, add CUSTOM_ELEMENTS_SCHEMA to your module / component:
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
// ...
})Theme switching
Valid themes: day, dusk, night, bright.