Angular Cannot read property of undefined with @Input

Question

I have create a component used in my parent component:

<app-event-menu-nav [event]="event"></app-event-menu-nav>

Here is the component:

import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core';
import {ScrollNavigationService} from "../../../shared/services/scroll-navigation/scroll-navigation.service";
import {AuthService} from "../../../shared/services/auth/auth.service";
import {EventModel} from "@event/core";

@Component({
  selector: 'app-event-menu-nav',
  templateUrl: './event-menu-nav.component.html',
  styleUrls: ['./event-menu-nav.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EventMenuNavComponent implements OnInit {
  @Input() event: EventModel;

  constructor(
    private scrollService: ScrollNavigationService,
    public authService: AuthService
  ) {}

  ngOnInit(): void {}

  scrollTo(anchor: string, offset?: number) {
    this.scrollService.scrollToAnchor(anchor, { offset });
  }

  isOwner() {
    return this.authService.currentUserId === this.event.creator;
  }
}

and the html

<nav class="secondary_nav">
  <div class="container">
    <ul>
      <li>
        <a (click)="scrollTo('description', -80 )">
          <i class="fal fa-file-alt"></i> {{ 'event.menu.description' | translate }}
        </a>
      </li>
      <li *ngIf="!event.onlineEvent">
        <a (click)="scrollTo('location', -60)"></a>
          <i class="fal fa-map-marker-alt"></i> {{ 'event.menu.location' | translate }}
      </li>
      <li>
        <a (click)="scrollTo('comments')">
          <i class="fal fa-comment"></i> {{ 'event.menu.comments' | translate }}
        </a>
      </li>
      <li *ngIf="isOwner()" >
        <a [routerLink]="['/organization/event', event?.id]">
          <i class="fal fa-cog"></i> {{ 'event.menu.admin' | translate }}
        </a>
      </li>
    </ul>
  </div>
</nav>

I'm having an issue when I tried to run the Karma test:

Cannot read property 'onlineEvent' of undefined

I don't know why I'm having this issue. Do I have to add something on my spec.ts?

This works, but only fails in test? Please share your test setup code, you may just need to specify the input value for the test like (componentUnderTest.event = {...}) — BizzyBob
– BizzyBob, Commented Mar 10, 2021 at 19:06

Arnaud Denoyelle · Accepted Answer · 2021-03-10 19:13:02Z

1

If event is undefined, the evaluation of event.onlineEvent fails here :

<li *ngIf="!event.onlineEvent">

You can prevent the template from rendering until event is defined, for example by adding a *ngIf on the ul :

<ul *ngIf="event">
  [...]
  <li *ngIf="!event.onlineEvent">

If the value is always defined and fails only in the unit test, it means that you should give a value in the context of the unit test. For example, like this :

component = fixture.componentInstance;
component.event = [...]
fixture.detectChanges();

answered Mar 10, 2021 at 19:13

Arnaud Denoyelle

31.4k18 gold badges106 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Cannot read property of undefined with @Input

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related