Improve your coding skills from beginner to expert with the largest online Java e-learning platform

Angular Module 3: Building a real site

Become a full-stack developer building front-ends with Angular
  • This is part 3 of 5 modules which cover building Angular front ends for Java applications.
  • Become a full-stack developer by learning how to build responsive and reactive front-ends with Angular.
  • In this third module, we'll build a full responsive, functioning front-end application.


Basic Java knowlege is assumed. No prior Javascript / Typescript knowlege is needed. You should complete the earlier modules of this course before starting this module.

Contents - Approx. 5 hours


Having problems? check the errata for this course.

Using external resources

Introducing the case study

5m 39s

Using Bootstrap in our project

6m 2s

Installing Bootstrap using NPM

10m 57s

Exercise 1 - Referencing CSS and Javascript files

3m 0s


Preparing the application

4m 18s

Setting up basic routing

7m 5s

Creating a 404 page

5m 57s

Making links work with routing

7m 38s

Using a separate routing file

4m 37s

Models and views

The concepts of Data, Models and Views

3m 42s

Creating a model

5m 27s

Creating the data service

6m 52s

Binding data to a view and looping with *ngFor

5m 42s

Creating a sub-component view

9m 14s

Using routing for sub-components

10m 59s

Exercise 2 - Creating models, data and views

1m 41s

Exercise 2 - solution walkthrough

9m 22s

Using observables for data

Why we should use observables with data

7m 33s

Template forms

How template driven forms work

1m 10s

Setting up navigation to show a form

8m 39s

Creating a form

5m 3s

Binding a form

10m 24s

Saving the form data

4m 37s

Finishing the form

9m 3s

Template form validation

Dynamic classes applied to form elements

7m 24s

Validation messages and controlling the submit button

5m 2s

Custom validation rules

4m 31s

Exercise 3 - Implementing custom validation

2m 37s

Exercise 3 - Solution walkthrough

8m 50s

Reactive forms

Setting up navigation to show a form

8m 14s

Creating a reactive form

9m 52s

Setting and reading form control values

3m 50s

Programatically adding controls

11m 0s

Going further with reactive forms

Using the FormBuilder

6m 58s

Implementing validators

3m 11s

Completing the case study

Fixing a lifecycle bug

14m 32s

Implementing the delete functions

9m 55s

Displaying data with pipes

5m 25s

Exercise 4 - Displaying the calendar component

3m 44s

Exercise 4 - Solution walkthrough

10m 31s

Exercise 5 - Create the add, edit and delete functionality

1m 21s

Exercise 5 - Solution walktrough part 1

8m 33s

Exercise 5 - Solution walktrough part 2

13m 57s

Responding to the calendar click event

6m 44s

Let the Course Come to You

About Us Pricing Frequently Asked Questions Contact Privacy T&Cs Affiliates and Resellers
Facebook Twitter YouTube LinkedIn