Angular Data-Binding results in NaN-CodePudding

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';

@Component({
  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 {
    console.log(this.page);
    this.router.navigate([this.page]);
  }
}

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

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

CodePudding user response：

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