I'm facing an issue with my angular reactive-form project. I have successfully set up everything except routing. After defining all the routes in the app.module.ts file, things started getting messy. In my basic form, I had a responsive CSS grid with two columns that nicely accommodated the form before adding a there. It seems like the router outlet automatically becomes an item within the grid, causing my component to create an additional grid row and messing up the entire layout.
How can I resolve this problem?
Below is my template code:
<div class="container">
<div class="wrapper">
<app-form-slider></app-form-slider>
<router-outlet></router-outlet>
</div>
</div>
This is my app.module configuration:
const routes: Routes = [
{path: '', redirectTo: '/form', pathMatch: 'full'},
{path: 'form', component: FormComponent},
{path: 'logined-user', component: FormLoginedUserComponent}
];
@NgModule({
declarations: [
AppComponent,
FormComponent,
FormLoginedUserComponent,
FormSliderComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
IMaskModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And here is the SCSS template used for styling:
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.wrapper {
margin-right: auto;
margin-left: auto;
display: grid;
height: 100vh;
width: 95vw;
@media (min-width: 700px) {
display: grid;
grid-template-columns: 160px 2fr;
width: 1000px;
height: 95vh;
}
}
app-form {
background-color: #fff;
grid-column: 1 / 3;
@media screen and (min-width: 700px){
grid-column: 2/3;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
&-slider {
grid-column: 1 / 3;
background-color: #48a5ea;
@media screen and (min-width: 700px){
grid-column: 1/2;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
height: 20vh;
}
}