Angular: styling custom component

Question

I have a component (my-card-component) which is made up of a mat-card with the classes .my-card. I use this component inside two other components. In component "A" I need .my-card to be 380px width, and in component B I need .my-card to be 100% width. The app starts in component A and .my-card is 380px width. Then I navigate to component B and .my-card has 100% width, but if I go back to component A, it doesn't apply the 380px width, instead it keeps the 100% width of component B. I've tried several options, including ::ng-deep .my-card, but I can't get it to apply the width correctly, can someone help me?

my-card-component HTML

<mat-card class="my-card">

my-card-component CSS

.my-card {
  cursor: pointer;
  transition: none !important;
  box-shadow: 1px 2px 8px rgba(31, 31, 31, 0.08);
}

component A HTML

<app-my-card-component></app-my-card-component>

component A CSS

::ng-deep .my-card {
   width: 380px  !important;
}

component B HTML

<app-my-card-component></app-my-card-component>

component B CSS

::ng-deep .my-card {
   width: 100% !important;
}

Example

stackoverflow.com/questions/68443318/… and your forked stackblitz — Eliseo
– Eliseo, Commented May 12, 2022 at 14:31

tony · Accepted Answer · 2022-05-12 14:15:40Z

2

place :host before ::ng-deep like :host ::ng-deep .my-card

for a

:host ::ng-deep .my-card {
  width: 380px;
  background-color: blue !important;
}

for b

:host ::ng-deep .my-card {
  width: 100%;
  background-color: aqua !important;
}

answered May 12, 2022 at 14:15

tony

9655 silver badges13 bronze badges

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

Comments

Fletch · Accepted Answer · 2022-05-12 14:28:02Z

1

Try this https://stackblitz.com/edit/angular-ivy-onxbdb?file=src/app/b/b.component.html

The key is to pass in an additional class to the my-card component

component html

<app-my-card [extraClassToApply]="'my-card-b'"></app-my-card>

my-card.component.ts

export class MyCardComponent {

  @Input() extraClassToApply = "";
  constructor() { }
}

my-card.component.html

<mat-card class="my-card" [ngClass]="extraClassToApply"></mat-card>

answered May 12, 2022 at 14:28

Fletch

9172 gold badges15 silver badges37 bronze badges

Comments

Matteo Brusarosco · Accepted Answer · 2022-05-12 14:27:52Z

0

You shouldn't use ::ng-deep since it has been deprecated long time ago.
Instead of ng-deep you should use viewEncapsulaton.None and set for each component a specific class.

Here is the solution on stackBlitz.

With proper css selectors you can make the classes disappear and stop overwriting everything.

with .class1 > * > .class2, you render your rules only if every class is rendered and select class2 no matter what is the cointainer.

edited May 12, 2022 at 14:27

answered May 12, 2022 at 14:21

Matteo Brusarosco

461 silver badge5 bronze badges

3 Comments

Eliseo Over a year ago

Rememeber that viewEncapsulation.None makes the .css was "global" to all the aplication

Matteo Brusarosco Over a year ago

@Eliseo correct. Another way is to implement a css file on the styles source of the project and use proper class selectors to avoid overwriting.

Rekesoft Aug 6 at 10:12

It was deprecated long ago, and it will be un-deprecated long before it is removed since it provides a functionality that can't be replaced by anything else. Angular was made to encapsulate code, html and css in reusable components. "Turn off encapsulation" to resolve a CSS problem is like saying "do it in jQuery" to solve a JavaScript/TypeScript question about Angular code.

Collectives™ on Stack Overflow

Angular: styling custom component

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related