IONIC with Angular and


Start your web app development journey,
with Ionic and Angular and be on your way to master
web application development

5 Days / 40 Hours / 22 Modules
+ 3 month coaching + 1 year eLearning access
IONIC with Angular
and TypeScript

Start your web app
development journey
with Ionic and Angular
and be on your way to
master web application

5 Days / 40 Hours / 22 Modules
+ 3 month coaching + 1 year eLearning access

Learn the fundamentals of Ionic and set your career path in one of the in-demand professions of the decade.

This course includes the fundamental Ionic techniques such as Functional programming, Data and Event Binding, Platform and SDK, and how to work with Emulators
This course will also show you how to use the Ionic CLI and feature a complete project, which allows you to practice the things learned throughout the course
By the end of this course, participants will be able to create Ionic projects from scratch all on their own
Key Learning Outcomes

Upon completion, participants should be able to demonstrate each of the following outcome:-

  • Develop a real-world usable application with Ionic
  • Demonstrate understanding of functional programming in JavaScript
  • Implement TypeScript elements such as decorators in their applications
  • Understand the central features of Angular
  • Implement proper navigation throughout the application
  • Understand how to use the Ionic CLI
  • Master the essential Ionic concepts
  • Be able to debug and test Ionic applications on their own
Subscribe to our newsletter – and be first to get all the updates on our upcoming programmes and industry insights.
We don’t share your information or spam you. Unsubscribe anytime.

    Course Modules Covered in the Ionic with Angular and Typescript program
    Day 1 - JavaScript, TYPESCRIPT, Introduction to Angular


    1. Introduction
    2. JavaScript Refresher
    3. Basic Language features
    4. Creating variables
    5. Control statements
    6. Functions and Functional programming
    7. Creating objects


    1. Introduction
    2. Understanding the case for TYPESCRIPT
    3. Types in TYPESCRIPT
    4. Functions, lambdas and execution flow
    5. Classes, Interfaces and Inheritance
    6. Decorators
    7. Organizing application with modules
    8. Design Patterns such as Decorator, Observable

    Introduction to Angular

    1. What is Angular 10
    2. Central Features of the Angular Framework
    3. Scope and Goal of Angular
    4. Angular 10 vs. AngularJS
    5. Installing and Using Angular 10
    6. Adding Angular 10 and Dependencies to Your App
    7. Building Blocks of and Angular 10 Application
    8. A Basic Angular 10 Application
    9. What is new in Angular 10
    10. Summary
    Day 2 - Building with Components, Data and Event Binding, Attribute Directive and Property Binding, Structural Directives, Template Driven Forms

    Building with Components

    1. Introducing the component tree
    2. Explaining Dependency Injection
    3. Component Starter
    4. Developing a Simple Feedback Component
    5. Feedback Component: Add HTML
    6. The HTML Component Template
    7. The templateUrl property
    8. Feedback Component: Add CSS Styling
    9. Feedback Component: Hook Up Input Fields and Button
    10. Feedback Component: Fields & Button in the Component Class
    11. Component Decorator Properties
    12. Component Lifecycle Hooks
    13. Using a Lifecycle Hook: OnInit
    14. Summary

    Data and Event Binding

    1. Binding Syntax
    2. One-Way Output Binding
    3. Binding Displayed Output Values
    4. Two-Way Binding of Input Fields
    5. Input Binding Examples
    6. Binding Events
    7. Binding Events Examples
    8. Setting Element Properties
    9. Setting Properties: Examples
    10. Summary

    Attribute Directive and Property Binding

    1. What are Directives
    2. Directive Types
    3. Apply Styles by Changing Classes
    4. Changing Classes – Example
    5. Applying Styles Directly
    6. Applying Styles Directly - Example
    7. Obsolete Directives and Property Binding
    8. Controlling Element Visibility
    9. Setting Image Source Dynamically
    10. Setting Hyperlink Source Dynamically
    11. Summary

    Structural Directives

    1. Adding and Removing Elements Dynamically
    2. Looping Using ngFor
    3. ngFor - Basic Syntax
    4. ngFor - Full Template Syntax
    5. Creating Tables with ngFor
    6. ngFor Local Variables
    7. ngFor Changes in the backing data source
    8. Swapping Elements with ngSwitch
    9. ngSwitch - Basic Syntax
    10. ngSwitch - Full Template Syntax
    11. Summary

    Template Driven Forms

    1. Note on Deprecated Forms APIs
    2. A Basic Angular Form
    3. Binding Input Fields
    4. Accessing the Form Object
    5. Binding the Form Submit Event
    6. The Submit Function
    7. Basic HTML5 Validation - "required" Attribute
    8. HTML5 vs. Angular Validation
    9. Angular Validators
    10. Angular Validation State
    11. Displaying Form Validation State
    12. Displaying Field Validation State
    13. Displaying Validation State Using Classes
    14. Disabling Submit when Form is Invalid
    15. Submitting the Form
    16. Binding to Object Variables
    17. Additional Input Types
    18. Checkboxes
    19. Select(drop down) Fields
    20. Rendering Options for Select (drop down)
    21. Date fields
    22. Radio Buttons
    23. Summary
    Day 3 - Services and Dependency Injection, HTTP Client, Ionic – Getting Started, Lists and other Components, Navigation

    Services and Dependency Injection

    1. What is a Service?
    2. Creating a Basic Service
    3. What is Dependency Injection?
    4. What Dependency Injection Looks Like
    5. Injecting Services
    6. Using a Service in a Component: Dedicated Instance
    7. Using a Service in a Component: Dedicated Instance - Example Code
    8. Using onInit to Initialize Component Data
    9. Using a Shared Service Instance
    10. Dependency Injection and @Host
    11. Dependency Injection and @Optional
    12. Summary

    HTTP Client

    1. The Angular HTTP Client
    2. Using The HTTP Client - Overview
    3. Setting up HTTP_PROVIDERS in the Root Component
    4. Importing Individual Providers into Services
    5. Service Using Http Client
    6. Service Imports
    7. The Observable object type
    8. What does an Observable Object do?
    9. Making a Basic HTTP GET Call
    10. Using the Service in a Component
    11. The PeopleService Client Component
    12. Client Component Code Review
    13. Importing Observable Methods
    14. Enhancing the Service with .map() and .catch()
    15. Using .map()
    16. Using .catch()
    17. Using toPromise()
    18. GET Request
    19. GET Request with Options
    20. POST Request
    21. POST Request Example
    22. Reading HTTP Response Headers
    23. Summary

    Ionic – Getting Started

    1. Installing the tools
    2. Installing required npm packages
    3. Understanding the Ionic CLI
    4. Platform and SDK – Android / iOS
    5. Starting a fresh project
    6. Running the project
    7. Viewing App with Browser
    8. Viewing on Android Emulator
    9. Viewing using IONIC View

    Lists and other Components

    1. Headers and Footers
    2. Content
    3. Lists and various types
    4. Buttons
    5. Modal
    6. Popovers


    1. Tabs
    2. Menus
    3. Side Menus
    4. Scroll
    5. Transitions
    6. History
    7. Add tabs to the Blank Project
    8. Mixing side menu and Tabs
    9. Multilevel Accordion Menu
    Day 4 - Dynamic Components, Input, HTTP Client, Ionic CLI, Finishing Up Our Ionic Application

    Dynamic Components

    1. Loading
    2. Spinner
    3. Popup
    4. Utility
    5. Action Sheets
    6. Alerts
    7. Create a Autoplay Slides
    8. Creating beautiful charts using ChartJS


    1. Checkboxes
    2. Radio Buttons
    3. Gestures and Events
    4. Swipe to Refresh
    5. Range & Select
    6. Calendar UI with Event Integration

    HTTP Client

    1. HTTP Client
    2. Connect with JSON API
    3. REST API Authentication
    4. Consuming REST API using Angular HttpClient
    5. Cordova Native Facebook Connect Plugin

    Ionic CLI

    1. Install
    2. Start
    3. Development & Testing
    4. Run and Emulate
    5. Icon & Splash Screen
    6. Uploading and Viewing
    7. SASS
    8. Gathering Environment Info

    Finishing Up Our Ionic Application

    1. Generating App Icons And Splash Screens
    2. Preparing For Submission
    3. Code Signing For IOS
    4. Code Signing For Android
    5. Additional Resources
    6. The Road Ahead
    7. Conclusion
    Day 5 - Exception Handling, Storage, Ionic Native, Debugging and Testing Ionic Applications

    Exception Handling

    1. Inside & Outside Errors
    2. Errors, Exceptions and Call Stack
    3. Catch them all
    4. Recognize them
    5. React to each of them
    6. Track the errors


    1. Ionic Storage
    2. Ionic SQLite Storage

    Ionic Native

    1. Device Information
    2. Camera
    3. Http
    4. In App Browser
    5. Android Permissions
    6. FlashLight

    Debugging and Testing Ionic Applications

    1. General Overview of Debugging
    2. Working With Emulators - IOS
    3. Working With Emulators - Android
    4. Testing On Device - Android
    5. Testing On Device - IOS
    6. Using Ionic View
    7. Proper Testing
    Our Training Methodology
    Your Instructor
    Thayanithy Jegan
    CTO & Co-Founder of Thulija Technologies,
    Certified Trainer and Consultant

    A seasoned technology professional with over 17 years of industry experience as a software developer, solutions architect and technology consultant for major organizations.
    Thayanithy Jegan has trained executives and developers in companies such as Maxis, IFCA, SWIFT, PSDC, DHL, Standard Chartered, Infineon Technologies, Siemens and Bank Negara to name a few to break into various technology stacks and as well as data science, big data, and artificial intelligence.
    He has led major projects with clients such as Suruhanjaya Syarikat Malaysia (SSM), MYCOID, Kementerian Kerja Raya, Ministry of Education (MOE), Universiti Malaya, Perfisio Solutions, Kementerian Perdagangan Antarabangsa dan Industri, amongst others. He has also served as a Consultant for MIMOS Berhad, a Research and Development organisation that functions as an advisor to the Malaysian Government on technologies, policies and strategies relating to IT.
    Program Key Highlights

    40 hours of Remote Online Learning
    80 Additional Self Learning Hours
    12 Live Hands-on Projects
    Certified by International Body
    Mentorship with Industry Experts
    Designed for Beginners & Professionals

    Get Professionally Certified

    Upon successfully completing this program, participants will be awarded the Professional Certification in Python Data Science by International Council for Technology Certifications (ICTC).
    This award is a validation to the efforts taken to master the domain expertise that will set you apart from your competition.
    Be a part of the global network of data science professionals and join the community across sectors.
    Get in Touch With Us Today!

    This training program is suitable for anyone who intends to enter into the field of Software Development. This program is being conducted in Malaysia and can be joined by anyone, anywhere in the world remotely.
    Program Fee

    RM 3,700.00

    One-time fee. One year access to course materials.

    Please fill in the form and a Program Advisor will reach out to you. You can also reach out to us at or +60123661502
    Contact us on Whatsapp for more enquiries