How To Style Components Using Angular ngClass?

How to combine ng-class with ng-style?

Last Updated : 31 Jul, 2019

The style attribute is set using ng-style. The value of ng-style is an object, which is used to refer to CSS style, which is applied to the element. Syntax:

<element ng-style="object">..</element>

Properties: Object: Object is used to return css style applied to the element. Return Value: It returns the style applied to the ng-class elements. Example 1:

javascript

 
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>

<body ng-app="gfg" 
      ng-controller="geekctrl">

    <h1 ng-style="geekstyle">
      GeeksforGeeks
  </h1>

    <script>
        var app = angular.module("gfg", []);
        app.controller(
          "geekctrl", function($scope) {
            $scope.geekstyle = {
                "color": "white",
                "background-color": "green",
                "font-size": "80px",

            }
        });
    </script>

</body>

</html>

Output:

Example 2:

javascript

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>

<body ng-app="gfg" 
      ng-controller="geekctrl">

    <h1 ng-style="geekstyle">
      GeeksforGeeks
  </h1>
    <h2 ng-style="geekstyle1">
      GeeksforGeeks
  </h2>
    <script>
        var app = angular.module("gfg", []);
        app.controller("geekctrl", function($scope) {
            $scope.geekstyle = {
                "color": "white",
                "background-color": "green",
                "font-size": "60px",

            }
            $scope.geekstyle1 = {
                "color": "white",
                "background-color": "green",
                "font-size": "80px",

            }
        });
    </script>

</body>

</html>

Output:

Browser Support: Listed browsers support ng-class with ng-style-

Internet Explorer
Firefox
Google Chrome
Opera
Safari

How To Style Components Using Angular ngClass?

R

riarawal99

Improve

Article Tags :

Similar Reads

How To Style Components Using Angular ngClass?

Styling components effectively is important in web development, and Angular offers various ways to apply CSS to your components. One of the most powerful and flexible methods is using the ngClass directive. The ngClass directive allows you to dynamically add or remove CSS classes based on component

How to override inline styles with external in CSS ?

In this article, we are going to learn how we can override inline styles with external CSS. Generally, we use inline CSS to override all the other styles. In some circumstances, we have to do the opposite. We have to override the inline CSS which has come from foreign sources and cannot be removed.

How to set active tab style with AngularJS ?

In this article, we will see how to set an active tab style using AngularJS, & will also understand its implementation through the example. This task can be accomplished by implementing the isActive and the ng-controller method. We will perform this task with 2 different methods. Method 1: The n

How to add a style on a condition in Tailwind CSS ?

In this article, we will see how to integrate conditional styling into our web projects using Tailwind CSS. There are various Tailwind CSS classes are available, although, it usually involves dynamically adding or removing classes using JavaScript. There are different approaches to implementing the

How to apply styles to multiple classes at once ?

Applying styles to multiple classes at once means using a single CSS rule to style multiple elements that share different class names. This can be achieved by separating class selectors with commas, allowing for efficient styling of various elements without redundant code.Here we have some common ap

How to set text color & font style in HTML ?

In this article, we will learn how to set text color & font style in HTML. The <style> tag in HTML helps us to set the text color & font style in HTML. This modification includes changing font size, font family, font color, etc. Not only the text but also we can change the style of a b

How to style the host element of the component in AngularJS ?

In this article, we will see how to style the host element of the component in AngularJS, along with knowing the basic implementation through the examples. This task can be accomplished by implementing the ng-style directive with the element. CSS properties help in the styling of the component. Appr

How to add background-image using ngStyle in Angular2 ?

The ngStyle Attribute is used to add some style to an HTML element. In this article, we will learn How to add background-image using ngStyle in Angular. To achieve this, we will follow the below approaches.Table of ContentSteps for Installing & Configuring the Angular ApplicationProject Structur

How to implement the Tailwind CSS with Custom Angular Library ?

Tailwind CSS is basically a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single

How To Implement Multiple Classnames In NextJS ?

When styling components in Next.js, it's common to encounter scenarios where you need to apply multiple classnames for different styling purposes. To implement multiple classnames in Next.js, you can utilize either the built-in classnames package or any other utility library like clsx. We will discu