How to style the host element of the component in AngularJS ? Last Updated : 06 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Approach: Styling of host components uses CSS properties, which can be altered, modified, and updated whenever needed. The CSS properties are listed as follows: color: Used to set font color.background-color: Used to set background color.font-size: Used to set the size of the font.padding: Used to set space around the text.Syntax: <element ng-style="property"></element>Example 1: This example uses an ng-style directive. CSS properties of font color and background color are used here. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="gfg" ng-controller="gfgctrl"> <h1 style="text-align: center; color:green"> GeeksforGeeks </h1> <h2 ng-style="ele">GFG</h2> <h2 ng-style="ele">Portal</h2> <script> var app = angular.module("gfg", []); app.controller("gfgctrl", function($scope) { $scope.ele = { "color": "white", "background-color": "green", } }); </script> </body> </html> Output: Example 2: This example shows the styling of components based on font-size, font-color, and background color. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="gfg" ng-controller="gfgctrl"> <h1 style="text-align: center; color:green"> GeeksforGeeks </h1> <h2 ng-style="ele">GFG</h2> <h2 ng-style="ele1">Portal</h2> <script> var app = angular.module("gfg", []); app.controller("gfgctrl", function($scope) { $scope.ele = { "color": "white", "background-color": "green", "font-size": "120px", } $scope.ele1 = { "color": "white", "background-color": "green", "font-size": "20px", } }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to append Angular styles in footer ? R riarawal99 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads Explain the Role of @Component Decorator in Angular Components are the fundamental building blocks that create the different parts of our Angular application that we see and interact with. They combine the appearance and functionality of a specific part of the application and can be used in different places..A decorator is a TypeScript feature that a 4 min read 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 5 min read How to communicate from parent component to the child component in Angular 9 ? Angular makes the communication between components very easy. In this article, we will learn how to communicate from a parent component to the child component. Approach: Let's create two components: parent child In the parent component, declare the property that you want to receive in the child comp 2 min read How to append Angular styles in footer ? To append CSS styles to footer or any HTML element with angularJS, we can either use ng-class directive if we have a predefined CSS class, or ng-style directive if we want to dynamically create styles in runtime. Syntax: <footer ng-style="jsObject">...</footer> OR <footer ng-class="js 2 min read How to conditionally apply CSS styles in AngularJS ? In AngularJS we can build the dynamic single-page application with interactive CSS embedded in it. But as usual, while developing the application, the CSS is once statically defined and used, we are not changing the CSS when the application is running. But, in AngularJS we can dynamically change the 5 min read How to control size of an element on resize of window in a component ? Angular is a popular JavaScript framework for building single-page applications (SPAs). It provides a set of tools and libraries for building rich, interactive web applications using modern web technologies such as HTML, CSS, and TypeScript. One of the key features of Angular is its component-based 3 min read Like