How to load a page inside a div with angular

Question

How to load a page inside a div with angular

Navigation

#1 by (0 votes)
#2 by (0 votes)

-1

Talk about it! I have a big question and I can not solve it. I'm developing an application for my college's TCC in Angular. I have a menu and within that menu there are options to navigate the site, but instead of changing pages, I would like this new page to be loaded into 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 do this by clicking on the Menu Option Register Tele load the contents inside the div loads Pages.

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 to start in the login / login that comes from LoginComponent and that when I log in go to the IndexComponent (/ index) and within the index I can use the route option that I asked up there to load inside the page load.

my app-routing.module.ts 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 { }

html typescript route angular angular-routes

asked by anonymous 27.10.2018 / 08:50

2 answers

Problem with button How to Select the second line of a text in textbox and change it to the first line

score 0 · Answer 1

Change this div with the <router-outlet></router-outlet> tag, it will load its components into it

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 { }

Take a look at documentation

score 0 · Answer 2

That's right, you're missing the router-outlet directive, An output to router issues an activation event whenever a new component is being instantiated.

routerLinkActive allows you to add a css selector, if enabled.

<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>