Angular 10.1.1 How to Make Multiple URLS

I'm trying to make it when I go to myurl.com/create it opens the component I made. This is my first time using Angular and cant figure it out. Here's the Code I have. When I do <router-outlet></router-outlet> if I change my HTML code to <h1>Hello</h1> it will show up underneath what I have there from my root component. I don't know what else to do here. I have this assignment due for school and I'm using languages that I've never delved deep with before.

//app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpParams } from '@angular/common/http';

import { ApiService } from './api.service';
import { RoundRobin, Title } from './app.component';
import { createAccount} from './create-account/create-account.component'

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatNativeDateModule} from '@angular/material/core';
import {MatSelectModule} from '@angular/material/select';
import {MatIconModule} from '@angular/material/icon';
import {MatRadioModule} from '@angular/material/radio';
import {MatGridListModule} from '@angular/material/grid-list';


const routes: Routes = [
  {path: 'create', component: createAccount},
];

@NgModule({
  declarations: [
    RoundRobin,
    createAccount
  ],
  imports: [
    RouterModule.forRoot(routes),
    BrowserModule,
    HttpClientModule,

    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    MatSelectModule,
    
    MatIconModule,
    
   
    MatRadioModule,
    MatGridListModule
  ],
  exports: [
    RouterModule,
  ],
  providers: [
    ApiService,
    createAccount,
  ],
  bootstrap: [
    RoundRobin,
  ],
})
export class AppRoutingModule { }
export class AppModule { }
//create-account.component.ts

import { Component, OnInit } from '@angular/core'

@Component({
    selector: 'CreateAccount',
    template: './create-account.component.html',
    styleUrls: ['./create-account.component.css']
})

export class createAccount{

  hide = true;

}
//create-account.component.html

<html>
<mat-grid-list cols="1" rowHeight="500px">
  <mat-grid-tile>
    <div class="example-container">
      <mat-form-field appearance="fill" class="width-50">
        <mat-label>First Name</mat-label>
        <input matInput>
      </mat-form-field>

      <mat-form-field appearance="fill" class="width-50 ml-2">
        <mat-label>Surname</mat-label>
        <input matInput>
      </mat-form-field>
      <br>
      <mat-form-field appearance="fill" class="width-100">
        <mat-label>Email address</mat-label>
        <input matInput placeholder="Ex. pat@example.com">
      </mat-form-field>
      <br>
      <mat-form-field appearance="fill" class="width-100">
        <mat-label>Enter password</mat-label>
        <input matInput [type]="hide ? 'password' : 'text'">
        <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
          [attr.aria-pressed]="hide">
          <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
      </mat-form-field>
      <br>
      <label id="example-radio-group-label">Gender: </label>
      <br><br>
      <mat-radio-group aria-label="Select an option">
        <mat-radio-button value="1">Male</mat-radio-button>
        <mat-radio-button class="example-radio-button" value="2">Female</mat-radio-button>
        <mat-radio-button class="example-radio-button" value="3">Custom</mat-radio-button>
      </mat-radio-group>
      <br><br>
      <label id="example-radio-group-label">Date of birth: </label>
      <br><br>
      <mat-form-field appearance="fill" class="width-25">
        <mat-label>Day</mat-label>
        <mat-select>
          <mat-option [value]="6">
            26
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill" class="width-25 ml-1">
        <mat-label>Month</mat-label>
        <mat-select>
          <mat-option [value]="6">
            26
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill" class="width-25 ml-1">
        <mat-label>Year</mat-label>
        <mat-select>
          <mat-option [value]="6">
            26
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </mat-grid-tile>
</mat-grid-list>
</html>

1 answer

  • answered 2020-10-16 08:20 Owen Kelvin

    To get the best result, you would better use the angular cli. Below steps will give you a clean working code

    • In your projects folder, run npm install -g @angular/cli. This installs angular. You only need to run this once. You will need npm Download node
    • If above step runs successfully run ng new my-project-app --routing. Note the --routing flag
    • Inside my-project-app folder created by the CLI, run ng generate component create-account OR ng g c create-account
    • Now run ng serve. This should run without any problems and your app can be viewed at http://localhost:4200
    • Now in your app-routing-module.ts file change the line const routes: Routes = [] to the below. Ensure to import the component
    const routes: Routes = [
      { path: 'create', component: CreateAccountComponent },
    ];
    
    • Now edit app-component.html to
    <h1>Hello</h1>
    <router-outlet></router-outlet>
    

    Hello
    create-account-works!

    • With the cli, angular names all our files as per convention e.g createAccount will actually be CreateAccountComponent

    • When everything works, you can now replace the content of create-account.component.ts and create-account.component.html with your code

    • Final note: Remove the <html> tag in you template file. This is not required here

    Check this simple Demo on stackblitz