0

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

Niladri
  • 5,832
  • 2
  • 23
  • 41
AWGAL
  • 157
  • 1
  • 2
  • 12

4 Answers4

1

You can have style-sheet corresponding to each component you create. Specify which stylesheet you want to use for a component while declaring the component: e.g.

@Component({
    selector: 'your-component-selector',
    templateUrl: './your-component.html',
    styleUrls: ['./your-component.css']
})

You can have multiple stylesheets for a component using the styleUrls array.

Hope it helps!

Buhake Sindi
  • 87,898
  • 29
  • 167
  • 228
alokstar
  • 499
  • 2
  • 7
  • I already have that buddy, like i can modify divs, paragraphs etc. Its for elements like .ui-carousel { position: relative !important; padding: 0.683rem !important; border: none !important; background: white !important; } which i can edit in global but not in the custom css pages which i have definedd for each component – AWGAL Oct 12 '18 at 17:47
  • You can also make use of @Input property on your reusable( child) component and provide the value for that in your parent component. – alokstar Oct 12 '18 at 17:50
  • if the element is not in the parent component, you have to specify the style in the CSS for the child component. – Yvonne Aburrow Oct 12 '18 at 18:15
1

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

Sunil Singh
  • 11,001
  • 2
  • 27
  • 48
  • So i want to have each component to have its own css file. i have this linked in the ts file. so lets say x.css and y.css in separate folders for x and y components. when i put styles in each css for divs and paragraphs it works, when i put elements like dropdown menus css it doesnt work. – AWGAL Oct 12 '18 at 20:41
  • I had updated the answer with **Overwrite CSS** option. – Sunil Singh Oct 12 '18 at 20:56
  • sorry for the late reply buddy. :host>>> did the trick. Thanks a lot :D – AWGAL Oct 22 '18 at 13:28
  • I just ran into another problem. :host doesnt work with scss is there a similar feature i have looked but cant find one – AWGAL Oct 26 '18 at 16:54
  • try escaping `\:host` – Sunil Singh Oct 26 '18 at 16:58
0

I think you might need to explain your question a little bit if @alokstar's answer is not what you need, because that is how I would do it as well.

If you have a CSS file for each component, plus the global one, and you specify which stylesheet you want to use in which component, there wouldn't be a problem.

p-carousel { <some css styling>; }

I think this article link explains it pretty well too.

Lirianna
  • 330
  • 1
  • 13
0

Please see this link Apply CSS Style to child elements

Possible solution would be to apply a custom class name to each instance on a div wrapper or the element itself. You may also need to apply ::ng-deep but ultimately you need some sort of identifier to make them a unique 1:1 to the css you want to apply.

<p-carousel class="classInstance1 " numVisible="4"

p-carousel.classInstance1 .ui-carousel { 
    position: relative !important; 
    padding: 0.683rem !important; 
    border: none !important; 
    background: white !important; 
} 

p-carousel.classInstance2 .ui-carousel { 
    position: relative !important; 
    padding: 0.683rem !important; 
    border: none !important; 
    background: green !important; 
}
Marshal
  • 10,499
  • 2
  • 34
  • 53