Component Styling In Angular
As a frontend framework, styling is essential in Angular. This provides a basic overview of how components can be styled in Angular. Styling angular components has been simplified since the styling used follows the basic rules of CSS or sass. The same selectors used in CSS are used similarly in Angular.
- Angular provides a global stylesheet aptly named as styles for all styles that will affect components across the application. You can also use the @mixin directive together with the @include directive to define global styles.
2. Component metadata includes two properties that can be used to style a component.
The styles property allows you to use CSS selectors on the ts file to style the template file related to the component.
The styles url is an array that contains a path(s) to an external stylesheet. The array can take more than one stylesheet in the event you want to affect the styles of a component using two different stylesheets e.g. if you have a stylesheet for only modals, or for only forms, together with a stylesheet specific to a particular modal.
3. Components can also be styled using style tag/link to stylesheet defined in the template file just the same way you would style a html file with a style tag or a link tag.
4. Finally, you can also use inline styles directly on a tag/element inside a template file
Component styling in angular also allows the use of special selectors such as :host and :host-context, :part.
Another special selector that can be used is :ng-deep. Ng-deep should be used sparingly as it bypasses the encapsulation of styles provided for by the components.
The :host selector targets the host element of a component. The :host selector can also be combined with other selectors to target the children of the host element.