Typescript assigning variable in ngAfterViewInit not working

angular, angular2-components, components

Solution

Invoking change detection explicitly 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();
}

Problem

I am trying to create a component in angular 4 and am running into a very strange issue which i cant seem to solve. I have a simple `boolean` that i an trying to set based on a `@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 is ``` <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 type `text`, which it kinda does, and this is were i am getting very confused. Below is the `console.log` prints. So now `this.showTextInput` is equal to `true`. However if i then use this in the component like so ``` <ion-input #input [type]="inputType" [disabled]="isSelect" (keyup)="itemValueChanged(input.value)" (keyup.enter)="itemUpdate()" *ngIf="showTextInput"> </ion-input> ``` Then the component breaks completely. Mainly because it does not show as the parent component does not handle the form name being passed, but to put it simply, if i even add something like ``` <div *ngIf="showTextInput"> foobar </div> ``` The `foobar` text will not show and there is no error. Am i handling the pass in the correct lifecycle hook?

Original source