CODEWITHSUNDEEP
javascriptangularangular-ui-routerangular-climean
Abu Bakar
Abu Bakar

Reputation: 65

Using different StyleSheets for Different Component in Angular 4/5/6/7

My project has 3 built in templates, One is used for landing page, second one is used for Forms and third one is used for admin dashboard template. All these 3 templated come with their specific css/js/images.

I want to bind these style sheets to one component like

and

The approach I m using right now is importing all stylesheets in CLI array styles and script files in js array. Due to this all styles are overlapping like the button style for landing page is applied on all other button types.

help me out from this

Upvotes: 0

Views: 250

Answers (2)

GVinith
GVinith

Reputation: 1

If styles are specific to landing page component or form component, it is better to structure your code accordingly and place the styles under corresponding component folders.

i.e. Place your landing_page.html, landing_page.ts and landing_page.css under single folder landing_page.

You can now import the css file into your component and use ViewEncapsulation to restrict how the styles should be applied.

Angular documentation for reference: https://angular.io/api/core/ViewEncapsulation

Upvotes: 0

Amin Kodaganur
Amin Kodaganur

Reputation: 666

I seeing there will be only issue with CSS. JS & images is up to you when to call it. So for fixing css issue you can do something like below.

In your landing page component in @component decorator add styleUrls: ['<path_of_landing_page_css_file>'] property which will look something like below.

@Component({ selector: 'landing-page.component', templateUrl: './landing-page.component.html', styleUrls: ['./landing-page.component.css','<path_of_landing_page_css_file_from_assests>',...], })

like that for rest of your component. And make sure remove that css import link from CLI Array.

Upvotes: 1

Related Questions