To get started with Barista components you can either use our ng-add schematic or install the library manually.
Installation using ng-add
To install the Barista components use our ng-add schematic with:
ng add @dynatrace/barista-components
This will guide you through our installation process and will ask you some questions.
- The path to the NgModule where the imports will be registered.
- If the Browser Animation Module should be enabled.
- If you want our typography styles or only the base styles for the components.
- If you want to install all our peer dependencies.
After everything is installed and set up you can start by importing the needed module for each component you want to use:
import { DtButtonModule } from '@dynatrace/barista-components/button';
@NgModule({
...
imports: [DtButtonModule],
...
})
export class PizzaPartyAppModule { }
Alternatively, you can create a separate NgModule that imports all of the Barista components that you will use in your application. You can then include this module wherever you'd like to use the components.
Note: Whichever approach you use, be sure to import the Barista components modules after Angular's BrowserModule, as the import order matters for NgModules.
Prototype
If you want to start testing the components right away without having to setup anything locally, we prepared an online IDE with everything setup for you. All modules are already installed, so you can copy an example you like from any page and paste the code into the editor. This will always be up to date with the latest version of the component library released. You don't have to worry about installing dependencies, upgrading to the latest version or adding any modules. You can also safe the prototype and share it with colleagues by forking the example on stackblitz. Happy prototyping.
Go to Stackblitz and start working there.
Manual installation
You can also install the Barista components library manually. Follow these steps to get everything up and running.
Step 1: Install the barista-components and Angular CDK
Install the Barista components library via npm or yarn:
npm install --save @dynatrace/barista-{components,icons,fonts} @angular/cdk d3-scale@^3.0.0 d3-shape@^1.3.5 highcharts@6
npm install --save-dev @types/highcharts
or
yarn add @dynatrace/barista-{components,icons,fonts} @angular/cdk d3-scale@^3.0.0 d3-shape@^1.3.5 highcharts@6
yarn add @types/highcharts --dev
Step 2: Animations
Some Barista components depend on the Angular animations module. If you want
these animations to work in your app, you have to install the
@angular/animations
module and include the BrowserAnimationsModule
in your
app.
npm install --save @angular/animations
or
yarn add @angular/animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class AppModule { }
If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [NoopAnimationsModule],
...
})
export class AppModule { }
Note: @angular/animations uses the WebAnimation API that isn't supported by all browsers yet. If you want to support animations in these browsers, you'll have to include a polyfill.
Step 3: Import the component modules
Import the NgModule for each component you want to use:
import { DtButtonModule } from '@dynatrace/barista-components/button';
import { DtSelectModule } from '@dynatrace/barista-components/select';
@NgModule({
...
imports: [DtButtonModule, DtSelectModule],
...
})
export class PizzaPartyAppModule { }
Alternatively, you can create a separate NgModule that imports all of the Barista components that you will use in your application. You can then include this module wherever you'd like to use the components.
Note: Whichever approach you use, be sure to import the barista-components modules after Angular's BrowserModule, as the import order matters for NgModules.
Step 4: Include the styles
The Barista components library ships with two different variants for including styles. You can either import the core styles that are required to use the barista-components. These core styles are just the bare minimum for the component and do not change the global styling of your app.
Add the following line to your project's architect options in the angular.json file to include core styles:
"styles": ["node_modules/@dynatrace/barista-components/style/main.scss"],
You can also import the second variant, which also includes general styling for headlines, text-formatting, etc. by including the following line:
"styles": ["node_modules/@dynatrace/barista-components/style/index.scss"],
Step 5: Optional - add fonts and icon files to your assets
Add this section to the assets
array in your projects architect in the
angular.json. This will copy all svgs from the iconpack and all fonts shipped
with the barista-components library to your dist package and will make Angular
aware of the file dependencies.
...
{
"glob": "metadata.json",
"input": "node_modules/@dynatrace/barista-icons",
"output": "/assets/icons",
},
{
"glob": "*.svg",
"input": "node_modules/@dynatrace/barista-icons",
"output": "/assets/icons"
},
{
"glob": "**/*",
"input": "node_modules/@dynatrace/barista-fonts/fonts",
"output": "/fonts"
},
...
To provide the icon-configuration to the application, you will need to add this to the your app module.
@NgModule({
declarations: [...],
imports: [
...
DtIconModule.forRoot({ svgIconLocation: `/assets/icons/{{name}}.svg` }),
],
bootstrap: [...],
})
export class AppModule {}