How to include .css file of my component in angular js

Question

I have included my component's .css file in this manner `

angular.
  module('home').
  component('home', {
    templateUrl: 'home/home.template.html',
    styleUrls: 'home/home.component.css'
    
    
  });

` But it seems that the stylesheet is not getting applied. What is the right way of including the stylesheet? This is the folder structure.

just wondering why you are writing angular 2 in javascript instead of typescript. Also, the way you have pasted the code makes it look like angular.js, not angular 2+ guidelines — vaira
– vaira, Commented Sep 2, 2021 at 6:36
I have a project to be built in angular 1.x which includes .js files . — Madhur Rai
– Madhur Rai, Commented Sep 2, 2021 at 6:46

Syed Muhammad Moiz · Accepted Answer · 2021-09-02 06:35:04Z

0

You have to put square brackets on the url like this: styleUrls: ['home/home.component.css']

angular.
  module('home').
  component('home', {
    templateUrl: 'home/home.template.html',
    styleUrls: ['home/home.component.css']
    
    
  });

answered Sep 2, 2021 at 6:35

Syed Muhammad Moiz

4754 silver badges19 bronze badges

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

Comments

vaira · Accepted Answer · 2021-09-02 09:31:39Z

0

styleUrls accepts an array

styleUrls: ['home/home.component.css']

edited Sep 2, 2021 at 9:31

answered Sep 2, 2021 at 6:34

vaira

2,2801 gold badge13 silver badges16 bronze badges

1 Comment

Madhur Rai Over a year ago

I tried this but didn't make a difference. Css isn't getting applied.

Arifur Rahman Khan · Accepted Answer · 2021-11-17 05:40:59Z

0

I faced the same problem and then I found the answer. just add this line inside the component declaration :

encapsulation: ViewEncapsulation.None

for example, 

@Component({
  templateUrl: './usertradedata.component.html',
  animations: [appModuleAnimation()],
  styleUrls:['./usertradedata.component.css'],
  encapsulation: ViewEncapsulation.None
})

answered Nov 17, 2021 at 5:40

Arifur Rahman Khan

4365 silver badges9 bronze badges

Comments

ABDULLAH MAKKI · Accepted Answer · 2022-07-25 05:46:16Z

0

I think you mean this click link here

"styles": [
"../node_modules/angular2-busy/build/style/busy.css",
"styles.css"
],

in .angular-cli.json

edited Jul 25, 2022 at 5:46

answered Jul 25, 2022 at 5:40

ABDULLAH MAKKI

1352 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to include .css file of my component in angular js

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related