(Ionic 2) Pop over, Modal and Slides

Posted by

Property.html
===========
<ion-content padding class="property">

      <ion-card>
      <div class="orange_strip" style=""></div>

          <ion-card-content style="">

          <ion-grid style="">
          <ion-row style=" ">

          <ion-col class="property_img_col" width-33 style="">

          <img src="img/shop.jpg" style="" (click)="slides()" />

          </ion-col>

          <div class="thin_line" style=""></div>

          <ion-col width-67 style=" ">

          <div ><span class="property_title" style="">Greenlopes,TX</span>

          <span>  <ion-icon name="more" style="" (click)="options()"></ion-icon></span>
     
          </div>
          <div class="city" style="">Us States</div>

          <div style="color:#4d4d4d;"><span style="color:#000">Property Type:</span> Commercial</div>
          <div style="color:#4d4d4d;"><span style="color:#000">Category:</span> Individual House</div>
          </ion-col>


          </ion-row>


          </ion-grid>

          </ion-card-content>

      </ion-card>

</ion-content>




Property.ts
=============================
import {Component} from '@angular/core';

import {App, Popover, NavController, Content,Modal, NavParams,ViewController,Slides } from 'ionic-angular';

@Component({
  template: `


            <ion-content padding class="slides_modal" style="background-color:#000;">

            <button clear (click)="close()" style="color:#fff;">Back</button>

            <ion-slides>
            <ion-slide>
            <img src='img/bg.jpg'/>
            </ion-slide>
            <ion-slide>
            <img src='img/bg.jpg'/>
            </ion-slide>
            <ion-slide>
            <img src='img/bg.jpg'/>
            </ion-slide>
            </ion-slides>
            </ion-content>

  `
})


export class MyModal

{

         public base64Image: string;

            public imgname:string;
         
            name:string

            constructor(private viewCtrl: ViewController,private navController: NavController)
            {
         
            this.base64Image = "http://www.freeiconspng.com/uploads/profile-icon-9.png";


            }


  close(){ this.viewCtrl.dismiss();}

}



@Component({
  template: `


<ion-list inset >

    <button ion-item (click)="close()" style="text-align:center">Full Details</button>
   
<button ion-item (click)="close()" style="text-align:center">Edit</button>

<button ion-item (click)="close()" style="text-align:center">Delete</button>
</ion-list>



   `
})
export class PopoverPage {
 }







@Component(
{templateUrl: 'build/pages/property/property.html'}
)


export class property {
  constructor(public navController:NavController)
  {

  }


   public options(myEvent) {
let popover = Popover.create(PopoverPage);
this.navController.present(popover, {
ev: myEvent
});
  }



  slides(){

      let modal = Modal.create(MyModal);
 

      modal.onDismiss(data => {

      console.log('ABCD',data);
 




      });


      this.navController.present(modal);

  }


}


CLICK HERE