Custom Component: Mini Gallery

In Custom Components, Ionic 2 by semeLeave a Comment

Pull this off with our MiniGallery component for Ionic 2.

Download Code
What you need to know before this tutorial
– Setting up Ionic – Creating and Importing Components – Adding Input into Components

Component Notes:

  • 4 Images Max.
  • Works from Iphone 4 – 6 Plus

Setup

  1. Copy the full source code below into a file <code>minigallery.component.ts
    // A miniGallery Component for Ionic 2
    // https://audacitus.com/site/?p=1132
    
    import {Component, Input, Output, EventEmitter} from '@angular/core';
    
    // Usage
    /*
      <miniGallery
        imageList={{KeyedArray}}
        galleryName="Mylo's Great Adventure"
        location="London"
        totalPics=34
        id = 34>
        </miniGallery>
    */
    
    // Limitations
    /*
        - 4 Images Max.
        - Works from Iphone 4 - 6 Plus
    */
    
    @Component ({
      selector: 'miniGallery',
      template: `
      <div class="miniGallery" (click)="onGalleryTap()">
        <h5 no-bold>{{galleryName}}</h5>
        <h6 class="mg-smallText" text-uppercase><ion-icon name="compass"></ion-icon> {{location}} | {{totalPics}} Photos</h6>
        <ion-row>
          <ion-col width-40>
            <img src="{{imageList[0]}}">
          </ion-col>
    
          <ion-col width-20>
            <img src="{{imageList[1]}}">
            <img src="{{imageList[2]}}">
          </ion-col>
    
          <ion-col width-40>
            <img src="{{imageList[3]}}">
          </ion-col>
    
        </ion-row>
      </div>
      `,
      styles : [`
          .miniGallery {
            margin-bottom:20px;
            padding-bottom:10px;
            border-bottom:1px solid #ccc;
    
          }
          .miniGallery ion-row ion-col {
            padding:2px;
          }
    
          .miniGallery ion-row ion-col img {
            border-radius:5px;
          }
    
          .mg-smallText {
            font-size:11px;
            color: #888;
            margin-top:8px;
            text-transform: uppercase;
          }
        `]
    })
    
    export class MiniGalleryComponent {
    //A simple arrary for the images. if nothing is supplied the list
    // will be used below
    @Input() imageList : any[] = [
          'http://placehold.it/300x300/ffcc33',
          'http://placehold.it/300x300/2980b9',
          'http://placehold.it/300x300/339966',
          'http://placehold.it/300x300/e74c3c'
      ];
    
    // Location (text)
    @Input() location : string = "Andromeda";
    
    // Number of Pics
    @Input() totalPics : number = 33;
    
    // Name of Gallery
    @Input() galleryName: string = "A Default Gallery";
    
    // id of gallery (useful if we want to use this for further processing)
    @Input() id : number = 2;
    
    // Expose our ID for further processing
    @Output() ExposeGallery = new EventEmitter();
    
      constructor(){
    
      }
    
    onGalleryTap() {
      this.ExposeGallery.emit({
        GalleryID : this.id
      })
    
      // Confirm that our passed in ID works
      console.log('Exposed Gallery ID',this.id);
    }
    
    }
    
  2. Copy to a folder in your src/app. In my case I used src/app/miniGallery
  3. Import into your app.module.ts:
    import { MiniGalleryComponent } from './miniGallery/minigallery.component';
  4. Add to your declarations and entryComponent Arrays:
    @NgModule({
      declarations: [
        MyApp,
        Page1,
        Page2,
        // Our Imported Component
        MiniGalleryComponent
      ],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        Page1,
        Page2,
        // Our Imported Component
        MiniGalleryComponent
      ],
      providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
    })

     

Component Usage Example

See the code below. Please note that imageListSimpleArray1 and imageListSimpleArray2 are simple arrays holding a list of image urls

Html Code
    <miniGallery
      [imageList]="imageListSimpleArray1"
      galleryName="Mylo's Great Adventure"
      location="Milky Way"
      totalPics=34
      id=333>
    </miniGallery>

    <miniGallery
      [imageList]="imageListSimpleArray2"
      galleryName="Yesterday's Memories"
      location="Austria"
      totalPics=100
      id=66>
    </miniGallery>

Data Structure of imageListSimpleArray1 & imageListSimpleArray2

export class Page1 {
  imageListSimpleArray1 = [
    "https://picjumbo.imgix.net/HNCK4003.jpg?q=40&w=1650&sharp=30",
    "https://picjumbo.imgix.net/HNCK3447.jpg?q=40&w=1650&sharp=30",
    "https://picjumbo.imgix.net/HNCK8991.jpg?q=40&w=1650&sharp=30",
    "https://picjumbo.imgix.net/HNCK3767.jpg?q=40&w=1650&sharp=30"
  ]
  imageListSimpleArray2 = [
    "https://picjumbo.imgix.net/DSC02614.jpg?q=40&w=1650&sharp=30",
    "https://picjumbo.imgix.net/HNCK1664.jpg?q=40&w=1650&sharp=30",
    "https://picjumbo.imgix.net/DSC02343.jpg?q=40&w=1650&sharp=30",
    "https://picjumbo.imgix.net/HNCK7446.jpg?q=40&w=1650&sharp=30"
  ]
  constructor(public navCtrl: NavController) {
  }

}