how change style grid in angular 6

Question

I have this style:

.main-panel{
  height: 100%;
  display: grid;
  grid-template-rows: 4rem auto;
  grid-template-columns: 14rem auto;
  grid-template-areas: 'header header''sidebar body';
}

Now how do I change the style grid-template-areas in angular

for example :

grid-template-columns: 14rem auto;
grid-template-areas: 'header header''sidebar body';

to >>>

grid-template-columns: 100%;
grid-template-areas: 'header header''sidebar sidebar';

Doesn't angular support styles from css grid????!!!!!

score 1 · Answer 1 · answered Sep 02 '18 at 13:15

1

Can you share your HTML? Maybe you need to target :host /deep/

like that:

What does :host /deep/ selector mean?

answered Sep 02 '18 at 13:15

Dima Shivrin

99
2
11

score 1 · Answer 2 · answered Nov 02 '18 at 08:34

You can create two class, and dynamic change class of an element. example css

.A{
grid-template-columns: 14rem auto;
grid-template-areas: 'header header''sidebar body';
}

.B{
grid-template-columns: 100%;
grid-template-areas: 'header header''sidebar sidebar';
}

in HTML

<div [ngClass]="{
 'A': isA,
 'B': isB
}"></div>

how change style grid in angular 6

2 Answers2