Some good examples for the use of ngClassīut there are many other state styles that are not natively supported by the browser. So for these very common cases we won't need ngClass. hover styles and on-click active state styles (using :hover and :active)įor these type of state styles natively supported by the browser, it's better to use the CSS pseudo classes whenever possible.styles for identifying an element with the focus, via the :focus pseudo class.Note that many state styles can be natively implemented using browser CSS pseudo-classes, such as for example: This is, for example, the case of state styles (if we adopt the SMACSS terminology). Most of the styles that we need to apply are always present, and can be simply be applied as standard HTML in our templates, like this:īut there are often styles that are applied conditionally to our templates - they are added to an element only if a certain programmatic condition is met. So without further ado, let's get started with ngClass and all the multiple ways that we have for using it! Component Styling using ngClass - when to use it? In order to cover each feature, we will be adding the multiple examples to this small Angular CLI sample application, that will use as external styles a Bootstrap default theme. ngClass support for component functions.ngClass support for Arrays, strings of classes, configuration objects.Component Styling using ngClass - when to use it and when to use other alternatives?.This post will cover the following topics:
#APPBOX CLASS ANGULAR 2 SERIES#
This is the first post of a two-part series in Angular Component Styling, if you are looking to learn about Angular style isolation and the Emulated View Encapsulation mode (which Angular uses by default), have a look at part two:Īngular :host, :host-context, ::ng-deep - The Complete Guide. In this post, we are going to learn the most commonly used options that we have available for styling our Angular components using the ngClass and ngStyle core directives.
0 kommentar(er)
