Learn your way! Get started

Learning Angular, Part 7 of 7: Check-in and UI

with expert Bharath Thipireddy

Watch trailer

Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 9/15/2019
Level Advanced
Runtime 1h 30m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code N/A
Exams Included

Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

This course on Angular 6 wraps up the series by working on the client side of the flight check-in application. it will finish the User Interface, work on the Flight Details page, as well as all the forms involved. By the end of it you'll have a fully functioning single-page example application.


Experience with JavaScript, TypeScript and also of Java Sprint Boot for work on the Java backend.

Meet the expert

Bharath Thippireddy is an entrepreneur, software architect, public speaker, and trainer. Bharath is a Sun Certified Developer, Web Component Developer, Business Component Developer, and a Web Services Developer. While working for companies like Oracle, HP, TCS, Siemens, and NCR; Bharath has architected applications using Java, JEE, JavaScript, and SOA technologies. He loves learning new things both in technology and personal development and shares them on YouTube and his web site - Sharing is learning!. He has mentored students in classroom trainings, as well as in the corporate world, both in India as well as in USA. He has spoken on technical topics at several agile conferences. While in India he also voluntarily teaches interview and soft skills at Vivekananda Kendra.

Course outline

Checkin App

Create Flight Reservation (19:10)
  • Introduction (00:08)
  • Use Case (02:13)
  • Create the project (01:53)
  • Create Service (05:33)
  • Fetch Single Flight (02:59)
  • Save Reservation (03:06)
  • Configure Routing (03:08)
  • Summary (00:08)
Flight UI (16:21)
  • Introduction (00:08)
  • Implement Find Flights UI (03:50)
  • Bind the fields to model (00:47)
  • Handle Search Button Click (03:54)
  • Display Flight Details (02:56)
  • Bootstrap the application and run (01:47)
  • Application in action (02:48)
  • Summary (00:08)
Flight Details (23:38)
  • Introduction (00:08)
  • Add select button (02:57)
  • Fetch single flight details (02:19)
  • Render Flight Details (04:15)
  • Gather passenger details (03:28)
  • Collect card details (01:33)
  • Handle Reservation Save (03:07)
  • Show the Confirmation Screen (04:15)
  • Test End to end (01:24)
  • Summary (00:08)
Develop Flight Check in App (13:38)
  • Introduction (00:08)
  • Create the project (02:24)
  • Create the Service (02:40)
  • Implement the saveReservation method (02:06)
  • Implement routing (01:35)
  • Code the root component (02:39)
  • Create Start Checkin HTML (01:55)
  • Summary (00:08)
Forms and Details (17:17)
  • Introduction (00:08)
  • Handle OnClick (03:21)
  • Add Forms Module and assign reservation data (02:36)
  • Render Flight and passenger details (04:27)
  • Add noOfBags and confirm button (04:38)
  • Complete Checkin (01:57)
  • Summary (00:08)