How to use Custom CSS File in Angular Application

5 Apr 20251 minute to read

This guide details the step-by-step process to incorporate custom styles in an Angular application using Essential^® JS 2 Angular components. The styles will be created using the Theme Editor.

Create an Angular application

Begin by setting up an Angular application with Essential^® JS 2 components. Follow our Getting Started documentation for detailed instructions on setting up your project environment and integrating the necessary components.

Generating custom CSS file

Customize your style by using the Syncfusion^® Theme Studio. This tool allows you to generate a custom CSS file tailored to your design preferences. Select your desired theme, modify the elements as needed, and download your custom CSS.

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

With everything configured, run your Angular application using the command:

ng serve

Now, your Essential^® JS 2 Angular components will reflect the custom styles specified in your CSS file.