Using Angular2 - How to pass the router parameter as a variable in ngForm

Struggling to pass a router param (id) to an ngForm and then to an event emitter. I am able to retrieve the id from the router successfully, but when trying to assign it to my singleOpenHome object, I encounter an undefined error:

@Input() singleOpenHome: OpenHomeModel;

ngOnInit() {
        // Get the slug on it from the router
        this.route.params.forEach((params: Params) => {
            let id = params['propertyID'];
            console.log('id on the child is:'+id);
            //this.singleOpenHome.propertyID == id; Cannot read property 'propertyID' of undefined
        });
    }

Now I want to pass this to a form:

<form class="my2" #form="ngForm" (ngSubmit)="handleSubmit(form.value, form.valid)" novalidate></form>

Event emitter for submitting the form:

@Output()
    update: EventEmitter<OpenHomeModel> = new EventEmitter<OpenHomeModel>();

    constructor(private route: ActivatedRoute) {}

    handleSubmit(sinlgeOpenHome: OpenHomeModel, isValid: boolean) {
        if (isValid) {
            this.update.emit(sinlgeOpenHome);
        }
    }

Any assistance would be greatly appreciated.

Answer №1

I've encountered issues specifically related to the conversion of the route.params Observable into a Promise using forEach. It might be more suitable to utilize subscribe instead.

ngOnInit() {
    // Retrieve the slug from the router
  this.route.params.subscribe(params => {
    const id = params['propertyID'];
    console.log(`id on the child component is: ${id}`);
  });
}

There seems to be a typo in this line:

this.singleOpenHome.propertyID == id;

You are comparing values instead of assigning them.

It's possible that there are other bugs causing the property to remain undefined. If it's an input, ensure that the value being passed into this binding is properly initialized.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inheriting Components from Templates

Insight on Motivation There are countless situations where we may require multiple components to share the same functionalities. It is not ideal (and definitely shouldn't be done!) to simply copy child components. This is where the concept of inherit ...

Refreshing a page in Angular 2 using webpack may sometimes lead to the index.html file loading without any styling or

I'm having trouble with my Angular 2 project. Every time I refresh the page or the HRM does, it redirects to index.html (or '/') without injecting the html code and webpack head-config.common.js properly. Additionally, I noticed that the web ...

Displaying a Router Component within an Angular 4 Interface

Is there a way to display a router component without explicitly calling the router.navigate method? I have a method that currently navigates like this: public onClickEdit(id: number): void { this.router.navigate(['...', '...', &ap ...

I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this? Here's my HTML code: <mat-form-field appearance="outline" fxFlex=" ...

Steps for building a TypeScript project for server side using webpack

After configuring webpack to compile my project using TypeScript, I encountered an issue. The project is a server-side Node project that needs to be used as a linked library by another server-side project. When I compile it with webpack, I receive a window ...

Error encountered during Heroku deployment: Module '/app/server.js' not found

Having trouble with deploying my Angular 6 application on Heroku. The build process is successful, but when I access the deployed app, it just shows a blank page. After checking the Heroku logs, it seems that the error occurs when the node server instance ...

Redis Cache expiry concept

Recently, I've come across an issue with ioredis where I have been setting a key and expiration for that key in my code. Here's a snippet of what my code looks like: let temp1 = acct.limit; let txn = array.length; let cache = new ioredis(); // p ...

Using a Jasmine spy to monitor an exported function in NodeJS

I've encountered difficulties when trying to spy on an exported function in a NodeJS (v9.6.1) application using Jasmine. The app is developed in TypeScript, transpiled with tsc into a dist folder for execution as JavaScript. Application Within my p ...

Errors in Ionic 6 involving the FormBuilder, FormGroup, Validators, FormControl, and ControlContainer

I am currently working on creating a basic registration form using Ionic 6.12.3 ionic -V, Angular CLI version 11.0.5, and npm version 6.14.11. You can find the repository for this project here: Repo. Below is my implementation for the register.page.ts: // ...

We could not locate the export in Typescript, and the JSX element type does not show any construct or call signatures

Looking to utilize my Typescript React Component Library as a Package. The structure of my files is as follows: MyComponent.tsx: import React, { FunctionComponent } from 'react'; import styled from 'styled-components'; export interf ...

Upon initializing an Angular project from the ground up, I encountered an issue where a custom pipe I had created was not

After creating an Angular 16.1.0 application and a custom pipe, I encountered error messages during compilation. Here are the steps I took: Ran ng new exampleProject Generated a pipe using ng generate pipe power Modified the content of app.compone ...

Unable to retrieve the specific value associated with a key from JSON data

I am attempting to retrieve the value of "id" from a JSON response I received after making a POST request. { "callId": "87e90efd-eefb-456a-b77e-9cce2ed6e837", "commandId": "NONE", "content": [ { "scenarioId": "SCENARIO-1", "Channel": " ...

Update the data and paginator status

In my development project, I have implemented PrimeNG Turbotable with the code <p-table #dt. Based on information from here, using dt.reset() will clear the sort, filter, and paginator settings. However, I am looking for a solution to only reset the pa ...

The issue of the mat-select change event failing to trigger in an Angular 13 reactive form when using the

How to use mat-select within a form-group <mat-form-field appearance="outline"> <mat-select formControlName="formula" id="formula"> <mat-option [value]="metricFormula.TotalCount">{{l(&apos ...

The HttpClient.get('/') request with {observe: 'response'} is failing to retrieve some headers

Currently, I'm in the process of writing an API GET request by utilizing HttpClient.get(). Upon passing in the option to observe the response, I've encountered an issue where accessing the .keys() does not provide me with any headers apart from C ...

Error encountered while running "ionic cordova run android" command

Recently, I revisited my Ionic Cordova app after a few months and encountered an unexpected dependency issue when attempting to make a minor adjustment to the app. Although the app previously functioned correctly, even reverting all changes failed to addre ...

Setting up Webpack for react-pdf in a Next.js application

In my Next.js application, I am utilizing the react-pdf library to generate and handle PDF files on the client side without involving the server. However, I am facing challenges in setting up Webpack for Next.js as I lack sufficient expertise in this area. ...

NGRX reducer avoids generating errors due to incorrect assignments

My experience with ngrx is relatively new. In my typical TypeScript work, I usually encounter an incorrect assignment error like the one below due to a missing property in the interface declaration: interface IExample { count: number; } let initialState ...

Pagination feature in MUI DataGrid table is malfunctioning

I'm struggling to get the pagination feature to work in my Material UI DataGrid component, but I'm hitting a roadblock: https://i.stack.imgur.com/eT7s7.gif The console is not showing any errors. Here is the code for my component: import { ...

What is the best way to create a generic that can handle readonly types efficiently?

When performing an action on a list type PerformActionOn<L extends any[]> = L The approach I am taking is as follows: const keys = { a: ['a', 'b', 'c'] as ['a', 'b', 'c'], d: ['d ...