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.
JavaScript
x
22
22
1
import { Component, Input, OnInit } from '@angular/core';
2
import { Router } from '@angular/router';
3
4
@Component({
5
selector: 'app-nav-button',
6
templateUrl: './nav-button.component.html',
7
styleUrls: ['./nav-button.component.scss'],
8
})
9
10
export class NavButtonComponent implements OnInit {
11
@Input() page: String; <-- results in NaN - message
12
13
constructor(private router: Router) { }
14
15
ngOnInit() {}
16
17
goToPage(): void {
18
console.log(this.page);
19
this.router.navigate([this.page]);
20
}
21
}
22
My “View”. Here I pass the data to my “NavButtonComponent”-class.
JavaScript
1
4
1
<ion-content>
2
<app-nav-button [page]="food-list"></app-nav-button>
3
</ion-content>
4
Advertisement
Answer
The answer was <app-nav-button page="food-list"></app-nav-button>
.
Removing the [] was the solution. Thank you @cfprabhu !