Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
deno
Advisor
Advisor
1,808
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.

 
4 Comments