Problems Implementing College Application and its solutions

For our last post i.e. College Application in Ionic 3, we might get little difficulties during the implementation of the College Application so this is why we wrote this article that could be of your help.

Some of the main problems related to College application ad their respective solutions are shown below.

  • Sliding the images:

The sliding images on the home page is made to be possible with the <ion-slides> elements. Here we create templates to create slides and listen to slide events and the navigation between the slides are done by swiping or SlideTo() for specific slides  or SlideNext() the slide that follows the active slide.

///image slider script

 selectTab(index) {
 this.pageSlider.slideTo(index);
 }
 changeWillSlide($event) {
 this.tabs = $event._snapIndex.toString();
 }
  • Implementing Date:

It is used to present an interface to select date and times. In the project we have shown Events Page functioning with dates that all the event notification are sorted by the date. It is easy to use.

<ion-datetime displayFormat="MMMM DD, YYYY" min="2010" max="2025-10-31" [(ngModel)]="today"></ion-datetime>
  • Photo Gallery:

It need to display any kind of grid with pictures or photos to the user, It will display images in a gallery like infinite loop where we can always see the end of the previous image and the start of the following. Photo Gallery uses IonicImageViewerModule plugin, after that  create a very simple array inside our .ts file. And the html can be shows like this:

<ion-card>
  <ion-slides class="image-slider" loop="true" slidesPerView="2">
    <ion-slide *ngFor="let img of images">
      <img src="assets/imgs/{{img}}" class="thumb-img" imageViewer/>
    </ion-slide>
  </ion-slides>
</ion-card>

with the scss like:

 on-slide.swiper-slide{ 
   left: 25%; 
}
 .slide-zoom {
   background: #e6e6e6;
 }
 .thumb-img {
   padding:10px;
 }
  • Adding Google Map for Contact Info:

There are few steps for adding google map to an ionic2/ionic3 project.

    • Adding the Google Maps SDK to an Ionic Application : We can also embed google maps in mobile applications, we are using google map’s JavaScript API in here which provides the smartest approach to rendering markers, The JavaScript API on mobile is capable of handling maps with thousands of markers. include this JavaScript API in your index.html file and replace your api key which you can get from https://developers.google.com/maps/documentation/javascript/get-api-key
        • Add the JavaScript SDK:
          http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE 

          include this JavaScript API in your index.html file and replace your api key which you can get from  Google API. 

        • Loading the Map:
          <ion-header>
           <ion-navbar>
            Maps
           </ion-navbar> 
          </ion-header> 
          <ion-content> 
          <ion-item id="map"></ion-item> 
            //by #map we can grab the reference with the viewChild later.
          <ion-content>
          
          

          Now we are going to modify the .ts file for getting the HTML references. 

          import { Component, ViewChild, ElementRef } from '@angular/core'; 
          declare var google;
          @Component({...})
          export class HomePage {
          @ViewChild('map') mapElement:
           ElementRef;
          map: any;
          constructor(...) {}
          ionViewDidLoad(){
          this.loadMap();
           }
          loadMap(){ //handles creating a new map and loding it to map div
          let latLng = new google.maps.LatLng(67.9290, -45.10);
          //letLng represent the location that we want to center the map on.
          let mapOptions = {
          center: latLng,
          zoom: 20,
          mapTypeId: google.maps.MapTypeId.ROADMAP
           }
          
          this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
           }
          
           }
          
        • And Finally some Style to show the map:
           scroll{ 
             height: 100%; 
          }
           #map {
           height: 100%;
            width: 100%;  
          }

          This post will help you overcome the difficulties during the implementation of College application in ionic 3.

 

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *