Styles not getting rendered when reference css is added to component css file

[vasamsetti saikiran]

Hi, 
I'm adding the css references inside component.css file instead of creating a style and adding the same in angular.json's style section. 

Doing so, it's not rendering the css as expected. Could you let me know if it is mandatory to have these css's added to angular.j

[Vijay Ravi]

Hi Vasamsetti,
 

To ensure that your CSS styles are properly applied in an Angular component, you should follow these best practices:

1. Angular Component Style Isolation: By default, styles defined in a component's CSS file are scoped to that component. If you want your styles to apply globally or affect third-party library elements, you need to override this behavior.
2. Using ViewEncapsulation.None: You have checked ViewEncapsulation.None in your component decorator, which means that styles will not be scoped to this component and can apply globally.
3. Ensure CSS Specificity: Make sure your CSS selectors are specific enough to target the elements created by the Syncfusion Schedule component.
4. Loading CSS Files: You don't need to add styles to angular.json if you want them to be scoped to a component. However, for global styles, you should add them to styles in angular.json.

[app.component.css]

.schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,
.schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {

      width: 200px;

}

[app.component.ts]

once ensure ViewEncapsulation.None is correctly used in your project.

import { Component, ViewEncapsulation } from '@angular/core';

import { MonthService, DayService, WeekService, WorkWeekService, TimelineViewsService, TimelineMonthService, ResizeService, DragAndDropService } from '@syncfusion/ej2-angular-schedule';

 

@Component({

      selector: 'app-root',

      templateUrl: 'app.component.html',

      styleUrls: ['app.component.css'],

      encapsulation: ViewEncapsulation.None })

 

export class AppComponent {

     // Your component logic here

}

[angular.json]

"projects": {

      "demo": {

        "root": "",

        "sourceRoot": "",

        "projectType": "application",

        "prefix": "app",

        "schematics": {},

        "architect": {

          "build": {

            "builder": "@angular-devkit/build-angular:browser",

            "options": {

              "outputPath": "dist/demo",

              "index": "src/index.html",

              "main": "src/main.ts",

              "polyfills": "src/polyfills.ts",

              "tsConfig": "src/tsconfig.app.json",

              "assets": [

                "favicon.ico",

                "assets"

              ],

              "styles": [

                "src/styles.css",

                 "src/app/app.component.css" 

              ],

              "scripts": []

            },
}

Sample link: https://stackblitz.com/edit/angular-iucqkv-s1vpwf?file=angular.json,src%2Fapp.component.ts
 

Please get back to us if you need any further assistance

Regards,

Vijay