Book Image

Learning Angular - Third Edition

By : Aristeidis Bampakos, Pablo Deeleman
Book Image

Learning Angular - Third Edition

By: Aristeidis Bampakos, Pablo Deeleman

Overview of this book

Angular, loved by millions of web developers around the world, continues to be one of the top JavaScript frameworks thanks to its regular updates and new features that enable fast, cross-platform, and secure frontend web development. With Angular, you can achieve high performance using the latest web techniques and extensive integration with web tools and integrated development environments (IDEs). Updated to Angular 10, this third edition of the Learning Angular book covers new features and modern web development practices to address the current frontend web development landscape. If you are new to Angular, this book will give you a comprehensive introduction to help you get you up and running in no time. You'll learn how to develop apps by harnessing the power of the Angular command-line interface (CLI), write unit tests, style your apps by following the Material Design guidelines, and finally deploy them to a hosting provider. The book is especially useful for beginners to get to grips with the bare bones of the framework needed to start developing Angular apps. By the end of this book, you’ll not only be able to create Angular applications with TypeScript from scratch but also enhance your coding skills with best practices.

Related Content you might be interested in

Current Title:

Small book image
Learning Angular - Third Edition
Aristeidis Bampakos | Pablo Deeleman
Sep, 2020 | 430 pages
Small book image
Angular Projects
Aristeidis Bampakos
Jul, 2021 | 344 pages
Small book image
Angular Projects
Aristeidis Bampakos
Jul, 2023 | 312 pages
Small book image
Building Modern Web Applications Using Angular 4
Shravan Kumar Kasagoni
May, 2017 | 226 pages
Table of Contents (19 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Reviews
1
Section 1: Getting Started with Angular
Section 1: Getting Started with Angular
Free Chapter
2
Chapter 1: Building Your First Angular App
Chapter 1: Building Your First Angular App
Technical requirements
It's just Angular – introducing semantic versioning
Introducing Angular
Setting up our workspace with Angular CLI
Hello Angular
IDEs and plugins
Summary
3
Chapter 2: Introduction to TypeScript
Chapter 2: Introduction to TypeScript
The history of TypeScript
Types in TypeScript
Functions, lambdas, and execution flow
Common TypeScript features
Classes, interfaces, and inheritance
Decorators in TypeScript
Advanced types
Modules
Summary
4
Section 2: Components – the Basic Building Blocks of an Angular App
Section 2: Components – the Basic Building Blocks of an Angular App
5
Chapter 3: Component Interaction and Inter-Communication
Chapter 3: Component Interaction and Inter-Communication
Technical requirements
Creating our first component
Configuring a component
Interacting with the template
Communicating with other components
Encapsulating CSS styling
Change detection strategies
Introducing the component lifecycle
Summary
6
Chapter 4: Enhance Components with Pipes and Directives
Chapter 4: Enhance Components with Pipes and Directives
Technical requirements
Introducing directives
Transforming elements using directives
Manipulating data with pipes
Building custom pipes
Building custom directives
Summary
7
Chapter 5: Structure an Angular App
Chapter 5: Structure an Angular App
Technical requirements
Organizing components into modules
Configuring the application
How dependency injection works in Angular
Summary
8
Chapter 6: Enrich Components with Asynchronous Data Services
Chapter 6: Enrich Components with Asynchronous Data Services
Technical requirements
Strategies for handling asynchronous information
Reactive functional programming in Angular
Creating a backend API-the Angular way
Communicating data over HTTP
Authenticating with HTTP
Handling HTTP errors
Unsubscribing from observables
Summary
9
Section 3: User Experience and Testability
Section 3: User Experience and Testability
10
Chapter 7: Navigate through Components with Routing
Chapter 7: Navigate through Components with Routing
Technical requirements
Introducing the Angular router
Creating an Angular app with routing
Separating our app into feature routing modules
Passing parameters to routes
Enhancing navigation with advanced features
Summary
11
Chapter 8: Orchestrating Validation Experiences in Forms
Chapter 8: Orchestrating Validation Experiences in Forms
Technical requirements
Introducing forms to web apps
Data binding with template-driven forms
Using reactive patterns in Angular forms
Validating controls in a reactive way
Modifying forms dynamically
Creating elegant reactive forms
Building a custom validator
Manipulating form data
Watching state changes and being reactive
Summary
12
Chapter 9: Introduction to Angular Material
Chapter 9: Introduction to Angular Material
Technical requirements
Introducing Material Design
Introducing Angular Material
Adding core UI controls
Introducing the Angular CDK
Designing layouts using flexbox
Summary
13
Chapter 10: Giving Motion to Components with Animations
Chapter 10: Giving Motion to Components with Animations
Technical requirements
Creating animations with plain vanilla CSS
Introducing Angular animations
Animating components programmatically
Summary
14
Chapter 11: Unit test an Angular App
Chapter 11: Unit test an Angular App
Technical requirements
Why do we need tests?
The anatomy of a unit test
Introducing unit tests in Angular
Testing components
Testing services
Testing pipes
Testing routing
Testing directives
Testing reactive forms
Summary
15
Section 4: Deployment and Practice
Section 4: Deployment and Practice
16
Chapter 12: Bringing an Angular App to Production
Chapter 12: Bringing an Angular App to Production
Technical requirements
Building an Angular app
Limiting the application bundle size
Optimizing the application bundle
Deploying an Angular app
Summary
17
Chapter 13: Develop a Real-World Angular App
Chapter 13: Develop a Real-World Angular App
Technical requirements
Scaffolding the application structure
Implementing core features
Adding heroes functionality
Integrating the missions module
Summary
18
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Modifying forms dynamically

So far, we have used the FormGroup and FormControl classes extensively throughout this chapter. However, we have not seen what FormArray is all about.

Suppose that we would like to enable the form of HeroComponent so that it allows us to add some powers to our hero. After all, superheroes are all about having special powers, aren't they? A hero can have more than one superpower, so let's modify the heroDetails form accordingly:

  1. Add a powers property to the heroDetails form group and set its value to an instance of the FormArray class. The constructor of the FormArray class accepts a list of FormControl instances as a parameter. For now, the list is empty since the hero does not have any powers initially:
    heroDetails = new FormGroup({
  name: new FormControl(''),
  realName: new FormControl(''),
  biometricData: new FormGroup({
  &...
Previous Section
End of Section 7
Next Section