How to load a page into a div with Angular

Question

Talk to the guys!! I have a huge question and I can’t solve it. I’m developing a TCC application for my Angular College. I have a menu and within this menu there are options to browse the site, but instead of changing page, I would like this new page to be loaded in a div that is in the same content, I will post the code.

Here is my file named index.component.html that has the menu.

<nav class="menu" tabindex="0">
  <div class="smartphone"></div>
  <header class="avatar"></header>

  <ul>
    <li><a [routerLink]="['/cadTel']">Cadastro Tele</a></li> 
    <li><a [routerLink]="['/config']">Configuracoes</a></li>
  </ul>
</nav>

<main>
 <div class="carregaPaginas">    
    <span>Tem um texto aqui pra teste</span>
 </div>
</main>

I would like to know how to click on the Register Menu Option.

Tks!!

---

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


import { HttpModule } from "@angular/http";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DataFormModule } from './pages/data-form/data-form.module';
import { HttpClientModule } from '@angular/common/http';
import { LoginComponent } from './pages/login/login.component';
import { Error404Component } from './pages/error404/error404.component';
import { IndexComponent } from './pages/index/index.component';

@NgModule({
  declarations: [
   AppComponent,
   LoginComponent,
   Error404Component,
   IndexComponent,
 ],
 imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
DataFormModule

], providers: [], bootstrap: [Appcomponent] }) export class Appmodule { }

and my app.component.html

<router-outlet></router-outlet>

I need you to start in the /login that comes from Logincomponent and when logging in go to Indexcomponent (/index) and inside the index I can use the route option I asked upstairs to load inside the div.

my app-routing.modules file

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DataFormComponent } from './pages/data-form/data-form.component';
import { LoginComponent } from './pages/login/login.component';
import { IndexComponent } from './pages/index/index.component';
import { Error404Component } from './pages/error404/error404.component';

const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'login'},

{ path: 'login', component: LoginComponent },
{ path: 'dataForm', component: DataFormComponent },    

{ path: '**', component: Error404Component }
];

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

Answer 1

That’s right, it’s missing the router-outlet directive, An output for router to issue an activation event whenever a new component is being instantiated.

routerLinkActive allows you to add a css selector if activated.

<nav class="menu" tabindex="0">
  <div class="smartphone"></div>
  <header class="avatar"></header>

  <ul>
    <li><a routerLink="/cadTel"      routerLinkActive="active"   >Cadastro Tele</a></li> 
    <li><a  routerLink="/config"   routerLinkActive="active"      >Configuracoes</a></li>
  </ul>
</nav>

<main>
 <div class="carregaPaginas">    
    <router-outlet></router-outlet>
 </div>
</main>

Answer 2

Trade this div for the tag <router-outlet></router-outlet>, is where your components will be loaded

In your module, configure routes and import

const appRoutes: Routes = [
  { path: 'cadTel', component: cadTelComponent },
  { path: 'config', component: configComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule { }

From a look at documentation