How to implement Ionic 4 UI components API methods/properties and events without Angular?

razaviv · April 22, 2018, 7:15am

Since Angular 5 is super heavy and re-build time takes over 10 seconds, I decided to try Ionic 4 core UI Components with another framework.

I think about the old and the good AngularJS or maybe Vue.js.

When loading the CSS Components its easy and I can use the reference from the Ionic website. But I do not handle to find any documentation about methods/properties and events without Angular.

For example, I want to pop the modal programatically.

Where can I find some documentation on how to run Ionic 4 without Angular? Will Ionic team provide a reference for each framework in future when Ionic 4 version will be released (since now its on alpha).

Thanks.

Tommertom · April 22, 2018, 9:07am

hi

you are ahead of the game. Ionic team is working overtime to get it released and documented

Either dive into the source code on Github or check josh morony’s blog. He did a nice one on navigation and Ionic 4.

Some have tried here on the forum.

Tom

Tommertom · April 22, 2018, 9:18am

Here some code on modal

github.com

ionic-team/ionic/blob/d37623a2caaad64f66f1e008c6f8411c6bf8642a/core/src/components/modal/test/basic/index.html

<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Modal - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Modal - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content padding>

This file has been truncated. show original

Modal controller specs

github.com

ionic-team/ionic/blob/4ea8881f335bdbb23ce00da3aff4cebe666c3760/core/src/components/modal-controller/modal-controller.tsx

import { Component, Listen, Method, Prop } from '@stencil/core';
import { ModalOptions } from '../../index';
import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';


@Component({
  tag: 'ion-modal-controller'
})
export class ModalController implements OverlayController {

  private modals = new Map<number, HTMLIonModalElement>();

  @Prop({ context: 'document' }) doc!: Document;

  @Listen('body:ionModalWillPresent')
  protected modalWillPresent(ev: any) {
    this.modals.set(ev.target.overlayId, ev.target);
  }

  @Listen('body:ionModalWillDismiss')

This file has been truncated. show original

github.com

ionic-team/ionic/blob/d37623a2caaad64f66f1e008c6f8411c6bf8642a/core/src/components/modal-controller/readme.md

# ion-modal-controller

Modal controllers programmatically control the modal component. Modals can be created and dismissed from the modal controller. View the [Modal](../../modal/Modal) documentation for a full list of options to pass upon creation.


```javascript
async function presentModal() {
  // initialize controller
  const modalController = document.querySelector('ion-modal-controller');
  await modalController.componentOnReady();

  // create component to open
  const element = document.createElement('div');
  element.innerHTML = `
  <ion-header>
    <ion-toolbar>
      <ion-title>Super Modal</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>

This file has been truncated. show original

So docs contained in the README.md files