How to access local css class names from within the angular component

Question

I need to access the generated css classname from within an angular component, in order to style a 3rd-party component.

Angular does some magic transformations on the local css classnames to enable scoping. I need to apply some custom styles to an ngx-datatable component. To do this, I need to pass it custom classnames. Because of what angular does to the classnames, these no longer match.

Adding the classnames to the global scope or using ::ng-deep both work, however I would rather not break the encapsulation.

dashboard-component.ts

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
    getRowClass(row){
        return 'my-class';
    }
}

dashboard-component.scss

.my-class {
   background: green;
}

dashboard-component.html

<ngx-datatable
   [rowclass]="getRowClass"
></ngx-datatable>

The way I see it I should be able to access some reference to the css class from within the component, say this._styles, which will then carry the generated name of the class at runtime, so I can do

getRowClass(row){
    return this._styles['my-class'];
}

you can just set the encapsulation to ViewEncapsulation.None — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Aug 9, 2019 at 12:47

Wai Ha Lee · Accepted Answer · 2019-08-09 13:59:15Z

2

I think you are not able to propagate your styles to ngx-datatable.

You can use encapsulation: ViewEncapsulation.None within your @component but make sure you use it carefully as it will lead to some weird css behaviours.

Next, What you can do is create a container for your dashboard.html file like:

<div class="dashboard-container">
  <ngx-datatable></ngx-datatable>
</div>

and inside your dashboard.scss you can reference the parent container

.dashboard-container {
  .my-style{}
}

edited Aug 9, 2019 at 13:59

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Aug 9, 2019 at 12:54

Alok

981 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

A. Bertrand Over a year ago

What's the benefit of creating the container?

Muhammed Albarmavi Over a year ago

if you don't set encapsulation: ViewEncapsulation.None this style will not work 🤔

Muhammed Albarmavi Over a year ago

@A.Bertrand just create a wrapper for the classes so will not effect other componenet use the same class

Muhammed Albarmavi Over a year ago

can be a good wrapper is like this ngx-datatable { .my-style {} } 🔥🔥

Muhammed Albarmavi Over a year ago

cI have use it here 👍 stackblitz.com/edit/…

|

Muhammed Albarmavi · Accepted Answer · 2019-08-09 13:37:05Z

Just put the css classes in the global style file ,otherwise you will need to use ::ng-deep,so my advice to put ngx-datatable in the global style file

check the ngx-datatable demo asset/app.css where the did the same

another option you can set the encapsulation: ViewEncapsulation.None on the component the the class name will be the same

    @Component({
      selector: "app-demo",
      templateUrl: "./demo.component.html",
      styleUrls: ["./demo.component.scss"],
      encapsulation:ViewEncapsulation.None
    })
   export class DemoComponent implements OnInit {

demo.component.scss

ngx-datatable {
  .green-color {
    background:green;

    & div {
      color :#fff;
    }
  }
}

set the encapsulation to none or put the style in global style file are the same here because both ways will be the style globally without any change

demo 🔥

Collectives™ on Stack Overflow

How to access local css class names from within the angular component

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related