How to use Custom CSS File in Angular Application

13 Jan 20231 minute to read

This guide explains the process of using custom styles generated by the Theme Editor in an Angular application that uses Essential JS2 Angular components.

Create an Angular application

Follow the documentation to create an Angular application that includes Essential JS2 Angular components.

Generating custom CSS file

Use the theme-studio to generate a custom CSS file.

Adding custom CSS in Angular application

Place the generated custom CSS file inside the ./src/ directory of your Angular application.

Custom style mapping

In the ./angular.json file, add the path to the custom CSS file under the architect/build/options/styles property, as shown below,

"styles": [
             "src/styles.css",
             "src/custom-material.css"
          ],

Run Angular application

Start the Angular application and the Essential JS2 Angular components will now display with the custom styles.