Angular 5 Custom CSS

Issue

Hey guys so im struggling to figure out how to add custom styles to elements for different pages
If i add the styles to the global css it works.
For example i use ui-carousel on three different pages and i need them to look different on each, so global wont work for me in this case
If i put a div class in my indiviudal css pages it works fine as i can name the class.

<h3 style="margin-left: 20px;">Fotos</h3>
<p-carousel numVisible="4"
        [value]="_photos">
            <ng-template let-p pTemplate="p">
                <p>
                    <img style="    width: 100%;
                    padding: 4px;
                    /* margin: auto; */
                    border: 1px solid #ddd;"
                         [src]="p.photo">
                </p>
            </ng-template>
   </p-carousel>

Any help appreciated

Solution

Let us understand your query first –

You want to change the css styling of element or component in different places.

For this you following options –

@Input inline css

If you have just few properties you want to update then you can opt for inline css.

@Input Style Class

If you have set of themes that you want to apply on the component, then you can go with the CSS Class option as @Input

There are some more advance option like Dynamic Template but I don’t think you need that.

Overwrite CSS

To overwrite css you can use :host or :host ::ng-deep

Examples :

:host >>> .ui-dropdown-item {...}

or

:host ::ng-deep .ui-dropdown-item {...}

You can see the demo in action here – https://stackblitz.com/edit/angular-wz8iq4

Answered By – Sunil Singh

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.