import { Component } from '@angular/core';
import { mobiscroll, MbscScrollviewOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    lang: ' ',
    theme: ' ',
    themeVariant: ' '
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    birds = [{
        img: 'https://img.mobiscroll.com/demos/gridlayout/toucan.jpg',
        name: 'Toucan'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/kingfisher.jpg',
        name: 'Kingfisher'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/swift.jpg',
        name: 'Swift'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/humming.jpg',
        name: 'Humming bird'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/columbidae.jpg',
        name: 'Columbidae'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/hornbill.jpg',
        name: 'Hornbill'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/spoonbill.jpg',
        name: 'Spoonbill'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/bee-eater.jpg',
        name: 'Bee-eater'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/parrot.jpg',
        name: 'Parrot'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/goose.jpg',
        name: 'Goose bird'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/woodpecker.jpg',
        name: 'Woodpecker'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/penguin.jpg',
        name: 'Penguin'
    }]

    animals = [{
        img: 'https://img.mobiscroll.com/demos/gridlayout/okapi.jpg',
        name: 'Okapi',
        about: 'The okapi is an animal native to the Democratic Republic of Congo in Africa.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/dragon.jpg',
        name: 'The Blue Dragon',
        about: 'These little dragon-like creatures can be found in the Indian Pacific Oceans.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/wolf.jpg',
        name: 'The Maned Wolf',
        about: 'The maned wolf is often found in south, CW, and SE parts of Brazil.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/fossa.jpg',
        name: 'Fossa',
        about: 'A carnivorous animal located in Madagascar related to the Mongoose.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/shark.jpg',
        name: 'Goblin Shark',
        about: 'Last representative of sharks that lived about 125 million years ago.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/deer.jpg',
        name: 'Leaf Deer',
        about: 'The leaf deer is usually found in dense forests in the NW of Putao.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/spidercrab.jpg',
        name: 'Japanese Spider Crab',
        about: 'As the name suggestions, it inhabits the waters surrounding Japan.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/rabbit.jpg',
        name: 'Angora Rabbit',
        about: 'These rabbits originated in Turkey but managed to spread throughout Europe.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/axolotl.jpg',
        name: 'Axolotl',
        about: 'The "Mexican salamander" is often spotted in lakes around Mexico.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/liger.jpg',
        name: 'Liger',
        about: 'The liger is a real animal created by a lion and a tiger mating.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/panda.jpg',
        name: 'Red Panda',
        about: 'This cute, small panda lives in the eastern Himalayas and SW China.'
    }, {
        img: 'https://img.mobiscroll.com/demos/gridlayout/superbird.jpg',
        name: 'Superbird',
        about: 'Found in New Guinea, it is unsure how many of these birds there are.'
    }]

    settings: MbscScrollviewOptions = {
        layout: 'fixed',
        itemWidth: 134,
        snap: false
    };
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MbscModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }