[FIXED] Angular Data-Binding results in NaN


My problem is that the @Input() does not work properly for me. When I try to pass a value via data-binding it results in a NaN Error message.

I appreciate any form of help.

import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';

  selector: 'app-nav-button',
  templateUrl: './nav-button.component.html',
  styleUrls: ['./nav-button.component.scss'],

export class NavButtonComponent implements OnInit {
  @Input() page: String; <-- results in NaN - message

  constructor(private router: Router) { }

  ngOnInit() {}

  goToPage(): void {

My "View". Here I pass the data to my "NavButtonComponent"-class.

  <app-nav-button [page]="food-list"></app-nav-button>


The answer was <app-nav-button page="food-list"></app-nav-button>.
Removing the [] was the solution. Thank you @cfprabhu !

Answered By – HereToLearn

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published