Get value from route.params.subscribe giving "Cannot read properties of undefined"

Question

I'm trying to make a page that will make a request to my back-end to activate the "userId" received by its URL, it works but gives an error and I can't find the why neither how to solve this issue.

My component:

import { Component, OnInit } from '@angular/core';
import { ResetPasswordService } from './reset-password.service';
import { CommonModule } from '@angular/common';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.component.html',
  styleUrls: ['./reset-password.component.css'],
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatDialogModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
  ]
})
export class ResetPasswordComponent {

  resetData = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', Validators.required),
    confirmPassword: new FormControl('', [Validators.required]),
  });

  resetDto!: { email: string, password: string, resetCode: string | null, userId: string | null };

  isVerified = false;

  constructor(public resetPasswordService: ResetPasswordService, private route: ActivatedRoute, public router: Router) {
    this.route.params.subscribe((params: { userId?: string }) => {
      if (params && params.userId != null) {
        this.resetDto.userId = params.userId; // this is line 35
        this.resetPasswordService.verifyUser(params.userId).then(response => {
          this.isVerified = response;
        });
      }
    });
  }
}

But the thing is, it works! My back-end receives the request with the "userId" correctly but angular gives me this error:

reset-password.component.ts:35 ERROR TypeError: Cannot set properties of undefined (setting 'userId')
at Object.next (reset-password.component.ts:37:29)
at ConsumerObserver.next (Subscriber.js:91:33)
at SafeSubscriber._next (Subscriber.js:60:26)
at SafeSubscriber.next (Subscriber.js:31:18)
at BehaviorSubject._subscribe (BehaviorSubject.js:12:44)
at BehaviorSubject._trySubscribe (Observable.js:37:25)
at BehaviorSubject._trySubscribe (Subject.js:74:22)
at Observable.js:31:30
at errorContext (errorContext.js:19:9)
at BehaviorSubject.subscribe (Observable.js:22:21)

Here's my Service:

import { Injectable } from '@angular/core';
import { AppService } from '../app.service';
import { firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ResetPasswordService {

  constructor(public appService: AppService) { }

  resetPassword(resetDto: { email: string, password: string }): Promise<boolean> {
    let result = firstValueFrom(this.appService.PUT<boolean>(`users/reset-password`, resetDto )).then(resetResult => {
      return resetResult;
    }, error => {
      return error.status;
    });
    return result;
  }

  verifyUser(userId: string): Promise<boolean> {
    // This is line 25
    let result = firstValueFrom(this.appService.GET<boolean>(`users/verify?userId=${userId}` )).then(resetResult => {
      return resetResult;
    }, error => {
      return error.status;
    });
    return result;
  }
}

My Reset Component HTML:

<p>reset-password works!</p>
<div *ngIf="resetDto.userId">
    <p>you're already verified! Go to the webpage and log in to start using our site!</p>
</div>

Answer 1

Please null check the ngIf this will solve your issue!

Before:

<div *ngIf="resetDto.userId">

After:

<div *ngIf="resetDto && resetDto.userId">