CODEWITHSUNDEEP
cssangular
Guebli Mohamed Abdessamed
Guebli Mohamed Abdessamed

Reputation: 1

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

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!!

Upvotes: 0

Views: 110

Answers (3)

Joe Clay
Joe Clay

Reputation: 35817

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).

Upvotes: 1

user7046583
user7046583

Reputation:

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.

  1. Split the sting. Output array
  2. 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.

Upvotes: 0

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657741

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']
})

Upvotes: 0

Related Questions