In this tutorial we look at various ways by which we can style our Angular components. We looked at how to apply global styles to the Angular app. You can apply styles to components in various ways. For example, using inline style, using external style, using template inline style, using ngClass directive, ngStyle directive etc. We cover all these in this article on Angular Component styles
Class Binding in Angular
The Angular Class binding is used to add or remove classes to and from the HTML elements. You can add CSS Classes conditionally to an element, hence creating a dynamically styled element.
Style binding in Angular
We can set the inline styles of a HTML element using the style binding in angular. The syntax resembles the syntax of the property binding. You can add styles conditionally to an element, hence creating a dynamically styled element.
View Encapsulation in Angular
View Encapsulation in Angular defines how the styles defined in the template affects the other parts of the application. The angular uses three strategies, while rendering the view ViewEncapsulation.Emulated, ViewEncapsulation.Native and ViewEncapsulation.None This article describes what is View Encapsulation using an example and how it is implemented in angular. We also learn what is shadow dom in Angular.
Introduction to Shadow DOM
This guide shows you what is shadow DOM and how to use it with a simple example. The CSS Styles are global in scope. The styles affect the entire web site, irrespective of where they are placed in the page. The global scoped CSS rules has few advantageous. For Example you can set the font of the entire web site at one place. But it also makes it easier to break the site. The CSS rules might target unwanted elements or clash with other CSS selectors. Similarly the JavaScript may also accidentally modify unintended parts of the app.