Hi developers

This guide explains the different kind of output we provide, namely a Angular Material theme as well as Angular components. It includes information on prerequisites, installing both libraries, and optionally displaying a sample component in your application to verify your setup.

Prerequisites

If you are new to Angular or getting started with a new Angular application, see Angular's full getting started guide and Setting up your environment. For existing applications, follow the steps below to begin using our theme and components.

Tutorialslink

Design system - Angular theme

Discover how to install and use the Finastra's design system theme for Angular applications.

Design system - Angular components

Learn how to install and use our library of Angular components.

Design system - sample retail app

In this video David will show you how to create a fully working application consuming real data from FFDC's APIs with our starter app.

Angular Material themelink

Install the dependencies

npm install @ffdc/uxg-angular-theme @angular/material

Import the theme in your main stylesheet

/* Remove potential usage of material base theme such as : @import '~@angular/material/theming'; */ @import '~@ffdc/uxg-angular-theme/all-theme';

... and voila 😇. Your app is now using our branding ! Hope you like it !

Angular componentslink

Install the dependencies

npm install @ffdc/uxg-angular-components

Note that the Angular components require our Angular Material theme. Refer to the section above for installation.

Display a componentlink

Let's display a scroll to top component in your app and verify that everything works.
You need to import the ScrollToTopModule that you want to display by adding the following lines to your app.module.ts file.

import { ScrollToTopModule } from '@ffdc/uxg-angular-components/scroll-to-top'; … @NgModule ({… imports: […, ScrollToTopModule, …] })

Add the <uxg-scroll-to-top> tag to the app.component.html like so:

<uxg-scroll-to-top></uxg-scroll-to-top>

Run your local dev server:

ng serve

And point your browser to http://localhost:4200
You should see the scroll to top component on the page.

Component's themes

For more "advanced" components, you may require to import their themes SASS mixins.
Find below a sample of what your main styles.scss would look :

@import "~@ffdc/uxg-angular-theme/lib/core/core"; @import "~@ffdc/uxg-angular-theme/lib/core/theming/all-theme"; @import "~@ffdc/uxg-angular-theme/lib/core/typography/typography"; @import "~@ffdc/uxg-angular-theme/theme-variables"; @import "~@ffdc/uxg-angular-components/global-nav/global-nav.theme"; @include uxg-core(); // Add components typography mixins inside this mixin @mixin app-typography($typography) { } // Add components theme mixins inside this mixin @mixin app-theme($theme) { @include uxg-material-theme($theme); @include uxg-global-nav-theme($theme); } @include app-typography(uxg-typography-config()); @include app-theme($uxg-light-theme); @media (prefers-color-scheme: dark) { @include app-theme($uxg-dark-theme); }