Navigate to a component Angular 9

Question

I have been the whole day trying to figure out how can I load a new page in Angular 9, like when you click, and you can see that you are being redirected to a new page. I have seen the following relevant links, none of which has solved my question:

I have successfully achieved a not-wanted behavior, in which the components are loaded on the same page instead of on a new page.

This is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CreateQueueComponent } from './create-queue/create-queue.component';
import { SubscribeQueueComponent } from './subscribe-queue/subscribe-queue.component';
import { AppRoutingModule } from './app-routing.module';
import { ManageQueueComponent } from './manage-queue/manage-queue.component';

@NgModule({
  declarations: [
    AppComponent,
    CreateQueueComponent,
    SubscribeQueueComponent,
    ManageQueueComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CreateQueueComponent } from './create-queue/create-queue.component';
import { ManageQueueComponent } from './manage-queue/manage-queue.component';
import { SubscribeQueueComponent } from './subscribe-queue/subscribe-queue.component';


const routes: Routes = [
  { path: 'createQueue', component: CreateQueueComponent },
  { path: 'manageQueue', component: ManageQueueComponent },
  { path: 'subscribeQueue', component: SubscribeQueueComponent }
];

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

As the documentation suggest, I have made sure in my index.html I have the <base href="/">

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

This is my app.component.html

...
<a class="circle-link option-card" title="Join" routerLink="/subscribeQueue">
   <i class="fas fa-calendar"></i>
   <span>Subscribe</span>
</a>
...

My <router-outlet> is appended at the end of the app.component.html. So the question would be, how can I replace the content or partial content of the web with the one on the target component?

Does anyone know what's going on? Am I missing something here?

Thank you.

Can you include your code containing the ``? – Rob Monhemius May 09 '20 at 20:55 — Rob Monhemius, May 09 '20 at 20:55
I have updated my question @RMo – Tomás Denis Reyes Sánchez May 09 '20 at 20:58 — Tomás Denis Reyes Sánchez, May 09 '20 at 20:58

score 1 · Answer 1 · answered May 10 '20 at 05:56

The component that is correlated with a route in the router.module.ts file will always display in the <router-outlet>.

changing the entire page

The code below will load a component as the entire page with the router.

app.component.html

<router-outlet></router-outlet>

changing part of page with the router

The code below will always load the <h1>Always header</h1> and additionally load the component you are routing to in the <router-outlet></router-outlet>.

Your base path '' does not exist in your router.module.ts so the router won't load anything in the <router-outlet></router-outlet> on the homepage since there is no component bound to it.

I expect this is what you were doing. I can't tell for sure however since you didn't provide that part of the code.

app.component.html

<h1>Always header</h1>
<router-outlet></router-outlet>

score 0 · Answer 2 · answered May 09 '20 at 20:48

0

The purpose of Angular is to build single-page applications.

The role of the RouterModule is to make your single page application looks like several pages, even if technically the browser is always on the same page.

It will put the component corresponding to the “current page“ inside: <router-outlet></router-outlet> .

answered May 09 '20 at 20:48

Yann Armelin

691
4
9

That's what I have done. The question would be now how can I replace the content of the actual page with the new one? – Tomás Denis Reyes Sánchez May 09 '20 at 20:56

Navigate to a component Angular 9

2 Answers2