CODEWITHSUNDEEP
cssangularangular8
Luas denis
Luas denis

Reputation: 31

Override style of an external library from our component angular

I am using an external panel component which would open on a button click.It has default width and other style properties.Is there any way I can override the width of the panel and used as responsive one .what i want to achieve is programmatically change the width of the panel in my components . For example, In my app.component.html iam using the panel container inside app.component.html

panel-container

How can i attach a custom class panel-container class ="panel-width"

In.css .panel-width{ Width:500 px }

Without changing angular default view encapsultion

Upvotes: 1

Views: 6659

Answers (3)

Fai Zal Dong
Fai Zal Dong

Reputation: 247

Overwriting library styles in separate global styles — not scoped!

let's override the Angular Material tab style.

  1. create angular material tab scss file in app > assets > scss > override > am_tab.scss

  2. and import the am_tab.scss file in the styles.scss @import 'assets/scss/override/am_tab.scss'

    // am_tab.scss

mat-tab-group {
  &.mat-tab-group.mat- primary .mat-ink-bar {
    background-color: red;
  }
}

More read in this article

Upvotes: -1

Akora
Akora

Reputation: 825

You can use :host::ng-deep to style the external component.

:host::ng-deep .panel-container {
  width: 500px;
}

It is deprecated since 2017, but there is no new way to do this if you do not want to change ViewEncapsulation. Source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Upvotes: 8

Luas denis
Luas denis

Reputation: 31

Got the solution. We can override the same in our parent CSS file itself. Dont use ng deep as that s deprecated

Upvotes: -1

Related Questions