Styling Angular's components

Advisors

It's fully recommend generate classes to style components than use styling-inline in the templates.
In this article we referenced to file styles as scss, but it works exactly the same with css file types.

Once we created a component, to style them, we need to know that Angular has three levels to apply styles:

• General: This styles will be applied globally in all application. To define them need to edit the file src/styles.scss or in the main component app.component.scss.
• Component: To style the elements of component we need to edit the control.component.scss and add the special tag :host. This tag references exclusivily to elements in component template:

:host label {
  font-weight: bold;
}

• Subcomponent: If the component use another components inside and do you like edit the subcomponent styles, do you need to define this other special tag ::ng-deep. This special tag indicates that you like overwrite the styles of the subcomponent indicated where is ubicated inside the current component:

:host ::ng-deep own-button {
  font-color: white;
}