Change style of any control in Angular project
By: Yurii Kuznietsov
Tags: Angular, Angular2, Front End Development, Programming, Web Development

Angular guid

Change style of any control in Angular project

UI control and styles

Almost every web page is different, it has his own design. What about controls? In application we can use the library with a bunch of ready-made controls. Using that library will save us a lot of time but we need to set up styles. This task could be very tricky.

PrimeNG

In my project I use PrimeNG controls. In this example I will use it too, here is a small instruction how you can install PrimeNG in your project.

npm install primeng -save

npm install primengicon -save

npm install font-awesome -save

Open the angular.json and add the following in the styles section

“./node_modules/primeicons/primeicons.css”,

“./node_modules/primeng/resources/themes/nova-light/theme.css”,

“./node_modules/primeng/resources/primeng.min.css”,

Also we need to install animation module

npm install @angular/animations -save

Then we need to add this animation module to main module (AppModule) in ‘imports’ section

import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;

Also it might be need to setup ‘RouterModule’.

Global style

Every angular project has a global style file. We can set up controls in this file. All what we need is know the right class name.

Define control class

Set style to control in style.css

Result

ViewEncapsulation

Before we discuss ‘ng-deep’ let’s talk about ‘ViewEncapsulation’.

When we have two component and put one component into other, those components could have their styles, but child component does not know about styles of parent component. Every component styles are closet to any other styles except global styles (styles.css). That happens because of ‘ViewEncapsulation’ settings.

ViewEncapsulation:

Native: Uses browser’s native Shadow DOM. Check for browser support before enabling it.

Uses browser’s native Shadow DOM. Check for browser support before enabling it. ShadowDom: Uses browser’s native Shadow DOM v1 for better cross-browser support and is a shared standard across the browsers. Check the difference between Shadow DOM v0 to v1.

Uses browser’s native Shadow DOM v1 for better cross-browser support and is a shared standard across the browsers. Check the difference between Shadow DOM v0 to v1. Emulated: Imitates behavior of Shadow DOM to scope the CSS for component and appends to the head.

Imitates behavior of Shadow DOM to scope the CSS for component and appends to the head. None: Neither Shadow DOM nor custom implementation, like global CSS which gets appended to the head

Angular uses ViewEncapsulation.Emulated as default encapsulation.

Components styles and html markup

Result

If we want to change this behaviour we need to change ‘ViewEncapsulation’ parameter.

ViewEncapsulation.None

sub component see styles in main component

ng-geep

According to documentation ‘ng-deep’ deprecated, but it still working.

‘ng-geep’ working like ‘ViewEncapsulation.None’, we can see all styles of out app and replace them when we need it.

It is good to use when you need to change some styles in one component not everywhere.

ng-deep

Control became red

Now we know how we can change styles of controls.

If you need to take a close look on project here is the link.