Typescript variable assignment in ngAfterViewInit doesn't work
I am trying to create a component in angular 4 and am in a very strange problem that I cannot solve.
I have a simple boolean
one that I am trying to install based on@Input
@Input('type') inputType: string = 'text';
showTextInput: boolean = false;
...
ngAfterViewInit() {
console.log('input', this.inputType);
this.showTextInput = this.inputType === 'text' ? true : false;
console.log('after condition', this.showTextInput);
}
This html for the component
<ts-input-item formControlName="name"
[control]="programForm.controls.name"
[label]="'Name'"
(onUpdateClicked)="updateItem($event,'Name','name')">
</ts-input-item>
so in its current form it should default to enter text
which it does and that was, I am very much confused. Below are the prints console.log
.
So now it's this.showTextInput
equal true
. However, if I then use this in a component, so
<ion-input #input
[type]="inputType"
[disabled]="isSelect"
(keyup)="itemValueChanged(input.value)"
(keyup.enter)="itemUpdate()"
*ngIf="showTextInput">
</ion-input>
Then the component completely breaks down. Mainly because it is not visible as the parent component does not handle the submitted form name, but simply if I even add something like
<div *ngIf="showTextInput"> foobar </div>
foobar
No text will be displayed and no error will occur. Am I handling the pass in the correct lifecycle hook?
An explicit link to change detection might help:
constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewInit() {
console.log('input', this.inputType);
this.showTextInput = this.inputType === 'text' ? true : false;
console.log('after condition', this.showTextInput);
this.cdRef.detectChanges();
}
source to share