spoonacular_api_key

tmdb_api_key

mapbox_token

Visit https://account.mapbox.com to sign-up to Mapbox and generate your public token.

Gain insights into Ionic's UI toolkit for cross-platform apps using HTML, CSS, and TypeScript. Explore CLI, CapacitorJS, and Stencil, culminating in deploying real-world apps to multiple platforms.

ionic.tar.gz

ionic-blank

ionic-navigation

appy-mapper

audio-player

ebook-navigation

template-app

multi-line-list

sliding-list

ionic-theming

advanced-form

simple-form

template-form

movies-app

ionic-animations

apple-stores

stencil-gallery

capacitor-photo-app

cordova-photo-app

food-api

tabs-app

sidemenu-app

my-movies

Ionic is an open-source UI toolkit for building cross-platform applications using HTML, CSS, and TypeScript. Integrating with popular front-end frameworks like Angular, React, and Vue, Ionic empowers you to build rich user experiences that you can deploy on the web, mobile, or desktop.

This course is a comprehensive introduction to the core products and services of Ionic, emphasizing CLI, CapacitorJS, and Stencil Web Components. You’ll build on this foundation by exploring UI components, core features of Typescript, Angular routing/navigation, theming, data storage, asynchronous data handling, the rxJS library, and much more. Also, you'll be exposed to various Ionic plug-ins and components before concluding with 4 case studies of real-world application development.

By the end of this course, you'll be equipped to build cross-platform Ionic applications and submit them to the Apple App and Google Play stores, publish as Progressive Web Apps, or deliver via Electron desktop applications.

Mastering Mobile Application Development with Ionic

# Templating the home page
Now that the logic for the home page component is in place, we need to link the custom animation logic to the page template.

In the `ionic-animations/src/app/pages/home/home.page.html` file, we make the following amendments (highlighted):


<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Travel Gallery
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  
  <div class="background" [class.isActive]="isActive"></div>
  <ul class="gallery">
    <li *ngFor="let item of items" (click)="togglePanel(item)">
      <img src="{{ item.thumbnail }}" alt="{{ item.description }}">
      <p>{{ item.title }}</p>
    </li>
  </ul>

  <section class="panel">	
    <section class="inner">
      <span class="close-panel" (click)="togglePanel()">X Close</span>
      <h1>{{ panelTitle }}</h1>
      <img src="{{ panelImage }}">
      <p>{{ panelDesc }}</p>
    </section>
  </section>

</ion-content>

Here, we add the following elements:
* A `<div>` tag on **line 11** that will only be displayed when the value for the programmatically assigned class of `isActive` is `true`
* A list of thumbnail images dynamically generated from the items array defined in the component class
* Each list item implements a `click` event (**line 13**) which triggers the `togglePanel` method passing in the data from the current array iteration as a parameter
* Finally, we come to the content sidebar starting on **line 19**, which we assign the CSS class of `panel` to. This is the "hook" used by the `document.querySelector` DOM selector method within the `startAnimation` and `finishAnimation` methods of the `HomePage` component class


# The home page stylesheet
With the templating and logic in place, we now need to turn our attention to defining and implementing the necessary style rules for the `HomePage` class.

In the `ionic-animations/src/app/home/home.page.scss` file, we make the following amendments (highlighted):

Find out how to template and theme the ionic-animations application.

The Application UI

Introduction

The Ionic Ecosystem

Beginning Ionic Development

Decorators and Classes

Ionic Navigation

Templates

Theming Ionic Apps

Awesome Cordova Plugins

Capacitor

Working With Data

Progressive Web Apps

Animations

Stencil

Case Study: Working With APIs

Case Study: My Movies

Case Study: AppyMapper

Case Study: Ionic Jukebox

Refining Your Projects

Conclusion

Appendix

The Application UI

Templating the home page