title: Advice on routing to another page with a specific ID
body: <p>I am very new to Angular and I am creating a full stack MEAN stack. I need some advice on a problem I'm facing. I want to create a form, 'fa-daform.component.html,' that gives a brief description, author and date that stores to a database with a randomly generated ID. I want such that when I hit submit/a create form button that it routes to a new page, 'detailed-daform.component.html,' for a more detailed form, but with the ID of the data entered for the brief description, author and date for future use.</p>
  <p>Brief Description HTML file: fa-daform.component.html:</p>
  <pre><code>&lt;div&gt;
      &lt;mat-toolbar class = &quot;menu&quot; color=&quot;primary&quot;&gt;
          
          &lt;div class=&quot;centerNavBar&quot;&gt;
              &lt;a mat-button href=&quot;fa-dashboard&quot;&gt;Back&lt;/a&gt;
              &amp;nbsp;
              &lt;span class=&quot;headSpacer&quot;&gt;Damage Assessment Tool&lt;/span&gt;        
              &amp;nbsp;
              &lt;a mat-button href=&quot;&quot;&gt;Logout&lt;/a&gt;
          &lt;/div&gt;
      &lt;/mat-toolbar&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;mat-sidenav-container&gt;
          &lt;mat-sidenav mode=&quot;side&quot; opened&gt;
              &lt;div&gt;
                  &lt;a mat-button href=&quot;fa-dashboard&quot;&gt;Dashboard&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;a mat-button href=&quot;fa-daform&quot;&gt;Report&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;a mat-button href=&quot;fa-search&quot;&gt;Stored Data&lt;/a&gt;
              &lt;/div&gt;
          &lt;/mat-sidenav&gt;
          &lt;mat-sidenav-content&gt;
              &lt;div class=&quot;sect&quot;&gt;
                  &lt;h1&gt;Damage Assessment Report&lt;/h1&gt;
              &lt;/div&gt;
              &lt;mat-card&gt;
                  &lt;mat-card-header&gt;Create report:&lt;/mat-card-header&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;mat-card-content&gt;
                      &lt;div&gt; 
                          &lt;mat-form-field&gt;
                              &lt;mat-label&gt;Report Description&lt;/mat-label&gt;
                              &lt;input
                                  #DescOfReportInput  
                                  placeholder=&quot;Description of Report&quot;
                                  matInput type= &quot;string&quot;
                                  required&gt;
                          &lt;/mat-form-field&gt;
                              &lt;br&gt;
                          &lt;mat-form-field&gt;
                              &lt;mat-label&gt;Author&lt;/mat-label&gt;
                              &lt;input  
                                  #AuthorInput
                                  placeholder=&quot;Author&quot;
                                  matInput type= &quot;string&quot;
                                  required&gt;
                          &lt;/mat-form-field&gt;
                          &lt;br&gt;
                          &lt;mat-form-field&gt;
                          &lt;mat-label&gt;&lt;/mat-label&gt;
                          &lt;input  
                                  #DateInput
                                  placeholder=&quot;----/--/--&quot;
                                  matInput type= &quot;Date&quot;
                                  required&gt;
                          &lt;/mat-form-field&gt;
                          &lt;br&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button mat-raised-button 
                          type=&quot;submit&quot; 
                          (click)=&quot;createDamageAssessmentReport(DescOfReportInput.value, AuthorInput.value, DateInput.value)&quot; 
                          color=&quot;primary&quot; [routerLink]='['/detailed-daform',detailedDAFormID._id]'&gt;Create&lt;/button&gt; 
                      &lt;/div&gt;
                  &lt;/mat-card-content&gt;
              &lt;/mat-card&gt;
          &lt;/mat-sidenav-content&gt;
      &lt;/mat-sidenav-container&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Brief Description typescript file: fa-daform.component.ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
  
  @Component({
    selector: 'app-fa-daform',
    templateUrl: './fa-daform.component.html',
    styleUrls: ['./fa-daform.component.css']
  })
  export class FADAFormComponent implements OnInit {
  
  
    constructor(private damageAssessmentReportService : DamageAssessmentReportService) { }
    
    //assessmentDescription: string, author: string, reportDateTime: Date
    createNewDAReport(){
      this.damageAssessmentReportService.createDAReport(&quot;New Report&quot;,&quot;Dillon&quot;, new Date(2020, 9, 10)).subscribe((response : any)=&gt;{
        console.log(response);
  
      })
    }
  
    createDamageAssessmentReport(assessmentDescription: string, author: string, reportDateString: string){
  
      const reportDateTime = new Date(reportDateString); // Here you should have your date ready to be used as you wish
      this.damageAssessmentReportService.createDAReport(assessmentDescription,author, reportDateTime).subscribe((response : any)=&gt;{
        console.log(response);
        //navigate to /damageAssessments/damageAssessments._id
    })
    }
  
    
    ngOnInit(): void {
    }
  
    }
  </code></pre>
  <p>Detailed form HTML file: detailed-daform.component.html:</p>
  <pre><code>&lt;p&gt;detailed-daform works!&lt;/p&gt;
  </code></pre>
  <p>Detailed form typescript file: detailed-daform.component.ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Params } from '@angular/router';
  import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
  
  @Component({
    selector: 'app-detailed-daform',
    templateUrl: './detailed-daform.component.html',
    styleUrls: ['./detailed-daform.component.css']
  })
  export class DetailedDaformComponent implements OnInit {
  
    damageAssessments: any;
  
    constructor(private damageAssessmentReportService: DamageAssessmentReportService, private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.route.params.subscribe(
        (params: Params)=&gt;{
          console.log(params);
        }
      )
      this.damageAssessmentReportService.getDAReport().subscribe((damageAssessments: any)=&gt; {
          console.log(damageAssessments);
      });
    }
  }
  </code></pre>
  <p>routing module file: app-routing.module.ts:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { DetailedDaformComponent } from './pages/detailed-daform/detailed-daform.component';
  import { FADAFormComponent } from './pages/fa-daform/fa-daform.component';
  import { FADashbooardComponent } from './pages/fa-dashbooard/fa-dashbooard.component';
  import { FASearchComponent } from './pages/fa-search/fa-search.component';
  import { LandingComponent } from './pages/landing/landing.component';
  
  
  
  
  const routes: Routes = [
    {path: &quot;&quot; , redirectTo: &quot;landing&quot;, pathMatch: 'full'},
    {path: &quot;detailed-daform&quot; , redirectTo: &quot;detailed-daforms&quot;, pathMatch: 'full'},
    {path: &quot;landing&quot; , component: LandingComponent},
    {path: &quot;fa-dashboard&quot; , component: FADashbooardComponent},
    {path: &quot;fa-daform&quot; , component: FADAFormComponent},
    {path: &quot;fa-search&quot; , component: FASearchComponent},
    {path: &quot;detailed-daforms&quot; , component: DetailedDaformComponent},
    {path: &quot;detailed-daforms/:detailedDAFormId&quot; , component: DetailedDaformComponent}
    
      
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>I tried when hitting create button but this error appears &quot; Property 'detailedDAFormID' does not exist on type 'FADAFormComponent'.&quot;</p>
  <p>The project github it it'll help: [https://github.com/DillonRampersad/Damage_Assessment_Tool]</p>
  <p>Im not quite sure how to go about it, I was looking into activated routes but I'm so confused. Any help would be appreciated</p>