Guidance on navigating to a different page using a specific identifier

Question

Guidance on navigating to a different page using a specific identifier

I'm a beginner in Angular, currently working on developing a full stack MEAN application. I need some guidance regarding an issue I'm encountering. My goal is to create a form called 'fa-daform.component.html' that captures a brief description, author, and date which will be stored in a database with a randomly generated ID. Upon clicking the submit or create form button, I want the user to be redirected to a new page, 'detailed-daform.component.html,' where they can fill out a more detailed form using the ID of the previously entered data for reference.

Here is the HTML code for the Brief Description file (fa-daform.component.html):

<div>
    <mat-toolbar class="menu" color="primary">
        
        <div class="centerNavBar">
            <a mat-button href="fa-dashboard">Back</a>
             
            <span class="headSpacer">Damage Assessment Tool</span>        
             
            <a mat-button href="">Logout</a>
        </div>
    </mat-toolbar>
</div>

... // Truncated for brevity

In the TypeScript file for the Brief Description form (fa-daform.component.ts), I have defined functions for creating a new Damage Assessment Report:

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 {

... // Truncated for brevity

The Detailed Form file (detailed-daform.component.html) simply contains a message indicating its functionality:

<p>detailed-daform works!</p>

If you encounter the error "Property 'detailedDAFormID' does not exist on type 'FADAFormComponent'," you can refer to my project's GitHub repository at [https://github.com/DillonRampersad/Damage_Assessment_Tool]. Feel free to explore activated routes for resolving this issue. Your assistance in this matter would be greatly appreciated.

javascript angular typescript mean-stack

Answer 1

Answer №1

Consider utilizing the Router

 <button mat-raised-button type="submit" 
  (click)="createDamageAssessmentReport(DescOfReportInput.value, AuthorInput.value, DateInput.value)"  color="primary" >Create</button>

In a nutshell, in the typescript file named fa-daform.component.ts:

import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-fa-daform',
  templateUrl: './fa-daform.component.html',
  styleUrls: ['./fa-daform.component.css']
})
export class FADAFormComponent implements OnInit {


  constructor(private damageAssessmentReportService : DamageAssessmentReportService, private router: Router) { }
  
  //assessmentDescription: string, author: string, reportDateTime: Date
  createNewDAReport(){
    this.damageAssessmentReportService.createDAReport("New Report","Dillon", new Date(2020, 9, 10)).subscribe((response : any)=>{
      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((damageAssessments : any)=>{
      console.log(damageAssessments);
      //navigate to /damageAssessments/damageAssessments._id
      this.router.navigateByUrl(`damageAssessments/${damageAssessments._id}`)
  })
  }

  
  ngOnInit(): void {
  }

  }

Answer 2

Consider utilizing the Router

 <button mat-raised-button type="submit" 
  (click)="createDamageAssessmentReport(DescOfReportInput.value, AuthorInput.value, DateInput.value)"  color="primary" >Create</button>

In a nutshell, in the typescript file named fa-daform.component.ts:

import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-fa-daform',
  templateUrl: './fa-daform.component.html',
  styleUrls: ['./fa-daform.component.css']
})
export class FADAFormComponent implements OnInit {


  constructor(private damageAssessmentReportService : DamageAssessmentReportService, private router: Router) { }
  
  //assessmentDescription: string, author: string, reportDateTime: Date
  createNewDAReport(){
    this.damageAssessmentReportService.createDAReport("New Report","Dillon", new Date(2020, 9, 10)).subscribe((response : any)=>{
      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((damageAssessments : any)=>{
      console.log(damageAssessments);
      //navigate to /damageAssessments/damageAssessments._id
      this.router.navigateByUrl(`damageAssessments/${damageAssessments._id}`)
  })
  }

  
  ngOnInit(): void {
  }

  }

Guidance on navigating to a different page using a specific identifier

Answer №1

Similar questions

Creating dynamic routes with Nuxt3

What is the best method for saving information from a service to a class or interface in Angular 2?

NextJS 12: The dilemma of styled components not rendering server side due to missing CSS

A script to continuously execute a form action in a loop

What method can be used to ensure Moment.js gives priority to the day over the month when interpreting dates with ambiguity

I'm wondering if it's possible to fork an npm library in package.json and automatically trigger its build process upon installation

Youngster listens for guardian's occurrence in Angular 2

Trapping an iframe refresh event using jQuery

Typescript interface requiring both properties or none at all

Angular2 encountered an error loading the resource: server reported status 404 (Not Found)

Browser Integration for Real-Time Updates on GetStream io Platform

My redirect is being disrupted by passing a text string with new lines through GET requests

Discovering ways to retrieve the complete HTTP response in Angular to access certain response headers

Tips for incorporating a Survey Monkey website embed into an Angular application

The axios requests are sent to the backend API, but the webpage remains empty without

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Revise the JSON format to be compatible with a JavaScript template library

Updating *ngIf in Angular 6 after the Component has finished Loading

AngularJS basic webpage application halts code rendering

When making an AJAX request, ensure the response is in JSON format with individual properties rather than as a single