css issue after enabling the angular cli routing

Question

Issue details

There is just one route in the code and that is the default route for login component. Due to this line of code <router-outlet></router-outlet> which is present in the app.component.html, my html gets disturbed. there is no problem, if the parent div tag in the login component comes directly inside this div <div class="row justify-content-center">. Is there any way to fix this as there are other component with different classes at their root.

code in app-routing-module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from './auth/login/login.component';

const routes: Routes = [
    {
        component: LoginComponent,
        path: ''
    }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

code in app.component.html

<header></header>
<div class="container-fluid">
    <div class="row justify-content-center">
        <router-outlet></router-outlet>
    </div>
</div>

Code in Login.component.html

<div class="col-md-4">
    <main class="py-4">
    </main>
</div>

Anton Hirov · Accepted Answer · 2022-01-14 23:09:06Z

1

If you want to apply some class to the root level of LoginComponent you can use the host property (based on inheritance):

@Component({
    selector: "app-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.css"],
    host: {
        class: "col-md-4",
    },
})
export class LoginComponent {...}

The result output:

<div class="row justify-content-center">
  <router-outlet></router-outlet>
  <app-login class="col-md-4">...</app-login>
</div>

edited Jan 14, 2022 at 23:09

answered Jan 14, 2022 at 20:41

Anton Hirov

3612 silver badges6 bronze badges

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

2 Comments

Pankaj Over a year ago

I was looking to set class to the component tag when the route == login, can it be done?

Anton Hirov Over a year ago

@Pankaj updated the answer to work only with classes.

Collectives™ on Stack Overflow

css issue after enabling the angular cli routing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related