css issue after enabling the angular cli routing-CodePudding

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 >. 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 >
    <div >
        <router-outlet></router-outlet>
    </div>
</div>

Code in Login.component.html

<div >
    <main >
    </main>
</div>

CodePudding user response：

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 >
  <router-outlet></router-outlet>
  <app-login >...</app-login>
</div>