How to fix "Cannot set property of undefined"?

Question

I am making a countdown timer in angular but getting an TypeError while trying to call a variable from another component. I am not able to figure what exactly is causing this problem. This is the video I am follow: Countdown Timer Below is my code:

Timer.component.ts

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-timer',
  template: `<span>{{ currentValue }}</span>`,
  styleUrls: ['./timer.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimerComponent implements OnInit {

  @Input() startAt = 0;

  @Output() counter = new EventEmitter<string>();

  currentValue = '';
  constructor(private changeDetector: ChangeDetectorRef) { }

  ngOnInit(){
  }

  public start(){
    this.currentValue = this.formatValue(this.startAt);
    this.changeDetector .detectChanges();
  }

  private formatValue(v){
    const minutes = Math.floor(v/60);
    const formattedMinutes = (minutes > 9) ? minutes : ('0' + minutes);

    const seconds = v%60;
    const formattedSeconds = (seconds > 9) ? seconds : ('0' + seconds);

    return `${ formattedMinutes } : ${ formattedSeconds }`;
  }
}

questions.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { TimerComponent } from '../timer/timer.component';

export class QuestionComponent implements OnInit {

  @ViewChild('counter', { read: TimerComponent })
  private counter: TimerComponent;

  ngOnInit() {
      this.counter.startAt = 2700;
      this.counter.start();
  }
}

question.component.html

<app-timer #counter></app-timer>

ERROR

core.js:6185 ERROR TypeError: Cannot set property 'startAt' of undefined
    at QuestionComponent.ngOnInit (question.component.ts:122)
    at callHook (core.js:4686)
    at callHooks (core.js:4650)
    at executeInitAndCheckHooks (core.js:4591)
    at refreshView (core.js:11814)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)
    at refreshView (core.js:11848)

This is my code. Please help me out.

You're not creating an instance of `counter` in QuestionComponent. Add a constructor. — RamblinRose, Apr 07 '20 at 16:04
And see this [Difference between Constructor and ngOnInit](https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit) — RamblinRose, Apr 07 '20 at 16:07
@RamblinRose can you please tell how to create as I'm totally new in Angular — Avishek, Apr 07 '20 at 16:07
Does this answer your question? [Difference between Constructor and ngOnInit](https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit) — RamblinRose, Apr 07 '20 at 16:09
Without verifing it, please try to change the `ngOnInit` hook to `ngAfterViewInit`. — mamichels, Apr 07 '20 at 16:12
@mamichels The error is gone but the view is not rendered yet — Avishek, Apr 07 '20 at 16:18
you can also try adding `static: true` prop to the `@ViewChild` directive if there's no *ngIf in the template — D Pro, Apr 07 '20 at 17:00

score 1 · Answer 1 · answered May 08 '20 at 10:38

You need to wait for the initialisation of the child with the AfterViewInit hook.

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

export class QuestionComponent implements OnInit, AfterViewInit {

    ngAfterViewInit() {
        this.counter.startAt = 2700;
        this.counter.start();
    }

}

How to fix "Cannot set property of undefined"?

1 Answers1