Start using Fundamental NGX – as easy as 1-2-3

Fundamental NGX or a.k.a as Fundamental Library for Angular is an open source them-able Fiori 3 Angular component library built in top of Fundamental Library Styles and benefiting from one of the most popular, open source front-end framework – Angular.

In this post I want to share how easy it is to start using Fundamental Library for Angular in your Angular application. It requires only 1 thing! It is that easy! ?

If you have an existing Angular application the only thing you need to do is run this command in the root folder of your application:

ng add @fundamental-ngx/core

It will ask you few questions:

Set up browser animations for Fundamental Library for Angular?

answer: Yes

Add default font imports into styles.scss?

answer: Yes

After that you are good to go!  ?

You can start importing and using modules and components from the library.

Let’s just use one component – Message Strip.

There 2 things you need to do. They are not different than using any other different component library:

– import the module/component – go to your `app.module.ts` and import the Module

import { MessageStripModule } from '@fundamental-ngx/core';

and include it in in `NgModule` imports:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    MessageStripModule
  ],

– use the component – go to one of html templates and add the component:

<fd-message-strip>This is my first Fundamental NGX Application. It is easy as 1-2-3</fd-message-strip>

After running the application you will see something similar:

In case you are new to Angular then you can check this out. It will help you create your first Angular application.

Also you can check the stackblitz examples from the component page.

Stay tuned for more updates. Want to read more blog posts about Fundamental Library? Check these out.

Feel free to raise any questions or try our libraries in case you didn’t have a chance.