Introduction to Angular

Course 2324

Duration: 4 days
Labs: Yes
Language: English
Level: Foundation

Learn Angular 18 and build responsive, enterprise-strength applications that run smoothly on desktop and mobile devices with this Angular training course. Angular provides a robust framework that facilitates the development of richly interactive applications running on multiple platforms. Gain experience building components, creating directives, modularizing applications, and building template-driven forms.

You'll be given remote access to a preconfigured virtual machine for you to perform your hands-on exercises, develop/test new code, and experiment with the same software used in your course. This course is compatible with older versions of Angular.

Angular Training Delivery Methods

In-Person
Online
Upskill your whole team by bringing Private Team Training to your facility.

Angular Training Course Information

In this Angular Training course, you will learn how to:

Create device-independent Angular applications.

Develop Components using TypeScript, Templates, and Decorators.

Consume REST services using Observables.

Modularize applications with the Component Router.

Capture and validate input with template-driven forms.

Leverage continued support with after-course one-on-one instructor coaching and computing sandbox.

Angular Training Course Prerequisites

Before attempting this course, attendees should have the following:

Experience developing web pages at the level of JavaScript Essentials for Web Development.
Knowledge of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).

Angular Training Course Outline

Module 1: Angular Introduction

Architectural overview

Simplifying the development of complex modern applications
The organization of an Angular app
Supporting multiple client devices
Configuring an Angular development environment
Bootstrapping your first Angular application

Getting started with TypeScript

Transpiling TypeScript to JavaScript
Building an app with TypeScript

Module 2: Constructing User Interface (UI) Components

Defining components

Structure of a component
Introducing the component hierarchy
Declaring metadata with the @Component decorator
Controlling HTML5 generation with Templates
Displaying repeating data with @for blocks
Conditional generation of DOM content

Debugging techniques and strategies

Interpreting framework error messages
Exploring the component hierarchy with Angular Dev Tools

Reducing code complexity with Dependency Injection (DI)

Principles of DI
Creating loosely coupled applications
Configuring providers and declaring Injectables
Satisfying dependencies with Provider metadata

Module 3: Testing Angular Components & Functionality

Structuring test strategies

Unit testing vs. integration testing
Working with mock Angular components
Asynchronous testing with Typescript arrow functions

Leveraging 3rd party tools

Defining tests with Jasmine
Automating tests with Angular CLI (command line interfaces) and Karma
Building and running a Cypress Integration test

Module 4: Adding Interactivity to Your Applications

Coordinating Component interaction

Passing data from parent to child with Input bindings
Listening for property changes with ngOnChanges
Binding a model to display with interpolation

Managing events

Detecting and responding to user interaction
Capturing browser events
Emitting custom events to trigger behavior

Module 5: Navigation and Data Transformation

Creating modular applications

Controlling application flow with the Component Router
Building Feature Modules
Parameterizing routes for dynamic navigation

Manipulating data with Pipes

Formatting dates for display
Chaining pipes to combine functionality
Filtering data with custom Pipes

Module 6: Building Interactive Forms

Displaying and capturing data

Developing forms with ngFormModel and FormBuilder
Differentiating Template Driven and Reactive forms
Two-way binding between input controls and data model

Validating form input

Leveraging HTML5 and custom validation
Providing user feedback from validators

Module 7: Managing Asynchronous Behavior

Keeping the App Responsive

Subscribing to Observables
Converting stream data types with the Observable map function
Optimizing change detection with immutability and onPush

Interacting with a Web APIs

Exchanging data with the HTTP (HyperText Transfer Protocol) object
Bidirectional communication using Web Sockets
Gracefully handling errors

Module 8: Extending Angular Capabilities

Creating a custom styling directive
Incorporating Angular Material Components
Customising Material themes
Improving layout with Sidenav and Cards

Get This Course 32 130 kr

4-day instructor-led training course
Learning Tree end-of-course exam included
One-on-one after-course instructor coaching
After-course computing sandbox

Include dates with afternoon start times

#2324

sep 23 - 26 15:00 - 22:30 CEST

Virtual
nov 18 - 21 10:00 - 17:30 CET

London or Virtual
nov 18 - 21 9:00 - 16:30 CET

Stockholm or Virtual
dec 2 - 5 15:00 - 22:30 CET

Herndon, VA or Virtual
mar 3 - 6 10:00 - 17:30 CET

London or Virtual
mar 3 - 6 9:00 - 16:30 CET

Stockholm or Virtual
mar 10 - 13 14:00 - 21:30 CET

Herndon, VA or Virtual
jun 2 - 5 10:00 - 17:30 CEST

London or Virtual
jun 2 - 5 9:00 - 16:30 CEST

Stockholm or Virtual

Scroll to view additional course dates

Bring this or any training to your organization
Full-scale program development
Delivered when, where, and how you want it
Blended learning models
Tailored content
Expert team coaching

#2324

Speak with a Learning Consultant

Inquiring For

Myself

Team/Group

First Name*

Last Name*

Email*

Phone Number*

Company*

Job Title

I'm interested In

* Required Fields

Speak with a Learning Consultant

Fill out the form below or call +46 (0)8 506 668 00

Need Help Finding The Right Training Solution?

Our training advisors are here for you.

Angular Training Course FAQs

Angular is an enterprise-strength tool for efficiently building browser and mobile-based user-interfaces.

Yes! While this course covers Angular 18, the material is still relevant for older versions. There are some areas where functionality has changed, and your instructor can identify these for you during the course. Angular best practice is to migrate to new features wherever possible.

Angular is a complete redesign of AngularJS. It builds on the lessons learned during the life of AngularJS. Specifically, Angular is component-oriented, while AngularJS is directive based. AngularJS was MVC-based, while Angular uses data-bound components. Angular is designed to support mobile devices AngularJS was not.

Yes! We know your busy work schedule may prevent you from getting to one of our classrooms, which is why we offer convenient online training to meet your needs wherever you want, including online training.