Add style to outer div of Angular selectors by conditions

Question

I have three components which creates a hierarchy structure like this:

<div>c1 is the root</div>
|
 ------ c2 is inisde c1
         |
          -------- c3 is inisde c2

How can I add style to the specific div which consists of c2 > c3 in specific order?

Doesn't help you using class for each component separately? — ng-hobby
– ng-hobby, Commented Dec 30, 2019 at 22:07

rkparmar · Accepted Answer · 2019-12-31 02:32:58Z

1

You can add condition styles as below:

(1) [style] option

<div [style.color]="c1Condition ? 'red' : 'black' ">
     c1 is the root
     <div [style.color]="c2Condition ? 'red' : 'black' ">
          c2 is inisde c1
          <div [style.color]="c2Condition ? 'red' : 'black' ">
               c3 is inisde c2
          </div>
     </div>
</div>

(2) [ngStyle] in .html file

<div [ngStyle]="currentStyles1">
   Hello World
</div>

and in component.ts

this.currentStyles1 = {     
       'font-style':  this.canSave  ? 'italic' : 'normal',  
       'color':       this.hasError ? 'red'   : 'black',     
       'font-size':   this.hasError ? '24px'   : '12px'   
};

(3) [ngClass] option

<div [ngClass]="false ? 'c_on' : 'c_off'">Hello world! </div>

answered Dec 31, 2019 at 2:32

rkparmar

1425 bronze badges

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

2 Comments

Jan Testowy Over a year ago

But this is typically to angular. Is there any option with raw css?

rkparmar Over a year ago

@JanTestowy - you mean just .html .css? this seems way old school approach. If you are using Angular than I would recommend to use angular way conditional styles.

Collectives™ on Stack Overflow

Add style to outer div of Angular selectors by conditions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related