GET STARTED
Resources
Designing
Developing
IDEATE & PLAN
Overview
DESIGN & DEVELOP
What's new
Content status
Foundations
Components
Patterns
Data visualization
Theming
APP TEMPLATES
Overview
ARR calculator
Payments dashboard
Payments exceptions
Retail app
Corporate account services
Corporate virtual accounts
Spot rate booking
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.
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/materialImport 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-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 '@finastra/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 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.
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.