GET STARTED
About
Designers
Developers
IDEATE & PLAN
Overview
DESIGN & DEVELOP
What's new
Content status
Foundations
UI elements
Components
Patterns
Theming
USE CASES
Overview
ARR calculator
Payments dashboard
Retail app
Corporate account services
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.
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/materialImport 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-componentsNote 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';
…
({…
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);
}