CODEWITHSUNDEEP
cssangularangular5
Coder
Coder

Reputation: 131

CSS changes not reflecting in Angular 5

I am trying to add css in Angular component, but it is not working. I am using tabmodule of ngx-bootstrap Tabs.

Here is my code:

.component.html

<tabset class="tab-container">
        <tab *ngFor="let tab of tabs" active="tab.active" appTabHighlight>
            <ng-template tabHeading><span>{{tab.title}}</span> <i class="fas fa-times" (click)="removeTab($event, $index)"></i></ng-template>

            <h1>{{tab.content}}</h1>
        </tab>

    <button class="btn btn-default" (click)="addTab()"></button>
</tabset>

In the dom something like the following gets created:

<tabset _ngcontent-c17="" class="tab-container">
    <ul class="nav nav-tabs" ng-reflect-klass="nav" ng-reflect-ng-class="[object Object]">
        <li class="nav-item ng-star-inserted" ng-reflect-ng-class="nav-item,">
            <a class="nav-link" href="javascript:void(0);" id="">
                <span ng-reflect-ng-transclude="[object Object]"></span>
                <span _ngcontent-c17="" class="ng-star-inserted">Tab 1</span>
                <i _ngcontent-c17="" class="fas fa-times ng-star-inserted"></i><!--bindings={}-->
            </a>
        </li>
    </ul>

Now when I try to add css, as follows nothing seems to work. border-bottom doesn't get applied.:

.tab-container {

    ul {
      &.nav-tabs {
        border-bottom: 4px solid red;
      }
    }
}

Update Setting encapsulation to ViewEncapsulation.None worked for me, but it would cause some other issues for my component. If someone could figure out a reason for this not working, that would be great.

Upvotes: 3

Views: 7904

Answers (2)

tatsu
tatsu

Reputation: 2536

What I strongly advise is using some form of SASS or other such as SCSS files.

With .scss instead of .css you can reap the greatest benefits from all worlds (global style and compartmentalized/encapsulated style)

I would have a root.scss file imported in all my component's scss files to avoid (css) code duplication. and every component would contain a <div [ngClass]="root"> </div> as it's root div.

and this would mean some global style rules would apply but the rest of the css would be in component.scss of that component.

very legible code with small line count for each file.

Angular CLI facilitates both creating a project that is scss-oriented and converting a css project to scss :

For old projects :

  1. Change the default style extension to scss

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json(Angular 6+) or run:

ng config defaults.styleExt=scss

  1. Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)

  2. Point the CLI to find styles.scss

Manually change the file extensions in apps[0].styles in angular.json

  1. Point the components to find your new style files

Change the styleUrls in your components to match your new file names

For new projects :

ng new your-project-name --style=scss

If you want to set the default for all projects you create in the future run the following command:

ng config --global defaults.styleExt=scss

source : https://stackoverflow.com/a/45255290/4770754

there's a good case to be made for scss to be the default, especially for the sake of newer coders, but I guess the idea is : https://www.quora.com/Why-dont-browsers-support-SASS-LESS-natively

Upvotes: 2

vasim akram
vasim akram

Reputation: 1

If you have yoursStyle.css or yours.component.css in your project it reads that yoursstyle.css. so is you override the style in your seperate component some times it's not working. So either you have to change in styles in your .component.html or in yourstyle.css

Upvotes: 0

Related Questions