How to use ionic-angular - 10 common examples

// Copyright The Linux Foundation and each contributor to CommunityBridge.
// SPDX-License-Identifier: MIT

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { AuthService } from '../../services/auth.service';

@IonicPage({
  name: 'LogoutPage',
  segment: 'logout'
})
@Component({
  selector: 'logout-page',
  templateUrl: 'logout-page.html'
})
export class LogoutPage {
  constructor(
    public authService: AuthService
  ) { }

  ngOnInit() {
    // Will redirect user back to the login page after logging out of auth0
    this.authService.logout();
  }

// Copyright The Linux Foundation and each contributor to CommunityBridge.
// SPDX-License-Identifier: MIT

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { AuthService } from '../../services/auth.service';

@IonicPage({
  name: 'LoginPage',
  segment: 'login'
})
@Component({
  selector: 'login-page',
  templateUrl: 'login-page.html'
})
export class LoginPage {
  constructor(
    private authService: AuthService
  ) { }

  login() {
    this.authService.login();
  }
}

// Copyright The Linux Foundation and each contributor to CommunityBridge.
// SPDX-License-Identifier: MIT

import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController, NavParams, ViewController, AlertController, IonicPage, Content } from 'ionic-angular';
import { EmailValidator } from  '../../validators/email';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import { CincoService } from '../../services/cinco.service';

@IonicPage({
  segment: 'console-user-update-modal'
})
@Component({
  selector: 'console-user-update-modal',
  templateUrl: 'console-user-update-modal.html',
})
export class ConsoleUserUpdateModal {
  user: any;
  userRoles: any;
  keysGetter;
  form: FormGroup;
  submitAttempt: boolean = false;
  currentlySubmitting: boolean = false;
  @ViewChild(Content) content: Content;

  constructor(

// Copyright The Linux Foundation and each contributor to CommunityBridge.
// SPDX-License-Identifier: MIT

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddCompanyModal } from './add-company-modal';
import { LoadingSpinnerComponentModule } from '../../components/loading-spinner/loading-spinner.module';

@NgModule({
  declarations: [AddCompanyModal],
  imports: [IonicPageModule.forChild(AddCompanyModal), LoadingSpinnerComponentModule],
  entryComponents: [AddCompanyModal]
})
export class AddCompanyModalModule {}

import { ProgressBarComponent } from '../components/progress-bar/progress-bar';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        TabsPage,
        CameraPage,
        ImagePickerPage,
        UploadExamplePage,
        AboutPage,
        ProgressBarComponent
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        TabsPage,
        CameraPage,
        ImagePickerPage,
        UploadExamplePage,
        AboutPage
    ],
    // We are using the custom written prodvider
    // here instead of the array that is normally
    // added here
    providers: AppProvider.get_providers()
})

import {Page, NavParams, NavController, ViewController} from 'ionic-angular';
import {PokemonService} from '../../services/pokemon-service';
import {Capitalize} from '../../pipes/capitalize'
import Pokemon from '../../models/Pokemon';
import MoveDetail from '../move/move';
import Loader from '../loader/loader';

@Page({
    templateUrl: 'app/components/detail/detail.html',
    providers: [PokemonService],
    directives: [Loader],
    pipes: [Capitalize]
})

export class PokemonDetail {

    // the pokemon we're displaying
    private pokemon: Pokemon;

    constructor(
        public pokemonService: PokemonService,
        public params: NavParams,
        public nav: NavController,
        public viewCtrl: ViewController

import {OnInit, OnDestroy, Inject} from "@angular/core";
import {Page, NavController, Modal, Platform} from "ionic-angular";
import {ChatsTabPage} from "../chats-tab/chats-tab.page";
import {ListingsTabPage} from "../listings-tab/listings-tab.page.ts";
import {SettingsTabPage} from "../settings-tab/settings-tab.page";
import {Network} from "ionic-native";
import {Logger} from "log4javascript";
import {DisconnectModal} from "./disconnect.modal";
import {Subscription} from "rxjs";
import {loggerToken} from "../../services/log.service";

@Page({
  templateUrl: 'build/pages/tabs/tabs.html',

})
export class TabsPage implements OnInit, OnDestroy {
  private onDisconnect:Subscription;
  private onConnect:Subscription;
  private disconnectModal:Modal;
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root:any = ChatsTabPage;
  tab2Root:any = ListingsTabPage;
  tab3Root:any = SettingsTabPage;

  unreadMessagesCount:number;

  constructor(private nav:NavController,

this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

  openPage(page: any) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
  
}

ionicBootstrap(MyApp);

@Component({
  template: '',
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);

this.menu.enable(loggedIn, 'loggedInMenu');
    this.menu.enable(!loggedIn, 'loggedOutMenu');
  }
}


// Pass the main App component as the first argument
// Pass any providers for your app in the second argument
// Set any config for your app as the third argument, see the docs for
// more ways to configure your app:
// http://ionicframework.com/docs/v2/api/config/Config/
// Place the tabs on the bottom for all platforms
// See the theming docs for the default values:
// http://ionicframework.com/docs/v2/theming/platform-specific-styles/

ionicBootstrap(ConferenceApp, [ConferenceData, UserData], {
  tabbarPlacement: 'bottom'
});