Ui decorator example

component.ts

/* THE COMPONENT EXAMPLE */

@Component({
  moduleId: __filename,
  selector: 'fs-home-page',
  templateUrl: './home.template.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [Animator.bounceIn(1000)],
  styles: [`
    :host {
      display: block;
      position: relative;
    }
  `]
})
@UI({
  footer: true,
  navigator: {
    isVisible: true,
    isInverse: false,
    hasScroll: true,
    hasInfoBar: true,
    menu: {
      enable: true
    },
    side: {
      enable: true
    },
    info: {
      enable: true
    }
  }
})
export class HomeContainer extends Container implements AfterViewInit {
  toggle: boolean = false;

  constructor(
    private detectionStrategy: ChangeDetectorRef
  ) {
    super();
  }

  onSelect() {
    this.toggle = (this.toggle) === false ? true : false;
    this.detectionStrategy.markForCheck();
  }

  ngAfterViewInit() {
    this.toggle = true;
    this.detectionStrategy.markForCheck();
  }

}