title: Angular 10.1.1 How to Make Multiple URLS
body: <p>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 <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> if I change my HTML code to <code>&lt;h1&gt;Hello&lt;/h1&gt;</code> 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.</p>
  <pre><code>//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 { }
  </code></pre>
  <pre><code>//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;
  
  }
  </code></pre>
  <pre><code>//create-account.component.html
  
  &lt;html&gt;
  &lt;mat-grid-list cols=&quot;1&quot; rowHeight=&quot;500px&quot;&gt;
    &lt;mat-grid-tile&gt;
      &lt;div class=&quot;example-container&quot;&gt;
        &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-50&quot;&gt;
          &lt;mat-label&gt;First Name&lt;/mat-label&gt;
          &lt;input matInput&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-50 ml-2&quot;&gt;
          &lt;mat-label&gt;Surname&lt;/mat-label&gt;
          &lt;input matInput&gt;
        &lt;/mat-form-field&gt;
        &lt;br&gt;
        &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-100&quot;&gt;
          &lt;mat-label&gt;Email address&lt;/mat-label&gt;
          &lt;input matInput placeholder=&quot;Ex. pat@example.com&quot;&gt;
        &lt;/mat-form-field&gt;
        &lt;br&gt;
        &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-100&quot;&gt;
          &lt;mat-label&gt;Enter password&lt;/mat-label&gt;
          &lt;input matInput [type]=&quot;hide ? 'password' : 'text'&quot;&gt;
          &lt;button mat-icon-button matSuffix (click)=&quot;hide = !hide&quot; [attr.aria-label]=&quot;'Hide password'&quot;
            [attr.aria-pressed]=&quot;hide&quot;&gt;
            &lt;mat-icon&gt;{{hide ? 'visibility_off' : 'visibility'}}&lt;/mat-icon&gt;
          &lt;/button&gt;
        &lt;/mat-form-field&gt;
        &lt;br&gt;
        &lt;label id=&quot;example-radio-group-label&quot;&gt;Gender: &lt;/label&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;mat-radio-group aria-label=&quot;Select an option&quot;&gt;
          &lt;mat-radio-button value=&quot;1&quot;&gt;Male&lt;/mat-radio-button&gt;
          &lt;mat-radio-button class=&quot;example-radio-button&quot; value=&quot;2&quot;&gt;Female&lt;/mat-radio-button&gt;
          &lt;mat-radio-button class=&quot;example-radio-button&quot; value=&quot;3&quot;&gt;Custom&lt;/mat-radio-button&gt;
        &lt;/mat-radio-group&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;label id=&quot;example-radio-group-label&quot;&gt;Date of birth: &lt;/label&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-25&quot;&gt;
          &lt;mat-label&gt;Day&lt;/mat-label&gt;
          &lt;mat-select&gt;
            &lt;mat-option [value]=&quot;6&quot;&gt;
              26
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-25 ml-1&quot;&gt;
          &lt;mat-label&gt;Month&lt;/mat-label&gt;
          &lt;mat-select&gt;
            &lt;mat-option [value]=&quot;6&quot;&gt;
              26
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field appearance=&quot;fill&quot; class=&quot;width-25 ml-1&quot;&gt;
          &lt;mat-label&gt;Year&lt;/mat-label&gt;
          &lt;mat-select&gt;
            &lt;mat-option [value]=&quot;6&quot;&gt;
              26
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
    &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  &lt;/html&gt;
  </code></pre>