Modal for beginners with the tab template

Ionic Framework ionic-v3
1

I am a newbie in Angular so what i did until now is:

  1. via the CLI created a tab app to play around
  2. changed the pages in their subfolders (pages/page1/page1.html) with my content
    Everything works fine.
    On page3.html i inserted a button with the <button (click)=startmodal()>now pop up</button>
    And now i am stuck.
    I checked this forum and the web for on how to implement the controllers and also where to
    put them in, but nothing worked for me so far :frowning:

I am trying the stuff based on this doc-page:

But for me it is too confusing. There exists a codepen with an ionic modal, but that even does not work
at my browser. It seems to be with the v1 ionic - i am not sure.

So anyone can direct me on how to implement a modal?
i made a page called ā€œtheModal.htmlā€ in the folder mymodals

if i am right, i put the dismiss controllers inside the themodal.html but where do i put the script that calls
the modal?

Thanks in advance!
Carlos

2

Here is a simple example in plunkr; http://embed.plnkr.co/SJ8GtqbRntby5yGzLEft/

I think you should be able to figure out how modals work now :slight_smile:

1 Like
3

Thanks a lot, i will try it out right now.
I would just wish that the example in the docs would be much much MUCH easier.
They work with angular variables that gather the contetn from the character value to create
dynamic content. That is awesome, but not what i understand as a ā€œsimpleā€ example.
For me a simple example would be a standard blank page with a button and once you
ciick it the modal pops up.

So if id understood it right at the end all that there exist would be four files, in example:
1x start.html
1x start.js
1x modal.html
1x modal.js

At this moment i am working with JS files but in your example you use typescript.
Can this become a problem if i mix it?

Hugs and greetings and thanks a lot for your time and support!

4

Yes, donā€™t use Typescript files if your project is not set up for Typescript.
I have never done an Ionic 2 javascript only project, but the logic of the modal usage and view to javascript communication stays pretty much the same, I think.
I donā€™t really have time to look further in to it right now, I might reply later today.

5

Itā€™s not working for me - nevertheless thanks a lot bryandh!
The console spits out that it can not handle the click function so i am sure that there is something
with the typescript. I am not sure but will continue to find out how to solve it.

Thanks for your time!

6

Oh that could be because the click handler syntax you provided at the start of this post was wrong. You seem to have forgotten the quotes around the function name.

So instead of writing <button (click)=startmodal()>now pop up</button>, you should write <button (click)="startmodal()">now pop up</button>, notice the "" around startmodal()

7

Thanks for the correction but it still does not work.
I just went back to the documents and now this is weird. When i copy this code:
https://github.com/driftyco/ionic-preview-app/blob/master/app/pages/modals/basic/pages.ts
to my own page and via the CLI write ionic serve
i get this error:
Unexpected token (9:21) while parsing file: C:\Users\Carlos\ionic\0002-timecentered\app\pages\page3\page3.js

I have not changed anything, simply copy and paste. Do you know what token is missing from line 9 on?

8

You went ahead and did it anyway, eh?

9

Oh my gosh. Sorry. I just saw it. Sorry for this. So i will search for a javascript tutorial about the modal.
Sorry again.

10

Unless you have a strong reason otherwise, if youā€™re just starting out with Angular2, I would emphatically suggest using TypeScript instead. It is better documented as far as Angular is concerned, and it will help you find lots of frustrating errors at build time.

11

Excuse me guys to keep this thread alive.
Maybe i am wrong, but i think that the documentation about the modal component should be better
documented. I am talking about this part:

After the header Basic Usage it starts with "Next, we needā€¦"
But what ā€œnextā€ are they talking about? For me, as a newbie, it is not clear what part of code comes
into what file. Meanwhile i know in theory how it works but whatever i do, it does not work. I simply follow
that example from the documentation but the modal does not appear :frowning:

Thanks again for your help and time!

1 Like
12

SOLVED!
After the websearch being not of help, i used Youtube with ā€œionic2 modalā€ and thanks to this tutorial
i was able to create my modal:

The good thing: my theory was right i simply did not understood what part has to be where.
And also that i had forgotten to import the NavController and the modal page.

Unfortunately the video is in portuguese.
Those of you who understand it, the modal part starts at 12:20!

Thanks again to all of you for your support!!!

13

This is really unclear in the docs imho. Compared to Ionic 1 this is nigh on obfuscated into oblivion.

We really need a step by step guide.

All I want is a modal when you press one button in one tab!!

14

Anyone?

Iā€™ve found some tutorials but they are out of date.

I canā€™t tell it should be easy but I just canā€™t get it working. They use odd words for the decorators and Iā€™m baffled.

15


16

@SubEffect found it in docs, you should use (ionSelect) instead od (click):

<ion-tabs>
  <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>

export class Tabs {
  constructor(public modalCtrl: ModalController) {

  }

  chat() {
    let modal = this.modalCtrl.create(ChatPage);
    modal.present();
  }
}

https://ionicframework.com/docs/api/components/tabs/Tab/

17

Oh, Iā€™ve managed it fine now.

The tutorials arenā€™t very good but I saw someone elseā€™s code and worked it
out