fix(base-input): initialize on ngAfterContentInit

src/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Config } from '../../config/config';
@@ -66,7 +66,7 @@ import { Item } from '../item/item';
   providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Checkbox, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
-export class Checkbox extends BaseInput<boolean> implements IonicTapInput, AfterViewInit, OnDestroy {
+export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDestroy {
 
   /**
    * @input {boolean} If true, the element is selected.

src/components/datetime/datetime.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Config } from '../../config/config';
@@ -267,7 +267,7 @@ import { dateValueRange, renderDateTime, renderTextFormat, convertDataToISO, con
   providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: DateTime, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
-export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit, ControlValueAccessor, OnDestroy {
+export class DateTime extends BaseInput<DateTimeData> implements AfterContentInit, ControlValueAccessor, OnDestroy {
 
   _text: string = '';
   _min: DateTimeData;
@@ -425,7 +425,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit,
   /**
    * @hidden
    */
-  ngAfterViewInit() {
+  ngAfterContentInit() {
     // first see if locale names were provided in the inputs
     // then check to see if they're in the config
     // if neither were provided then it will use default English names

src/components/datetime/test/datetime.spec.ts

@@ -144,23 +144,23 @@ describe('DateTime', () => {
   describe('writeValue', () => {
 
     it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.writeValue('1994-12-15T13:47:20.789Z');
 
       expect(datetime._text).toEqual('Dec 15, 1994');
     }));
 
     it('should updateText with pickerFormat when no displayFormat', zoned(() => {
       datetime.pickerFormat = 'YYYY';
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.writeValue('1994-12-15T13:47:20.789Z');
 
       expect(datetime._text).toEqual('1994');
     }));
 
     it('should updateText with displayFormat when no pickerFormat', zoned(() => {
       datetime.displayFormat = 'YYYY';
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.writeValue('1994-12-15T13:47:20.789Z');
 
       expect(datetime._text).toEqual('1994');
@@ -172,7 +172,7 @@ describe('DateTime', () => {
 
     it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
       datetime.generate();
@@ -186,7 +186,7 @@ describe('DateTime', () => {
 
     it('should generate with only displayFormat', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.displayFormat = 'YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
@@ -199,7 +199,7 @@ describe('DateTime', () => {
 
     it('should generate with only pickerFormat', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.pickerFormat = 'YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
@@ -212,7 +212,7 @@ describe('DateTime', () => {
 
     it('should generate with custom locale short month names from input property', zoned(() => {
       datetime.monthShortNames = customLocale.monthShortNames;
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.pickerFormat = 'MMM YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 
@@ -227,7 +227,7 @@ describe('DateTime', () => {
 
     it('should generate with custom locale full month names from input property', zoned(() => {
       datetime.monthNames = customLocale.monthNames;
-      datetime.ngAfterViewInit();
+      datetime.ngAfterContentInit();
       datetime.pickerFormat = 'MMMM YYYY';
       datetime.setValue('1994-12-15T13:47:20.789Z');
 

src/components/range/range.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { clamp, isTrueProperty } from '../../util/util';
@@ -104,7 +104,7 @@ import { UIEventManager } from '../../gestures/ui-event-manager';
   providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Range, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
-export class Range extends BaseInput<any> implements AfterViewInit, ControlValueAccessor, OnDestroy {
+export class Range extends BaseInput<any> implements AfterContentInit, ControlValueAccessor, OnDestroy {
 
   _dual: boolean;
   _pin: boolean;
@@ -266,7 +266,7 @@ export class Range extends BaseInput<any> implements AfterViewInit, ControlValue
   /**
    * @hidden
    */
-  ngAfterViewInit() {
+  ngAfterContentInit() {
     this._initialize();
 
     // add touchstart/mousedown listeners

src/components/searchbar/searchbar.ts

@@ -172,15 +172,6 @@ export class Searchbar extends BaseInput<string> {
 
   @ViewChild('cancelButton', {read: ElementRef}) _cancelButton: ElementRef;
 
-  /**
-   * @hidden
-   * After View Checked position the elements
-   */
-  ngAfterViewInit() {
-    this._initialize();
-    this.positionElements();
-  }
-
   /**
    * @hidden
    * On Initialization check for attributes
@@ -196,11 +187,9 @@ export class Searchbar extends BaseInput<string> {
    * @hidden
    */
   _inputUpdated() {
-    if (this._searchbarInput) {
-      var ele = this._searchbarInput.nativeElement;
-      if (ele) {
-        ele.value = this.value;
-      }
+    const ele = this._searchbarInput.nativeElement;
+    if (ele) {
+      ele.value = this.value;
     }
     this.positionElements();
   }
@@ -229,9 +218,6 @@ export class Searchbar extends BaseInput<string> {
   }
 
   positionPlaceholder() {
-    if (!this._searchbarInput || !this._searchbarIcon) {
-      return;
-    }
     const inputEle = this._searchbarInput.nativeElement;
     const iconEle = this._searchbarIcon.nativeElement;
 
@@ -265,9 +251,6 @@ export class Searchbar extends BaseInput<string> {
    * Show the iOS Cancel button on focus, hide it offscreen otherwise
    */
   positionCancelButton() {
-    if (!this._cancelButton || !this._cancelButton.nativeElement) {
-      return;
-    }
     const showShowCancel = this._isFocus;
     if (showShowCancel !== this._isCancelVisible) {
       var cancelStyleEle = this._cancelButton.nativeElement;

src/components/searchbar/test/basic/pages/root-page/root-page.html

@@ -44,4 +44,10 @@ <h5 padding-left> Search - Animated and No Cancel</h5>
   <p padding>
     <button ion-button block (click)="changeValue()">Change Value</button>
   </p>
+
+  <button ion-button (click)="activeTab = 'a'">Error Please</button>
+  <div *ngIf="activeTab == 'a'">
+      <ion-searchbar animated="true" [showCancelButton]="true"></ion-searchbar>
+  </div>
+
 </ion-content>

src/components/searchbar/test/basic/pages/root-page/root-page.ts

@@ -13,6 +13,7 @@ export class RootPage {
   isAutocorrect: string = 'on';
   isAutocomplete: string = 'on';
   isSpellcheck: boolean = true;
+  activeTab = '';
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {
 

src/components/segment/segment.ts

@@ -1,8 +1,9 @@
-import { ContentChildren, Directive, ElementRef, Optional, QueryList, Renderer } from '@angular/core';
+import { AfterContentInit, ContentChildren, Directive, ElementRef, Optional, QueryList, Renderer } from '@angular/core';
 import { NgControl } from '@angular/forms';
 
 import { Config } from '../../config/config';
 import { BaseInput } from '../../util/base-input';
+import { assert } from '../../util/util';
 import { SegmentButton } from './segment-button';
 
 /**
@@ -67,7 +68,7 @@ import { SegmentButton } from './segment-button';
     '[class.segment-disabled]': '_disabled'
   }
 })
-export class Segment extends BaseInput<string> {
+export class Segment extends BaseInput<string> implements AfterContentInit {
 
   /**
    * @hidden
@@ -86,7 +87,7 @@ export class Segment extends BaseInput<string> {
   /**
    * @hidden
    */
-  ngAfterViewInit() {
+  ngAfterContentInit() {
     this._initialize();
     this._buttons.forEach(button => {
       button.ionSelect.subscribe((selectedButton: any) => this.value = selectedButton.value);
@@ -98,12 +99,14 @@ export class Segment extends BaseInput<string> {
    * Write a new value to the element.
    */
   _inputUpdated() {
-    if (this._buttons) {
-      var buttons = this._buttons.toArray();
-      var value = this.value;
-      for (var button of buttons) {
-        button.isActive = (button.value === value);
-      }
+    if (!this._buttons) {
+      assert(false, 'buttons are undefined');
+      return;
+    }
+    const buttons = this._buttons.toArray();
+    const value = this.value;
+    for (var button of buttons) {
+      button.isActive = (button.value === value);
     }
   }
 

src/components/select/select.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
+import { Component, ContentChildren, ElementRef, EventEmitter, Input, HostListener, OnDestroy, Optional, Output, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ActionSheet } from '../action-sheet/action-sheet';
@@ -147,7 +147,7 @@ import { SelectPopover, SelectPopoverOption } from './select-popover-component';
   providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Select, multi: true } ],
   encapsulation: ViewEncapsulation.None,
 })
-export class Select extends BaseInput<any> implements AfterViewInit, OnDestroy {
+export class Select extends BaseInput<any> implements OnDestroy {
 
   _multi: boolean = false;
   _options: QueryList<Option>;

src/util/base-input.ts

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, Input, NgZone, Output, Renderer } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, Input, NgZone, Output, Renderer } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { NgControl } from '@angular/forms';
 
@@ -10,7 +10,7 @@ import { Form } from './form';
 import { TimeoutDebouncer } from './debouncer';
 
 
-export interface CommonInput<T> extends ControlValueAccessor {
+export interface CommonInput<T> extends ControlValueAccessor, AfterContentInit {
 
   id: string;
   disabled: boolean;
@@ -271,7 +271,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
   /**
    * @hidden
    */
-  ngAfterViewInit() {
+  ngAfterContentInit() {
     this._initialize();
   }
 

src/util/input-tester.ts

@@ -55,7 +55,7 @@ export function commonInputTest<T>(input: BaseInput<T>, config: TestConfig) {
   const zone = new NgZone(true);
   zone.run(() => {
     testInput(input, config, false);
-    input.ngAfterViewInit();
+    input.ngAfterContentInit();
     testInput(input, config, true);
     input.ngOnDestroy();
     assert(!input._init, 'input was not destroyed correctly');