#

Sunny Kushwaha

Admin

Angular ngStyle Example

In Angular, ngStyle is a directive that allows you to set CSS styles dynamically based on conditions or variables in your component.
Here's an example:

ngStyle Basic Example
                                    
                                        <div [ngStyle]="{'color': color, 'font-size': size + 'px'}">
                                            <!-- color and size can be set from component ts file -->
                                        </div>
                                    
                                
ngStyle Example With Ternary Operator
                                    
                                        <div [ngStyle]="isValid ?  {'background-color': 'green'} :{'background-color': 'red'}">
                                            <!-- isValid (can be set from component ts file) can be true or false, if true bg color green else bg color red -->
                                        </div>
                                    
                                
ngStyle Example With Multiple Condition
                                    
                                        <div [ngStyle]="isFirst || isSecond ?  {'background-color': 'green'}  :{'background-color': 'red'}">
                                            <!-- isFirst or isSecond (can be set from component ts file) can be true or false, if isFirst or isSecond true bg color green else bg color red -->
                                        </div>
                                    
                                
That's all you need to implement ngStyle my friend!
  • Please refer Below links for details