@ionic/angular#IonRouterOutlet TypeScript Examples

The following examples show how to use @ionic/angular#IonRouterOutlet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: ionic.animation.ts From onchat-web with Apache License 2.0

6 votes

slide: (outlet: IonRouterOutlet) => AnimationBuilder = (outlet: IonRouterOutlet) => (baseEl: HTMLIonRouterOutletElement, opts) => {
  const { activatedRouteData } = outlet;
  const { enteringEl, leavingEl } = opts;
  const animationIndex = +baseEl.dataset.animation;
  const animation = createAnimation().duration(300).easing('ease-out');
  const enteringAnimation = createAnimation().addElement(enteringEl).beforeRemoveClass('ion-page-invisible');
  const leavingAnimation = createAnimation().addElement(leavingEl).beforeRemoveClass('ion-page-invisible');

  if (animationIndex > activatedRouteData.animation) {
    enteringAnimation.fromTo('transform', 'translateX(-100%)', 'translateX(0)');
    leavingAnimation.fromTo('transform', 'translateX(0)', 'translateX(100%)');
  } else {
    enteringAnimation.fromTo('transform', 'translateX(100%)', 'translateX(0)');
    leavingAnimation.fromTo('transform', 'translateX(0)', 'translateX(-100%)');
  }

  baseEl.dataset.animation = activatedRouteData.animation;
  return animation.addAnimation([enteringAnimation, leavingAnimation]);
}

Example #2

Source File: chat-drawer.component.ts From onchat-web with Apache License 2.0

6 votes

constructor(
    private peer: Peer,
    private overlay: Overlay,
    private injector: Injector,
    private globalData: GlobalData,
    private mediaDevice: MediaDevice,
    private socket: Socket,
    private routerOutlet: IonRouterOutlet,
  ) { }

Example #3

Source File: home.page.ts From onchat-web with Apache License 2.0

6 votes

constructor(
    public globalData: GlobalData,
    private router: Router,
    private overlay: Overlay,
    private route: ActivatedRoute,
    private chatroomService: ChatroomService,
    private userService: UserService,
    private cacheService: CacheService,
    private socket: Socket,
    private routerOutlet: IonRouterOutlet,
    private destroyer: Destroyer,
  ) { }

Example #4

Source File: login.page.ts From onchat-web with Apache License 2.0

6 votes

constructor(
    public globalData: GlobalData,
    private router: Router,
    private userService: UserService,
    private overlay: Overlay,
    private socket: Socket,
    private formBuilder: FormBuilder,
    private routerOutlet: IonRouterOutlet,
    @Inject(WINDOW) private window: Window,
  ) { }

Example #5

Source File: reset.page.ts From onchat-web with Apache License 2.0

6 votes

constructor(
    public globalData: GlobalData,
    private app: Application,
    private overlay: Overlay,
    private formBuilder: FormBuilder,
    private userService: UserService,
    private routerOutlet: IonRouterOutlet,
    @Inject(WINDOW) private window: Window,
  ) { }

Example #6

Source File: register.page.ts From onchat-web with Apache License 2.0

6 votes

constructor(
    public globalData: GlobalData,
    private route: ActivatedRoute,
    private router: Router,
    private formBuilder: FormBuilder,
    private asyncValidator: AsyncValidator,
    private onChatService: OnChatService,
    private systemService: IndexService,
    private userService: UserService,
    private overlay: Overlay,
    private socket: Socket,
    private routerOutlet: IonRouterOutlet,
    @Inject(WINDOW) private window: Window,
  ) { }

Example #7

Source File: app.component.ts From casual-chess with GNU General Public License v3.0

6 votes

private initializeApp() {
    this.notificationsService.requestSubscription();
    this.router.events.subscribe(evt => {
      if (evt instanceof NavigationStart) {
        if (evt.url.startsWith('/position') && evt.url.endsWith('embed=true'))
          this.hideMenu = true;
      }
    });
    this.platform.backButton.subscribe(async () => {
      this.routerOutlets.forEach(async (outlet: IonRouterOutlet) => {
        this.goBack();
      });
    });
    Promise.all([
      this.configurationService.initialize(),
      this.platform.ready()
    ]).then((values: any[]) => {
      this.config = values[0];
      this.pieceTheme = this.config.pieceTheme;
      this.themeSwitcherService.setTheme(this.config.colorTheme);
      this.boardThemeSwitcherService.setTheme(this.config.boardTheme);
      this.translate.get(['app.back-to-exit']).subscribe(async res => {
        this.texts = res;
      });
      this.initialized = true;
    });
  }

Example #8

Source File: app.component.ts From Elastos.Essentials.App with MIT License

5 votes

@ViewChild(IonRouterOutlet, { static: true }) routerOutlet: IonRouterOutlet;

Example #9

Source File: voice-message.component.ts From onchat-web with Apache License 2.0

5 votes

constructor(
    private recorder: Recorder,
    private routerOutlet: IonRouterOutlet,
    private changeDetectorRef: ChangeDetectorRef,
    private destroyer: Destroyer,
  ) { }

Example #10

Source File: news.page.ts From onchat-web with Apache License 2.0

5 votes

@ViewChild(IonRouterOutlet) routerOutlet: IonRouterOutlet;

Example #11

Source File: contact.page.ts From onchat-web with Apache License 2.0

5 votes

@ViewChild(IonRouterOutlet) routerOutlet: IonRouterOutlet;

Example #12

Source File: search.page.ts From onchat-web with Apache License 2.0

5 votes

@ViewChild(IonRouterOutlet) routerOutlet: IonRouterOutlet;

Example #13

Source File: safety.page.ts From onchat-web with Apache License 2.0

5 votes

constructor(
    public globalData: GlobalData,
    private overlay: Overlay,
    private routerOutlet: IonRouterOutlet
  ) { }

Example #14

Source File: app.component.ts From casual-chess with GNU General Public License v3.0

5 votes

@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;