Why there's an array of strings instead of only one string in angular2 styles?

Question

I'm trying to learn Angular2, but i'm little bit confused about Component styles, in the component decorator we can specify the styles to apply them to our component, there are two ways to do this :

1- We can specify the css file in styleUrls property which is an array of strings, this is logic to me, because we might have multiple css files

@Component({
    selector: 'users-list',
    templateUrl: 'app/users-list.template.html',
    styleUrls: ['style1.css', 'style2.css']
})

2- We can write our style in the styles property which is an array of strings too, this is where i'm getting confused!! i mean why styles property is an array of strings ? why it's not just a single string !

@Component({
    selector: 'users-list',
    templateUrl: 'app/users-list.template.html',
    styles: [
        `
            .glyphicon{
                cursor: pointer;
            }
        `
    ]
})

In the official documentation of Angular2 they didn't say why they put an array of strings there instead of one string ! can anyone explain me!!

actually they are considering it as an json string and from that they selecting the class and to that class they applying the behaviors — Parthasarathy
– Parthasarathy, Commented Oct 20, 2016 at 12:00

Joe Clay · Accepted Answer · 2016-10-22 21:28:23Z

1

All of the CSS strings provided in the styles array will be applied to the component in combination. At first glance, this might sound useless, but it comes in handy if you want to mix multiple styles that aren't all hard-coded to your component. For example:

import commonStyles from "./commonStyles";

@Component({
    selector: 'users-list',
    templateUrl: 'app/users-list.template.html',
    styles: [
        ".glyphicon { cursor: pointer; }",
        commonStyles.background // This string of style rules gets applied too!
    ]
})

EDIT: To answer the questions in the comments:

commonStyles in this case would just be a normal JavaScript object containing CSS strings:

export default {
    background: "div { background-color: #00FF00; }"
};

And an advantage of doing things this way is that your application doesn't have to make additional HTTP requests to go get styleUrls (that said, I'm not familiar enough with Angular 2 to say whether or not this makes a tangible difference).

edited Oct 22, 2016 at 21:28

answered Oct 20, 2016 at 9:32

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

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

2 Comments

Guebli Mohamed Abdessamed Over a year ago

Can you please exaplain more what's inside the commonStyles ? is it an ordinary stylesheet file ?

Günter Zöchbauer Over a year ago

What's the difference or advantage of using styles with commonStyles.background to styleUrls?

Günter Zöchbauer · Accepted Answer · 2016-10-20 09:29:14Z

0

You can for example use a shared style file

@Component({
    selector: 'users-list',
    templateUrl: 'app/users-list.template.html',
    styleUrls: ['users-list.css', 'common-theme.css']
})

answered Oct 20, 2016 at 9:29

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

1 Comment

Guebli Mohamed Abdessamed Over a year ago

Well i'm asking about the styles propoerty and not about styleUrls.

user7046583 · Accepted Answer · 2016-10-20 10:01:25Z

0

So they can get the files through iterating specially if the array items is more than two.

That's the way they program instead of using 'style1.css style2.css'

If they used string. They will add one function.

Split the sting. Output array
Iterate array to get the files.

They used array to shorten the process and make application much faster. If you're building a small app using angular2. It won't hurt you. But if you are dealing with millions of data. It can also help but not too much. Atleast.

Regards.

answered Oct 20, 2016 at 10:01

user7046583

Collectives™ on Stack Overflow

Why there's an array of strings instead of only one string in angular2 styles?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest