In an ionic app, i am using a angular component. In that angular component, i have a variable headerText
which in initialized from the page where this component is used.
Problem is that headerText
variable is always undefined.
How can i fix this problem?
This is the angular component where headerText
variable is defined.
import { Component, Input, OnInit } from '@angular/core';
import { MenuController, NavController } from 'ionic-angular';
@Component({
selector: 'custom-header-text',
templateUrl: 'custom-header-text.html'
})
export class CustomHeaderTextComponent implements OnInit {
@Input() headerText: string;
constructor(private navCtrl : NavController,
private menuCtrl : MenuController) {
}
ngOnInit() {
setTimeout(() => {
console.log('text = ' + this.headerText);
}, 3000);
}
goBack() {
this.navCtrl.pop();
}
openMenuPage() {
this.menuCtrl.enable(true,'bl-menu')
this.menuCtrl.open();
}
}
This is how i am passing a value to this headerText
variable from where this component is used.
<custom-header-text [headerText]="'Inbox'"></custom-header-text>
See below.
The reason why this is not working is that your root element in which you place the
<custom-header-text [headerText]="'Inbox'"></custom-header-text>
is not an angular component. Because of this, Angular won't compile this element. And Angular does not read attribute values during runtime, only during compile time, as otherwise we would get a performance hit.
Answered here
Your code wasn't working as the HeaderModule was not correctly configured.
There were a few issues with your implementation:
After fixing those, it was working as expected. Here's an Updated StackBlitz for your ref.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.