Hi developers

Develop your next financial app using Angular theme as well as Angular components and sample apps. You will get more information on prerequisites, see how to install both libraries, and optionally display 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.

Angular Material themelink

Install the dependencies

npm install @finastra/angular-theme @angular/material

Import the theme in your main stylesheet

/* Remove potential usage of material base theme such as : @import '~@angular/material/theming'; */ @use '~@finastra/angular-theme' as fds; @use '~@finastra/angular-theme/base'; @include fds.uxg-core(); @include fds.uxg-material-theme(fds.$light-theme);

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

Angular componentslink

Install the dependencies

npm install @finastra/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 '@finastra/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 themeslink

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 :

@use 'sass:map'; @use '~@finastra/angular-theme' as fds; @use '~@finastra/angular-theme/base'; @use '~@finastra/angular-components/global-search/src/global-search.theme' as global-search; @include fds.uxg-core(); // Add components typography mixins inside this mixin @mixin app-typography($typography) { @include global-search.typography($typography); } // Add components theme mixins inside this mixin @mixin app-theme($theme) { @include fds.uxg-material-theme($theme); @include global-search.theme($theme); } @include app-typography(fds.$typography); @include app-theme(fds.$light-theme); @media (prefers-color-scheme: dark) { @include app-theme(fds.$dark-theme); }

Branding with theme builderlink

It's possible to customize the look and feel of your application to adapt to a different branding.
To do that, go and check the theming documentation and play with our theme editor.

theme editor

App starterlink

We are providing ready to use applications to get you started immediately. It features the theme, the components and the use of some FusionCreator APIs. It's an excellent start for a hackathon project,new product app or just to deep dive into the code.

Tutorialslink

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

Contributelink

Contributions are welcome! From discussions to pull request, there are tons of ways to contribute.