Prerequisites
If you are a Backbase user, the following prerequisites are already in place.
- Make sure your Node.js version is set to 20.11.1
- Download and install NVM
- In the terminal of your choice, run the following commands:
nvm install 20.11.1
nvm use 20.11.1
- Set up your repo user and obtain NPM access to repo.backbase.com, by following the steps described in Set up for web development.
- Set up your Angular project to use Angular 18 or later. For more information on upgrading, see Angular migration guide.
Set up dependencies
- In the root directory of your project, install the dependencies.
npm install --save @backbase/ui-ang
"projects": {
"<app-name>": {
...
"architect": {
"build": {
"options": {
"outputPath": "",
"index": "",
"main": "",
"styles": [
"apps/<app-name>/src/styles.scss"
],
...
- The name and the directory of your main stylesheet file is specified. In above example this is apps/<app-name>/src/styles.scss.
- To import the Web Design System styles, edit this main stylesheet file by adding the following at top of the file.
@import "@backbase/ui-ang/scss/main";
For developers working with Angular 17 or below and @backbase/ui-ang 11 or earlier, it's important to avoid using esbuild —@angular-devkit/build-angular:browser-esbuild— when building your application.
Instead, use webpack —@angular-devkit/build-angular:browser. You can configure this setting in your project.json (or angular.json) file.
Esbuild is supported since @backbase/ui-ang 12 and above.
Instead, use webpack —@angular-devkit/build-angular:browser. You can configure this setting in your project.json (or angular.json) file.
Esbuild is supported since @backbase/ui-ang 12 and above.
Example usage
- To import a Web Design component, you must use the name of the module as listed in Web Components.
- In the module you want to consume the component in, use the following format for your import statement.
import { ButtonModule } from "@backbase/ui-ang/button"
- After the module is imported, you can use the selectors in that module.
- The following example imports LogoModule so that the <bb-logo-ui> selector can be used in the app.
// app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { LogoModule } from "@backbase/ui-ang/logo";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, CommonModule, LogoModule],
})
export class AppModule {}
// app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "bb-app-root",
template: `
<div class="app">
<div class="top-bar">
<bb-logo-ui type="full"></bb-logo-ui>
</div>
<div class="main">...</div>
</div>
`,
})
export class AppComponent {
constructor() {}
}