How to add class dynamically in angular 4

Question

I'm working on a project using angular 4, How do I add class to the body of index.html only. for example

   <body class="home">
      <app-root></app-root>

   </body>

I want this class to be added only when my HomeComponent load and remove for any other pages/component

Cheers to everyone.

DeborahK · Accepted Answer · 2018-01-13 18:09:51Z

3

You can't really use Angular features in the index.html. I would suggest a different approach to the structure of your application.

Define your app-root component to only be a router-outlet. Then build a shell component with your menu, header, and any other styles you want for your "home".

You can then route any pages you want without the styles directly into the app-root's router-outlet and any pages you want with your style to the shell component.

I have an example set up this way here: https://github.com/DeborahK/MovieHunter-routing

app.component.html

<router-outlet></router-outlet>

shell.component.html

<mh-menu></mh-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

answered Jan 13, 2018 at 18:09

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

Collectives™ on Stack Overflow

How to add class dynamically in angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related