CODEWITHSUNDEEP
javascriptcssangular
Nehil Mistry
Nehil Mistry

Reputation: 1109

How to include module level CSS in Angular JS

I'm having angular project consist of Frontend and admin. I want to scale my project in such a way that I use different CSS for both admin and frontend.

Structure of my project is as follows: 

--app
   --admin // Admin Module
     --admin.module.ts
     --admin.component.ts
     --admin-routing.module.ts
     --admin.component.css
     --admin.component.html

  --web // Frontend Module
     --web.module.ts
     --web.component.ts
     --web-routing.module.ts
     --web.component.css
     --web.component.html 

--app.module.ts
--app.component.ts
--app-routing.module.ts
--app.component.css
--app.component.html

I've defined my CSS for web(Frontend) in .angular-cli.json file.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

How can I load different CSS file for admin and the web? Also is there any better approach to include multiple modules in same project?

Upvotes: 0

Views: 767

Answers (2)

user5929598
user5929598

Reputation:

If you have a main component for each module, you just have to attach the .css file to your component in the @Component() decorator.

@Component({
    templateUrl: './admin.component.html'
    styleUrls: ['./admin.component.css']
})

@Component({
    templateUrl: './web.component.html'
    styleUrls: ['./web.component.css']
})

Upvotes: 0

Vikhyath Maiya
Vikhyath Maiya

Reputation: 3202

You can define the global css properties that are common for both admin and remaining users in the "styles.css" file and admin specific & remaining user specific css properties could be defined in admin.component.css and web.component.css respectively;Hope this helps

Upvotes: 2

Related Questions