In this session will learn what is ionic, ionic ecosystem, how to build a android & web apps with ionic & angular.

1. Presented By:Deeksha Maurya & Anirudh Singh Chauhan
Ionic & Angular

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Join the session 5 minutes prior to
the session start time. We start on
time and conclude on time!
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

3. Our Agenda
01 Introduction to Ionic
02 Ionic Platform & Ecosystem
03 What is Angular?
04 Core Building Components of Ionic
05 Demo

4. Introduction to Ionic
● Ionic Framework is an open-source UI toolkit that allows high-quality mobile and
desktop applications to be developed using web technologies.
● Ionic Architecture is based on the application’s interface or user experience.
● It is easy to learn, easy to integrate, or used standalone without a front frame
using a simple script including other libraries or frameworks

5. What are PWA?
PWA stands for Progressive Web Apps.PWA enhances web apps to look and feel
like native mobile apps. It try to optimise the following–
● Reliability
● Fast
● Engaging Apps

6. Ionic Platform
IONIC
Web Components Web Native Mobile
Ionic CLI +(Angular CLI,...)
Project Management,Build
Workflow
Capacitor
What you see on screen
Web app running as Native
Mobile app
Creation,live
reload,optimisation

7. Ionic Ecosystem
Your App Your Code
FrontEnd Framework
Ionic Framework
Capacitor or Cordova
Host platform you
are targeting
Stencil
A set of platform
adapting pre-styled
component
A tool that allows you
to generate the
standard web
components

8. What is Angular?
Angular is a development platform, built on TypeScript. As a
platform, Angular includes:
● A component-based framework for building scalable web
applications
● A collection of well-integrated libraries that cover a wide
variety of features, including routing, forms management,
client-server communication, and more
● A suite of developer tools to help you develop, build, test,
and update your code

9. Ionic Pros & Cons
Pros
● Single code base and Multi platform
● Development cost reasonable
● All components will be updated from
web directly
● In app interaction has look and feel
consistent
● Web Technology
Cons
● Run on web-View
● Base on plugins
● May require native related coding in
device related issues.

10. Ionic Core Building Blocks
UI Components
State Management
user location ,camera
features and more.
CSS & CSS Variables Custom or Built-in Router
Themes & Styles Navigation
Native Device Feature
Passing Data Around
<ion-card>,<ion-img> etc
Ionic CLI & publishing
Development and
Deployment

11. Installing and Start first Project
NodeJs has to be pre-installed (prefer the installation using nvm )
To install the ionic use
→ npm install -g ionic
After the installation use
→ionic start – to setup the project name and the type of webcomponent you will
be using as either blank, menu or any other type.
→ionic serve – to run the project on your local system

12. Demo

13. Demo

14. ● https://ionicframework.com/docs/api/grid
● https://www.javatpoint.com/ionic-alert
● https://ionicframework.com/docs/components
References

15. Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA