How can I successfully route to my other components in Angular?

Question

I'm very new to Angular but am trying to incorporate some routing into this website. The default screen is a grid with a few buttons:

export class InvestigationsComponent implements OnInit{ ec. }

There are two buttons that I want to route to their own URLs. I'm just concentrating on the NewInvestigationComponent right now.

Here is the html in the body for the buttons:

<div class="router-containers">
        <button id="advancedsearch" (click)="advancedSearchClicked()">Advanced Search</button>

        <a id="newInv" [routerLink]="['NewInvestigationComponent']" routerLinkActive="active">New Investigation</a>
        <new-investigation-root></new-investigation-root>

      </div>

So my site has the button and when I click it, the URL does change to localhost:4200/NewInvestigationComponent , which is correct.

Now how do I get it to display the HTML that I want to display?

My investigations-routing.module.ts :

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ParamMap } from '@angular/router';
import { InvestigationsComponent } from './investigations.component';
import { NewInvestigationComponent } from './components/investigations-new/investigation-form.component';

const routes: Routes = [
  { path: 'InvestigationsComponent', component: InvestigationsComponent },
  { path: 'NewInvestigationComponent', component: NewInvestigationComponent },
  { path: '**', redirectTo: '/Investigationsomponent', pathMatch: 'full' },
];

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

export class InvestigationsRoutingModule { }

The investigation-form.component.ts :

import { Component, OnInit } from '@angular/core';
/**import { HttpClient } from '@angular/common/http';**/

@Component({
  selector: 'new-investigation-root',
  templateUrl: './investigation-form.component.html',
  styleUrls: ['./investigation-form.component.scss'],
})

export class NewInvestigationComponent implements OnInit{

  ngOnInit(): void {
    throw new Error("Method not implemented. Yet");
  }

}

The investigation-form.component.html :

<base href="/NewInvestigationComponent">
<div>
  <h2>THIS IS THE NEW SCREEN</h2>
</div>

My index.html , which correctly points to my first screen and its html:

!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>IndyInvestigations</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" type="text/scss" href="styles.scss">
  <h1>Anomaly Investigations</h1>
</head>
<body>
  <app-root></app-root>
  <nav>
    <ul>
      <li><a routerLink="/InvestigationsComponent" routerLinkActive="active">First Component</a></li>
      <li><a routerLink="/NewInvestigationComponent" routerLinkActive="active">Second Component</a></li>
    </ul>
  </nav>
</body>
</html>

So I have tried changing the selector in my investigation-form.component.ts and I have tried adding a <new-investigation-root></new-investigation-root> to the investigations.component.html but I don't know how to do it.

I feel like I should be adding some kind of routing or if options to the index.html but I'm not sure how.

Answer 1

Sir you are using routing but not the element <router-outlet></router-outlet>

Router outlet tag will render the navigated component accordingly. You need to place it to place you want to render your navigated component!

Answer 2

I actually managed to solve it by following the instructions i found vegibit.com/angular-routing-example thanks for all your help though. My problem was that my Routing module did not correctly reference my component. I didn't realize that I had to match x with x as shown below:

Component.html: [routerlink]='/x'

Routing Module: { path: 'x', component: NewInvestigationComponent}

where x for me was 'NewInvestigation'. I didnt realize the path the compiler used but I think that I see it checks the HTML for the path, then uses the routing module to see which component that path references. –

How can I successfully route to my other components in Angular?

Question

2 answers

solution1
0 2020-09-15 21:59:26

solution2
0 2020-09-15 23:25:27

How can I successfully route to my other components in Angular?

Question

2 answers

solution1 0 2020-09-15 21:59:26

solution2 0 2020-09-15 23:25:27

solution1
0 2020-09-15 21:59:26

solution2
0 2020-09-15 23:25:27