Getting Started with Fundamental Library Styles in Angular Project
Step-by-Step Tutorial
If you are looking for a faster way to build your next Angular project, you have landed in the right post. This post walks you through installing the Fundamental Library Styles into your Angular Project and using its components. The Fundamental Library team also provides a whole library based on Angular; Fundamental NGX. To get a better picture of the differences between Fundamental Libray Styles and Fundamental Library NGX, check this post. The source code is provided in this post as well.
What is Angular?
Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It helps with creating Single Page Applications. It is one of the most used frameworks in the corporate world.
What is Fundamental Library Styles?
Fundamental Library Styles is part of the Fundamental Library. It is a lightweight presentation layer that helps build consistent SAP Fiori apps in any web-based technology; Angular, Vue, React, etc. The library consists of already designed and built components, so they can be easy to implement and work with. Another benefit of using the Fundamental Library Styles is the fact that it is an open-source and community-driven library. Everyone outside of the core team can contribute to the code or share ideas with the team. The library’s mission is to deliver a harmonized and accessible user experience for a wide and inclusive audience.
Get Started
1. Install Node.js
Most of the JavaScript libraries or frameworks would need Node.js to be installed on your computer. Whether you are using npm or yarn, they both require Node.js. In this demo, we will use NPM to install our frameworks and libraries. npm is the package manager for the Node JavaScript platform. It puts modules in place so that nodes can find them, and manages dependency conflicts intelligently.
Make sure you have an up-to-date version of Node.js installed. To install or update the latest Node.js version, navigate to the Node.js website and click on the latest stable version or the newest current release (with the latest features).
2. Initiate the Angular project
We will get started with a single-page project in Angular in this demo. A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
Use your terminal to navigate to the path you want your project to be saved and use:
ng new name_of_the_project
Since we are creating a Single Page Application, there is no need to add the Angular routing. Routing in Angular helps us navigate from one view to another as users perform tasks in web apps. However, for this demo, we won’t need to navigate through the page. We also picked SCSS because it is slightly more advanced than plain CSS, but there is no obligation. The Fundamental Library Styles uses SCSS to create nice and smooth designs for its components.
Wait a couple of minutes for the project to be fully completed and then enter the project through cd name_of_the_project and run your Angular project using npm start or ng serve.
Congratulations 🎉! You’ve just created your Angular Project. The project should look like the Screenshot above. Go ahead and delete all the info from the app.component.html so we can start building our own.
3. Install Fundamental Library Styles
Referring to the previous blog post on “How to install the Fundamental Library Styles” , you can use npm install fundamental-styles --save to install the library in your project. The full components list will be installed and ready to use.
Next, make sure you install the theming so you can use any of the themes available in the library:
npm install @sap-theming/theming-base-contentFor this demo project, we will be using the newest SAP Horizon theme. Make sure you include the following <link> in the index.html file in your project.
<link href=’https://unpkg.com/fundamental-styles@latest/dist/fundamental-styles.css' rel=’stylesheet’>
<link href=’https://unpkg.com/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css' rel=’stylesheet’>
<link href=’https://unpkg.com/fundamental-styles@{versionNumber}/dist/theming/sap_horizon.css' rel=’stylesheet’>
Congratulations 🎉! You have fully installed Fundamental Library Styles in your Angular Project.
Bonus
To check if you have successfully installed the project, you can go to the Fundamental Library Styles Documentation and pick any component offered in the library. Copy and paste the code into your project and see if the component is displayed as in the documentation.
To test it, I picked fd-message-box and the result is as shown in the screenshot below. I put a black background so the message box component can she displayed better but you can pick any color.
Conclusion
In this blog post, we walked through adding the Fundamental Library Styles in an Angular project from scratch. In the next post, we are going to build a small project using Fundamental Library Styles and Angular. If you would like to skip these steps, you can start your project with this demo app. The source code of the demo app can be found here.
Happy Coding!
