Angular2 - Pass router param as variable to ngForm

Question

Just having a bit of difficulty passing a router param (id) to an ngForm and then to an event emitter. Here is how I get the id - as you can see the first console.log works fine, i can get the id from the router. Now I am trying to assign this to my singleOpenHome object (but get 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 am wanting to pass this to a form:

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

Here is my event emmitter:

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

    constructor(private route: ActivatedRoute) {}

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

Any help appreciated

Answer 1

I've experienced problems specifically related to converting the route.params Observable into a Promise which is what forEach does. Consider simply using subscribe

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

This looks line like a typo

this.singleOpenHome.propertyID == id;

You're performing a comparison instead of an assignment.

That said you may have other bugs which lead to the property being undefined. Since it's marked as an input I assume it comes from an external binding. Make sure the value that you are passing into this binding is properly initialized.