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

https://stackoverflow.com/questions/68443318/how-can-i-style-my-child-components-from-parent/68443521#68443521 and your [forked stackblitz](https://stackblitz.com/edit/angular-ivy-i6mjxw?file=src%2Fapp%2Fa%2Fa.component.css,src%2Fapp%2Fmy-card%2Fmy-card.component.html,src%2Fapp%2Fmy-card%2Fmy-card.component.css,src%2Fapp%2Fmy-card%2Fmy-card.component.ts) — Eliseo, May 12 '22 at 14:31

score 1 · Answer 1 · answered May 12 '22 at 14:15

1

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 '22 at 14:15

tony

834
5
10

score 1 · Answer 2 · answered May 12 '22 at 14:28

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>

Matteo Brusarosco · Answer 3 · 2022-05-12T14:27:52.427

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 '22 at 14:27

answered May 12 '22 at 14:21

Matteo Brusarosco

36
1
5

1

Rememeber that viewEncapsulation.None makes the .css was "global" to all the aplication – Eliseo May 12 '22 at 14:24
@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. – Matteo Brusarosco May 12 '22 at 14:30

Angular: styling custom component

3 Answers3