ng-style – Applying styles dynamically

ng-style is an AngularJS directive used to apply inline CSS styles dynamically to an element based on expressions. It allows you to set styles programmatically in response to user interactions or conditions without needing separate CSS classes.

Topics Covered:

What is ng-style?
Basic Syntax
Using ng-style with Expressions
Applying Multiple Styles Dynamically
Using ng-style with Functions
Example: Changing Background Color Dynamically
Example: Adjusting Font Size Based on User Input
Difference Between ng-class and ng-style
Performance Considerations
Best Practices
Conclusion

1. What is `ng-style`?

ng-style dynamically applies inline styles to an element.
It accepts an object where the keys are CSS properties, and values are their corresponding expressions.
Unlike ng-class, which deals with CSS classes, ng-style directly modifies style attributes.

2. Basic Syntax

<div ng-style="{'color': textColor}">
    This text will change color dynamically.
</div>

If textColor = 'red', the text appears in red.
If textColor = 'blue', the text appears in blue.

3. Using `ng-style` with Expressions

You can pass a condition-based expression inside ng-style:

<p ng-style="{'color': user.role == 'admin' ? 'red' : 'blue'}">
    User Role
</p>

If user.role is 'admin', the text turns red.
Otherwise, it turns blue.

4. Applying Multiple Styles Dynamically

You can define multiple styles in one object:

<div ng-style="{'background-color': bgColor, 'font-size': fontSize + 'px'}">
    This box has dynamic styles.
</div>

$scope.bgColor = 'yellow';
$scope.fontSize = 18;

Background color becomes yellow.
Font size becomes 18px.

5. Using `ng-style` with Functions

For complex logic, you can use a function inside ng-style:

<div ng-style="getDynamicStyles()">Dynamic Styling Example</div>

jsCopyEdit$scope.getDynamicStyles = function() {
    return {
        'color': $scope.isImportant ? 'red' : 'black',
        'font-weight': $scope.isImportant ? 'bold' : 'normal'
    };
};

If isImportant = true, text becomes bold and red.
Otherwise, it remains normal and black.

6. Example: Changing Background Color Dynamically

<input type="color" ng-model="bgColor">
<div ng-style="{'background-color': bgColor}" style="width: 100px; height: 100px;">
</div>

The background color updates instantly as the user picks a color.

7. Example: Adjusting Font Size Based on User Input

<input type="number" ng-model="fontSize" placeholder="Enter font size">
<p ng-style="{'font-size': fontSize + 'px'}">
    This text size changes dynamically.
</p>

Entering 24 makes the text 24px large.
Entering 14 reduces the size to 14px.

8. Difference Between `ng-class` and `ng-style`

Feature	`ng-class`	`ng-style`
Usage	Adds/removes CSS classes	Directly modifies inline styles
Syntax	Object, Array, or Expression	Object-based (CSS property-value pairs)
Best for	Applying multiple classes	Applying inline styles dynamically
Performance	Better when styling multiple elements	Can lead to more DOM updates

9. Performance Considerations

🔹 Avoid using ng-style when CSS classes can achieve the same result.
🔹 Use functions only when necessary to avoid unnecessary re-rendering.
🔹 Minimize inline styles to keep HTML cleaner.

Topics Covered:

1. What is ng-style?

2. Basic Syntax

3. Using ng-style with Expressions