Angular Routing: Replacing components

Question

I am doing a project for my own learning and stuck on this simple problem. I have first/main page as login/register page. Now I want to replace page with other component using routing. As I click register I want to see only register-form component. I have module ENTRY with its own entry.routing, there are three components login component, register component and register-form component. On first page I am viewing login and register components, their directives are in app component's html to view them. How do I change form app.component to register-form.component in view?

Here is some of my code:

app.component.html

<div class="flex-row">
<div class="flex-grow-one logo">
    <h1>Something</h1>
</div>
<div class="flex-column flex-grow-one entry-section">
    <app-login></app-login>
    <div class="separation"></div>
    <app-register></app-register>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { EntryModule } from './modules/entry/entry.module';
import { HeaderComponent } from './shared/components/header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    EntryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

entry.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegisterFormComponent } from './components/register-form/register-form.component';

const entryRoutes: Routes = [
  { path: 'register-form', component: RegisterFormComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      entryRoutes
    )
  ],
  exports: [
    RouterModule
  ]
})

export class EntryRouting {}
export const EntryRoutingComponents = [
  RegisterFormComponent
];

register.component.html

<div class="card">
  <div class="card-title">
    <h2>REGISTER</h2>
  </div>
  <div class="card-content">
    <div class="card-form">
      <div class="card-input">
        <input type="Email" name="Email" placeholder="Email"/>
      </div>
      <div class="card-input">
        <input type="password" name="password" placeholder="Password"/>
      </div>
      <div class="card-actions">
        <button routerLink="/register-form" class="button-register">Register</button>
      </div>
    </div>
  </div>
</div>

I know there must be a router-outlet, but I don't really know where to put it, because if I put it inside register.component.html, it shows register-form component on the same view, where the router-outlet is.

Answer 1

Define a routing module where you define url and its child urls. In the module, make a parent component for the registercomponent. Let's say your home url is /home which is controlled by the Rootcomponent, it display the header and footer and some content in the middle. so the html of the root component might look like:

 <div>some header info</div> <router-outlet></router-outlet> <div>some footer info</div>

The route module should look like: const appRoute : Routes = [{ path: '/home', component: RootComponent, children: [ { path: '/login', component: AppComponent, }, { path: '/registration', component: RegisterComponent, } ] } @NgModule({ imports: [RouterModule.forRoot(appRoute)], exports: [RouterModule], }) export class myRouteModule {};

Inject the module into your root module.

 @NgModule({ declarations: [ RootComponent, AppComponent, registerComponent, ], imports: [ myRoutModule ] })

The middle content of the page is dynamically controlled by the current routing. If the url is /home/login, then the app view will be shown. For /home/registration, the register component will be shown instead.

Hope this will help.