CODEWITHSUNDEEP
javascriptcssangularstylesprimeng
Nero
Nero

Reputation: 592

Apply css style to all primeng dialogs in my angular app

I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:

contact.html
contact.component.ts
contact.css

So I place the below css in contact.css and it changes the contact us dialog title bar color.

:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
    background-color: red
}

I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.

Upvotes: 1

Views: 513

Answers (1)

Chris W.
Chris W.

Reputation: 23270

So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.

You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.

However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.

Hope this helps, cheers!

Upvotes: 1

Related Questions