3

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.

Coder
  • 131
  • 1
  • 5
  • Where are you adding that css, in which file? Do you include that file to your component using `styleUrls: ['./your.component.css']` ? – Maxim Mazurok Feb 18 '19 at 17:40
  • Yes I am adding it in `.component.scss` file and yes it is included in styleUrls. – Coder Feb 18 '19 at 17:41
  • @MaximMazurok Is it because tabset is an external component and I cannot change the css for that? – Coder Feb 18 '19 at 17:42
  • 1
    Sounds like you have your styles in the wrong place if changing `ViewEncapsulation` causes it to work. Please share the structure of your solution if you want more help. – Heretic Monkey Feb 18 '19 at 18:02
  • @Coder I agree with Heretic Monkey, share project structure, please. Screenshot will be fine. – Maxim Mazurok Feb 18 '19 at 18:36
  • What does the ampersand do here? `ul { &.nav-tabs {` Is it the same as `ul.navtabs {`? If all else fails try adding `!important` – JGFMK Feb 18 '19 at 19:10

2 Answers2

2

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

Community
  • 1
  • 1
tatsu
  • 2,316
  • 7
  • 43
  • 87
0

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

vasim akram
  • 1
  • 4