CODEWITHSUNDEEP
cssangulargrid
Morteza Moradi
Morteza Moradi

Reputation: 47

how change style grid in angular 6

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????!!!!!

Upvotes: 0

Views: 1026

Answers (2)

Stanislav
Stanislav

Reputation: 23

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>

Upvotes: 1

Dima Shivrin
Dima Shivrin

Reputation: 99

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

like that:

What does :host /deep/ selector mean?

Upvotes: 1

Related Questions