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

Angular Module 1: Creating a simple Angular App

Become a full-stack developer building front-ends with Angular
  • This is part 1 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 first module, we'll understand what Angular is, install Angular and set up a development environment, and build our first simple application.


Basic HTML and experience of web development with Spring is assumed. No prior Javascript / Typescript knowlege is needed.

Contents - Approx. 3 hours


Having problems? check the errata for this course.



5m 49s

What is Angular?

How angular sites differ from traditional web technologies

5m 11s

How angular can create a fast, responsive user experience

2m 51s

What an angular application looks like

4m 15s

Setting up the environment

The software needed to build with Angular

1m 41s

Installing Node.js

0m 53s

Installing the Angular CLI

2m 7s

Testing Angular with a hello world application

5m 31s

Running the hello world application

2m 21s

Configuring the Intellij Idea IDE

2m 45s

Installing and configuring Visual Studio Code

4m 2s

Introducing Angular architecture

An overview of our first example site

2m 45s

What is a component?

1m 50s

index.html and styles.css

2m 21s

Component selectors

2m 42s

The 4 component files

3m 40s

How angular can construct a page

4m 36s

Angular doesn't assemble the HTML

7m 17s

How to open a project from the sample files

4m 54s

Creating a component

Creating a new project

2m 19s

Running the project

2m 33s

Creating the component with the CLI tool

4m 33s

Editing the Component's HTML and making it appear

1m 54s

Exercise 1 - creating components

1m 57s

Exercise 1 - solution walkthrough

2m 21s

Template Expressions

An overview of the Component Class structure

7m 56s

Template expressions

3m 11s

Template expressions are dynamic

4m 17s

Simple event binding

Event binding

6m 25s

Exercise 2 - event binding

3m 0s

Exercise 2 - solution walkthrough

2m 12s

Component interaction - reading properties

Using the hidden HTML attribute

4m 44s

Accessing properties of a child component

6m 44s

The *ngIf structural directive

4m 33s

Component interaction - property binding

Setting up the scenario

4m 36s

Accessing properties from code

7m 13s

The @Input Decorator

6m 23s

Component interaction - event binding

Why we need custom events

5m 25s

Creating an event emitter

7m 28s

Triggering an event

2m 27s

Sending data with events

2m 38s

Revisiting *ngIf and hidden

5m 5s

Let the Course Come to You

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