Skip to Content
Technical Articles
Author's profile photo Mladen Droshev

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.

 

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ruediger Mueller
      Ruediger Mueller

      I used is in a self-study project. It was really easy and fun to use.

      Author's profile photo Mladen Droshev
      Mladen Droshev
      Blog Post Author

      Ruediger Mueller I hope you went further than that 🙂

      Author's profile photo Maxi Dietz
      Maxi Dietz

      I use OpenSAPUI5 for private projects for a long time. Furthermore, I’m a big fan of Angular.

      Finally, I can use Angular with SAP Fiori web components together!

      Great Job!!

      Author's profile photo Mladen Droshev
      Mladen Droshev
      Blog Post Author

      Maxi Dietz Keep trying Fundamental NGX and share your feedback!