Angular 5 custom component CSS

Question

I have a CSS file I ONLY want to be loaded when a component is on the page.

I have tried the following:

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styles: [
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
    ],
})

However without any luck. Does anyone know of a way to do this?

EDIT

So i am attempting to follow the answer below

Here is my folder structure:

My Component now looks like this:

import {Component, OnInit} from '@angular/core';

declare var Reveal: any;

@Component({
    selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: ['./templates/testview.css'],
})
export class TestviewComponent implements OnInit {

    constructor() {
    }


    ngOnInit() {
        Reveal.initialize({});
    }

}

And my testview.css file looks like this:

    @import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");

Does this also mean you want the CSS to be unloaded when the component is not being displayed anymore? — balu
– balu, Commented May 23, 2018 at 10:02
Take a look at Angular's ViewEncapsulation feature. While this won't help you load or unload the CSS at specific times, it will give you precise control over which DOM element / which component the styles are applied to—which, I suppose, is what you actually want(?) — balu
– balu, Commented May 23, 2018 at 21:37

לבני מלכה · Accepted Answer · 2018-05-23 10:10:42Z

1

You have to inside the urls inside array of styls: styleUrls instead of styles

SO

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: [
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
    ],
})

EDIT:

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: ['./templates/testview.css'

    ],
})

in you css ./templates/testview.css import files

@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");

edited May 23, 2018 at 10:10

answered May 23, 2018 at 9:24

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marc Rasmussen Over a year ago

when i do this i get a compiler error: Expected 'styles' to be an array of strings

rrd Over a year ago

@MarcRasmussen did you change 'styles' to 'styleUrls'? (subtle change)

Felix Lemke Over a year ago

The styles get bundled when building. This is technically not a seperate stylesheet anymore getting loaded when the component is created.

Marc Rasmussen Over a year ago

I am updating my question

לבני מלכה Over a year ago

try import /assets/vendors/custom/reveal.js-3.6.0/css/reveal.css

|

Collectives™ on Stack Overflow

Angular 5 custom component CSS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related