No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.
Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.
The author and publisher have made every effort to ensure that the information in this book was correct at press time. The author and publisher do not assume and hereby disclaim any liability to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from negligence, accident, or any other cause, or from any usage of the information herein.
Manning Publications Co.
20 baldwin Road
Shelter Island, NY 11964
ISBN 9781633436695
Printed in the United States of America
Development editor:
Production editor: Cover designer: Ian Hough Aleksandar Dragosavljević Marija Tudor
preface vi about this book vii about the author ix about the cover illustration x
Chapter 1 Getting Ready 1
PART 1: GETTING STARTED WITH ANGULAR 9
Chapter 2 Jumping right in 10
Chapter 3 Primer, Part 1 43
Chapter 4 Primer, Part 2 71
Chapter 5 SportsStore: a real application 92
Chapter 6 SportsStore: orders and checkout 121
Chapter 7 SportsStore: administration 152
Chapter 8 SportsStore: deployment 192
PART 2: ANGULAR IN DETAIL 214
Chapter 9 Understanding Angular projects and tools 215
Chapter 10 Angular reactivity and signals 250
Chapter 11 Using Data Bindings 275
Chapter 12 Using the built-in directives 299
Chapter 13 Using events and forms 329
Chapter 14 Creating attribute directives 369
Chapter 15 Creating structural directives 399
Chapter 16 Understanding components 438
Chapter 17 Using and creating pipes 465
Chapter 18 Using services 511
Chapter 19 Using and creating modules 540
PART 3: ADVANCED ANGULAR FEATURES 567
Chapter 20 Creating the example project 568
Chapter 21 Using the forms API, part 1 581
Chapter 22 Using the forms API, part 2 615
Chapter 23 Making HTTP Requests 647
Chapter 24 Routing and navigation: part 1 669
Chapter 25 Routing and navigation: part 2 701
Chapter 26 Routing and navigation: part 3 725
Chapter 27 Optimizing application delivery 748
Chapter 28 Working with component libraries 780
Chapter 29 Angular unit testing 807
index 832
preface
Thank you for purchasing Pro Angular 16. This is the 6th edition of this book, and the first to be published by Manning, and I am delighted that it is ready for the publication.
Angular has become one of the most popular web application frameworks by balancing innovation with stability and consistency. After a turbulent transition from the original AngularJS, the Angular of recent years has been focused on providing a robust set of features that have evolved gradually.
Angular 16 introduces signals, which alters the way that changes in data are detected. This book explains how signals work and demonstrates their use, setting the foundation for the next generation of Angular functionality that will be in Angular 17.
My goal is that you will become familiar with every important Angular feature and be equipped to choose the ones that best suit your projects. I appreciate feedback and you can raise issues and ask questions using liveBook Discussion forum or using the email address given in the book.
about this book
This book is for experienced web developers who are new to Angular. It doesn’t explain the basics of web applications or programming. I don’t describe server-side development in any detail—see my other books if you want to create the back-end services required to support Angular applications.
2.1 How this book is organized—a roadmap
This book is divided into three parts, each of which delves into a set of related topics.
In Part 1, titled "Getting started with Angular," you'll find all the information you need to prepare for the rest of the book. It includes primers and refreshers for critical technologies such as HTML and TypeScript, which is a superset of JavaScript used in Angular development. Additionally, you'll learn how to build your first Angular application and take a step-by-step approach to building a more realistic application called SportsStore.
Part 2 of the book, "Angular in detail," covers the building blocks provided by Angular for creating applications. You'll work through each of these in turn and learn about Angular's builtin functionality, as well as endless customization options.
Finally, in Part 3, "Advanced Angular features," you'll discover how to use advanced features to create more complex and scalable applications. You'll learn how to make asynchronous HTTP requests in an Angular application and explore other advanced features.
2.2 About the code
This book contains many examples of source code both in numbered listings and in line with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes code is also in bold to highlight code that has changed from previous steps in the chapter, such as when a new feature adds to an existing line of code.
In many cases, the original source code has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In rare cases, even this was not enough, and listings include line-continuation markers (➥). Additionally, comments in the source code have often been removed from the listings when the code is described in the text. Code annotations accompany many of the listings, highlighting important concepts.
You can get executable snippets of code from the liveBook (online) version of this book at https://livebook.manning.com/book/pro-angular-16. The complete code for the examples in the book is available for download from the Manning website at https://www.manning.com/books/ pro-angular-16, and from GitHub at https://github.com/manningbooks/pro-angular-16.
2.3 liveBook discussion forum
Purchase of Pro Angular 16 includes free access to liveBook, Manning’s online reading platform. Using liveBook’s exclusive discussion features, you can attach comments to the book globally or to specific sections or paragraphs. It’s a snap to make notes for yourself, ask and answer technical questions, and receive help from the author and other users. To access the forum, go to https://livebook.manning.com/book/pro-angular-16/discussion. You can also learn more about Manning's forums and the rules of conduct at https://livebook.manning.com/discussion Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray! The forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.
about the author
Adam Freeman is an experienced IT professional who started his career a programmer. He has held senior positions in a range of companies, most recently serving as Chief Technology Officer and Chief Operating Officer of a global bank. He has written 49 programming books, focusing mostly on web application development. Now retired, he spends his time writing and trying to make furniture.
about the cover illustration
The figure on the cover of Pro Angular 16, titled “Jésuite,” or “Jesuit,” is taken from a book by Louis Curmer published in 1841. Each illustration is finely drawn and colored by hand. In those days, it was easy to identify where people lived and what their trade or station in life was just by their dress. Manning celebrates the inventiveness and initiative of the computer business with book covers based on the rich diversity of regional culture centuries ago, brought back to life by pictures from collections such as this one.
1
Getting ready
This chapter covers
▪ Understanding the purpose of Angular
▪ Understanding the contents of this book.
▪ Reporting errors in this book.
▪ Contacting the author.
Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a clear design pattern that emphasizes creating applications that are:
▪ Extendable: It is easy to figure out how even a complex Angular app works once you understand the basics and that means you can easily enhance applications to create new and useful features for your users.
▪ Maintainable: Angular apps are easy to debug and fix, which means that long-term maintenance is simplified.
▪ Testable: Angular has good support for unit and end-to-end testing, meaning you can find and fix defects before your users do.
▪ Standardized: Angular builds on the innate capabilities of the web browser without getting in your way, allowing you to create standards-compliant web apps that take advantage of the latest HTML and features, as well as popular tools and frameworks.
Angular is an open-source JavaScript library that is sponsored and maintained by Google. It has been used in some of the largest and most complex web apps around. In this book, I will show you everything you need to know to get the benefits of Angular in your projects.
1.1 Understanding where Angular excels
Angular isn’t the solution to every problem, and it is important to know when you should use Angular and when you should seek an alternative. Angular delivers the kind of functionality that used to be available only to server-side developers but delivers it entirely in the browser. This means Angular has a lot of work to do each time an HTML document to which Angular has been applied is loaded the HTML elements have to be compiled, the data bindings have to be evaluated, components and other building blocks need to be executed, and so on.
This kind of work takes time to perform, and the amount of time depends on the complexity of the HTML document, on the associated JavaScript code, and critically on the quality of the browser and the processing capability of the device. You won’t notice any delay when using the latest browsers on a capable desktop machine, but old browsers on underpowered smartphones can slow down the initial setup of an Angular app.
The goal is to perform this setup as infrequently as possible and deliver as much of the app as possible to the user when it is performed. This means giving careful thought to the kind of web application you build. In broad terms, there are two kinds of web applications: round-trip and single-page.
1.1.1 Understanding round-trip and single-page applications
For a long time, web apps were developed to follow a round-trip model. The browser requests an initial HTML document from the server. User interactions such as clicking a link or submitting a form led the browser to request and receive a completely new HTML document. In this kind of application, the browser is essentially a rending engine for HTML content, and all of the application logic and data resides on the server. The browser makes a series of stateless HTTP requests that the server handles by generating HTML documents dynamically. Some current web development is still for round-trip applications, not least because they require little from the browser, which ensures the widest possible client support. But there are some drawbacks to round-trip applications: they make the user wait while the next HTML document is requested and loaded, they require a large server-side infrastructure to process all the requests and manage all the application state, and they require more bandwidth because each HTML document has to be self-contained (leading to a lot of the same content being included in each response from the server).
Single-page applications take a different approach. An initial HTML document is sent to the browser, along with JavaScript code, but user interactions lead to Ajax requests for small fragments of HTML or data inserted into the existing set of elements being displayed to the user. The initial HTML document is never reloaded or replaced, and the user can continue to interact with the existing HTML while the Ajax requests are being performed asynchronously, even if that just means seeing a “data loading” message. The single-page application model is perfect for Angular.
1.2 Comparing Angular to React
The main competitor to Angular is React. There are some low-level differences between them but both frameworks are excellent, they work in similar ways, and both can be used to create rich and fluid client-side applications.
The main difference between these frameworks is the developer experience. Angular requires you to use TypeScript to be effective, for example. If you are used to using a language like C# or Java, then TypeScript will be familiar, and it addresses some of the oddities of the JavaScript language. React doesn’t require TypeScript (although it is supported) and leans toward mixing HTML, JavaScript, and CSS content together in a single file, which not everyone likes.
My advice is simple: pick the framework that you like the look of the most and switch if you don’t get on with it. That may seem like an unscientific approach, but there isn’t a bad choice to make, and you will find that many of the core concepts carry over between frameworks even if you switch.
1.3 What do you need to know?
Before reading this book, you should be familiar with the basics of web develop ment, understand how HTML and CSS work, and have a working knowledge of JavaScript. If you are a little hazy on some of these details, I provide primers for the HTML and TypeScript/JavaScript I use in this book in chapters 3 and 4. You won’t find a comprehensive reference for HTML elements and CSS properties, though, because there just isn’t the space in a book about Angular to cover all of HTML.
1.4 What is the structure of this book?
This book is split into three parts, each of which covers a set of related topics.
1.4.1 Part 1: Getting started with Angular
Part 1 of this book provides the information you need to get ready for the rest of the book. It includes primers/refreshers for key technologies, including HTML and TypeScript, which is a superset of JavaScript used in Angular development. I also show you how to build your first Angular application and take you through the process of building a more realistic application, called SportsStore.
1.4.2 Part 2: Angular in detail
Part 2 of this book takes you through the building blocks provided by Angular for creating applications, working through each of them in turn. Angular includes a lot of built -in functionality and provides endless customization options.
1.4.3 Part 3: Advanced Angular features
Part 3 of this book explains how advanced features can be used to create more complex and scalable applications. I demonstrate how to make asynchronous HTTP requests in an Angular
application, how to use URL routing to navigate around an application, and how to use component libraries.
1.5 What doesn’t this book cover?
This book is for experienced web developers who are new to Angular. It doesn’t explain the basics of web applications or programming. I don’t describe server -side development in any detail see my other books if you want to create the back-end services required to support Angular applications.
And, as much as I like to dive into the detail in my books, not every Angular feature is useful in mainstream development, and I have to keep my books to a printable size. When I decide to omit a feature, it is because I don’t think it is important or because the same outcome can be achieved using a technique that I do cover.
1.6 What software do you need for Angular?
You will need a code editor and the tools described in chapter 2. Everything required for Angular development is available without charge and can be used on Windows, macOS, and Linux.
1.7 How do you set up the development environment?
Chapter 2 introduces Angular by creating a simple application, and, as part of that process, I tell you how to create a development environment for working with Angular.
1.8 What if you have problems following the examples ?
The first thing to do is to go back to the start of the chapter and begin again. Most problems are caused by missing a step or not fully following a listing. Pay close attention to the emphasis in code listings, which highlight the changes that are required.
Next, check the errata list, which is included in the book’s GitHub repository. Technical books are complex, and mistakes are inevitable, despite my best efforts and those of my editors. Check the errata list for the list of known errors and instructions to resolve them. Next, check the typos list, also in the GitHub repository, which contains corrections for issues that are unlikely to cause confusion or break the examples.
If you still have problems, then download the project for the chapter you are reading from the book’s GitHub repository, https://github.com/manningbooks/pro-angular-16, and compare it to your project. I created the code for the GitHub repository by working through each chapter, so you should have the same files with the same contents in your project.
If you still can’t get the examples working, then you can contact me at adam@adamfreeman.com for help. Please make it clear in your email which book you are reading and which chapter/example is causing the problem. Please remember that I get a lot of emails and that I may not respond immediately.
1.9 What if you find an error in the book?
You can report errors to me by email at adam@adam-freeman.com, although I ask that you first check the errata and typos lists, which you can find in the book’s GitHub repository at https://github.com/manningbooks/pro-angular-16, in case it has already been reported.
Errata bounty
Manning has agreed to give a free ebook to readers who are the first to report err ors that make it onto the GitHub errata list for this book. Readers can select any Manning ebook, not just my books.
This is an entirely discretionary and experimental program. Discretionary means that only I decide which errors are listed in the errata and which reader is the first to make a report. Experimental means Manning may decide not to give away any more books at any time for any reason. There are no appeals, and this is not a promise or a contract or any kind of formal offer or competition. Or, put another way, this is a nice and informal way to say thank you and to encourage readers to report mistakes that I have missed when writing this book.
1.10 Are there lots of examples?
There are loads of examples. The best way to learn Angular is by example, and I have packed as many of them as I can into this book. To maximize the number of examples in this book, I have adopted a simple convention to avoid listing the contents of files over and over. The first time I use a file in a chapter, I’ll list the comp lete contents, just as I have in listing 1.1. I include the name of the file in the listing’s header and the folder in which you should create it. When I make changes to the code, I show the altered statements in bold.
Listing 1.1 A complete example document
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';
This listing is taken from a later chapter Don’t worry about what it does; just be aware that this is a complete listing, which shows the entire contents of the file.
When I make a series of changes to the same file or when I make a small change to a large file, I show you just the elements that change, to create a partial listing. You can spot a partial listing because it starts and ends with an ellipsis ( ...), as shown in listing 1.2.
You can see that just a section of the file is shown and that I have highlighted several statements. This is how I draw your attention to the part of the listing that has changed or emphasize the part of an example that shows the feature or technique I am describing. In some cases, I need to make changes to different parts of the same file, in which case I omit some elements or statements for brevity, as shown in listing 1.3
Listing 1.3. Omitting statements for brevity
import { Component } from "@angular/core"; import { FormArray, FormControl, FormGroup, NgForm, Validators } from "@angular/forms";
import { Product } from "../model/product.model";
import { Model } from "../model/repository.model" import { Message } from "../messages/message.model" import { MessageService } from "../messages/message.service"; import { MODES, SharedState } from "./sharedState.service"; import { toObservable } from "@angular/core/rxjs-interop";
This convention lets me pack in more examples, but it does mean it can be hard to locate a specific technique. To this end, the chapters in which I describe Angular features i n parts 2 and 3 begin with a summary table that describes the techniques contained in the chapter and the listings that demonstrate how they are used.
1.11 Where can you get the example code?
You can download the example projects for all the chapters in this book from https://github.com/manningbooks/pro-angular-16.
1.12 How do you contact the author?
You can email me at adam@adam-freeman.com. It has been a few years since I first published an email address in my books. I wasn’t entirely sure that it was a good idea, but I am glad that I did it. I have received emails from around the world, from readers working or studyi ng in every industry, and for the most part, anyway the emails are positive, polite, and a pleasure to receive.
I try to reply promptly, but I get many emails and sometimes I get a backlog, especially when I have my head down trying to finish writing a book. I always try to help readers who are stuck with an example in the book, although I ask that you follow the steps described earlier in this chapter before contacting me.
While I welcome reader emails, there are some common questions for which the answer s will always be “no.” I am afraid that I won’t write the code for your new startup, help you with your college assignment, get involved in your development team’s design dispute, or teach you how to program.
1.13 What if you really enjoyed this book?
Please email me at adam@adam-freeman.com and let me know. It is always a delight to hear from a happy reader, and I appreciate the time it takes to send those emails. Writing these books can be difficult, and those emails provide essential motivation to persist at an activity that can sometimes feel impossible.
1.14 What if this book has made you angry?
You can still email me at adam@adam-freeman.com, and I will still try to help you. Bear in mind that I can help only if you explain what the problem is and what you would like me to do about it. You should understand that sometimes the only outcome is to accept I am not the writer for you and that we will have closure only when you return this book and select another.
I’ll give careful thought to whatever has upset you, but after 25 years of writing books, I have come to understand that not everyone enjoys reading the books I like to write.
1.15 Summary
In this chapter, I briefly introduced Angular and outlined the content and structure of this book.
▪ Angular is a JavaScript framework used to create dynamic web applications.
▪ Angular applications are written in TypeScript, which is a superset of the JavaScript language.
▪ Angular is comparable to other web application frameworks, such as React. The best way to learn Angular development is by example, so in the next chapter, I jump right in and show you how to set up your development environment and use it to create your first Angular application.
Part I
2
Jumping right in
This chapter covers
▪ Installing the tools and packages required for Angular development
▪ Creating an Angular project
▪ Using Angular features to dynamically create HTML
▪ Displaying data in the HTML content
▪ Responding to events
▪ Styling the HTML content using the Angular Material package
The best way to get started with Angular is to dive in and create a web application. In this chapter, I show you how to set up your development environment and take you through the process of creating a basic application. In chapters 5–8, I show you how to create a more complex and realistic Angular application, but for now, a simple example will suffice to demonstrate the major components of an Angular app and set the scene for the other chapters in this part of the book.
Don’t worry if you don’t follow everything that happens in this chapter. Angular has a steep learning curve, so the purpose of this chapter is just to introduce the basic flow of Angular development and give you a sense of how things fit together. It won’t all make sense right now, but by the time you have finished reading this book, you will understand every step I take in this chapter and much more besides.
2.1 Getting ready
There is some preparation required for Angular development. In the sections that follow, I explain how to get set up and ready to create your first project. There is wide support for Angular in popular development tools, and you can pick your favorites.
2.1.1 Installing Node.js
Node.js is a JavaScript runtime for server-side applications and is used by most web application frameworks, including Angular.
The version of Node.js I have used in this book is 18.14.0, which is the current Long-Term Support (LTS) release at the time of writing. There may be a later version available by the time you read this, but you should stick to the 18.14.0 release for the examples in this book. A complete set of 18.14.0 releases, with installers for Windows and macOS and binary packages for other platforms, is available at https://nodejs.org/dist/v18.14.0
Download and run the installer and ensure that the “npm package manager” option and the two Add to PATH options are selected, as shown in figure 2-1.
When the installation is complete, open a new command prompt and run the command shown in listing 2.1.
Figure 2.1. Installing Node.js
Listing 2.1. Running Node.js
node -v
If the installation has gone as it should, then you will see the following version number displayed: v18.14.0
The Node.js installer includes the Node Package Manager (NPM), which is used to manage the packages in a project. Run the command shown in listing 2.2 to ensure that NPM is working.
Listing 2.2. Running NPM
npm -v
If everything is working as it should, then you will see the following version number: 8.1.4
2.1.2
Installing an editor
Angular development can be done with any programmer’s editor, from which there is an endless number to choose. Some editors have enhanced support for working with An gular, including highlighting key terms and good tool integration.
When choosing an editor, one of the most important considerations is the ability to filter the content of the project so that you can focus on a subset of the file s. There can be a lot of files in an Angular project, and many have similar names, so being able to find and edit the right file is essential. Editors make this possible in different ways, either by presenting a list of the files that are open for editing or by providing the ability to exclude files with specific extensions.
The examples in this book do not rely on any specific editor, and all the tools I use are run from the command line. If you don’t already have a preferred editor for web application development, then I recommend using Visual Studio Code, which is provided without charge by Microsoft and has excellent support for Angular development. You can download Visual Studio Code from https://code.visualstudio.com.
2.1.3
Installing the Angular development package
The Angular team provides a complete set of command-line tools that simplify Angular development. These tools are distributed in a package named @angular/cli. Run the command shown in listing 2.3 to install the Angular development tools.
Listing 2.3 Installing the Angular Development Package
npm install global @angular/cli@16.0.0
Notice that there are two hyphens before the global argument. If you are using Linux or macOS, you may need to use sudo, as shown in listing 2.4.
Listing 2.4. Using sudo to Install the Angular Development Package
sudo npm install global @angular/cli@16.0.0
2.1.4 Choosing a browser
The final choice to make is the browser that you will use to check your work during development. All the current-generation browsers have good developer support and work well with Angular. I have used Google Chrome throughout this book, and this is the browser I recommend you use as well.
2.2 Creating an Angular project
Angular development is done as part of a project, which contains all of the files required to build and execute an application, along with configuration files and static content (like HTML and CSS files). To create a new project, open a command prompt, navigate to a convenient location, and run the command shown in listing 2.5. Pay close attention to the use of double and single hyphens when typing this command.
Listing 2.5. Creating a new angular project
ng new todo routing false style css skip-git skip-tests
The ng command is part of the @angular-cli package, and ng new sets up a new project. The arguments configure the project, selecting options that are suitable for a first project (the configuration options are described in part 2). The process of creating a new project can take some time because there are a large number of other packages required, all of which must be downloaded the first time you run the ng new command.
TIP You can download the example project for this chapter and for all the other chapters in this book from https://github.com/manningbooks/pro-angular-16. See chapter 1 for how to get help if you have problems running the examples.
2.2.1 Opening the project for editing
Once the ng new command has finished, use your preferred code editor to open the todo folder that has been created and that contains the new project. The todo folder contains configuration files for the tools that are used in Angular development (described in part 2), but it is the src/app folder that contains the application’s code and content and is the folder in which most development is done.
Figure 2.2 shows the initial content of the project folder as it appears in Visual Studio Code and highlights the src/app folder.
2.2. The initial contents of an Angular project
You may see a slightly different view with other editors, some of which hide files and folders that are not often used directly during development, such as the node_modules folder, which contains the packages on which the Angular development tools rely.
2.2.2 Starting the Angular development tools
The final part of the setup process is to start the development tools, which will compile the placeholder content added to the project by the ng new command. To start the Angular
Figure
development tools, use a command prompt to run the command shown in listing 2 6 in the todo folder.
Listing 2.6. Starting the Angular development tools
ng serve
This command starts the Angular development tools, which include a compiler and a web server that is used to test the Angular application in the browser. The development tools go through an initial startup process, which can take a moment to complete. During the startup process, you will see messages like these displayed by the ng serve command: Browser application bundle generation complete.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Compiled successfully.
Don’t worry if you don’t see the same output, just as long as you see the “compiled successfully” message at the end of the process. The integrated web server listens for requests on port 4200, so open a new browser window and request http://localhost:4200, which will show the placeholder content shown in figure 2.3.
Figure 2.3. The placeholder content in a new Angular project
2.3 Adding features to the application
Now that the development tools are running, I am going to work through the process of creating a simple Angular application that will manage a to-do list. The user will be able to see the list of to-do items, check off items that are complete, and create new items. To keep the application simple, I assume that there is only one user and that I don’t have to worry about preserving the state of the data in the application, which means that changes to the to -do list will be lost if the browser window is closed or reloaded. (Later examples, including the SportsStore application developed in chapters 5–8, demonstrate persistent data storage.)
2.3.1
Creating a data model
The starting point for most applications is the data model, which describes the domain on which the application operates. Data models can be large and complex, but for my to -do application, I need to describe only two things: a to -do item and a list of those items. Angular applications are written in TypeScript, which is a superset of JavaScript. I introduce TypeScript in chapters 3 and 4, but its main advantage is that it supports static data types, which makes JavaScript development more familiar to C# and Java developers. (JavaScript has a prototype-based type system that many developers find confusing.) The ng new command includes the packages required to compile TypeScript code into pure JavaScript that can be executed by browsers.
To start the data model for the application, add a file called todoItem.ts to the todo/src/app folder with the contents shown in listing 2.7. (TypeScript files have the .ts extension.)
Listing 2.7. The contents of the todoItem.ts file in the src/app folder
export class TodoItem {
constructor(public task: string, public complete: boolean = false) { // no statements required } }
The language features used in listing 2.7 are a mix of standard JavaScript features and extra features that TypeScript provides. When the code is compiled, the TypeScript features are removed, and the result is JavaScript code that can be executed by bro wsers.
The export, class, and constructor keywords, for example, are standard JavaScript. Not all browsers support these features, so the build process for Angular applications can translate this type of feature into code that older browsers can understand , as I explain in part 2
The export keyword relates to JavaScript modules. When using modules, each TypeScript or JavaScript file is considered to be a self-contained unit of functionality, and the export keyword is used to identify data or types that you want to use elsewhere in the application. JavaScript modules are used to manage the dependencies that arise between files in a project. See chapter 4 for details of how JavaScript modules are used.
The class keyword declares a class, and the constructor keyword denotes a class constructor. Unlike other languages, such as C#, JavaScript doesn’t use the name of the class to denote the constructor.
TIP Don’t worry if you are not familiar with these JavaScript/TypeScript features. Chapters 3 and 4 provide a primer for the JavaScript and TypeScript features that are most used in Angular development.
Other features in listing 2.7 are provided by TypeScript. One of the most jarring features when you first start using TypeScript is its concise constructor feature, although you will quickly come to rely on it. The TodoItem class defines a constructor that receives two parameters, named task and complete. The values of these parameters are assigned to public properties of the same names. If no value is provided fo r the complete parameter, then a default value of false will be used:
constructor(public task: string, public complete: boolean = false) { ...
The concise constructor avoids a block of boilerplate code that would otherwise be required to define properties and assign them values that are received by the constructor.
The concise constructor syntax is helpful, but the headline TypeScript feature is static types. Both of the constructor parameters in listing 2.7 are annotated with a data type:
constructor(public task: string, public complete: boolean = false) {
In standard JavaScript, values have types and can be assigned to any variable, which is a source of confusion to programmers who are used to variab les that are defined to hold a specific data type. TypeScript adopts a more conventional approach to data types , and the TypeScript compiler will report an error if incompatible types are used. This may seem obvious if you are coming to Angular development from C# or Java, but it isn’t the way that JavaScript usually works.
CREATING THE TO-DO LIST CLASS
To create a class that represents a list of to-do items, add a file named todoList.ts to the src/app folder with the contents shown in listing 2.8.
Listing 2.8. The contents of the todoList.ts file in the src/app folder import { TodoItem } from "./todoItem"; export class TodoList {
The import keyword declares a dependency on the TodoItem class. The TodoList class defines a constructor that receives the initial set of to-do items. I don’t want to give unrestricted access to the array of TodoItem objects, so I have defined a property named items that returns a read-only array, which is done using the readonly keyword. The TypeScript compiler will generate an error for any statement that attempts to modify the contents of the array, and if you are using an editor that has good TypeScript support, such as Visual Studio Code, then the autocomplete features of the editor won’t present me thods and properties that would trigger a compiler error.
2.3.2 Displaying data to the user
I need a way to display the data values in the model to the user. In Angular, this is done using a template, which is a fragment of HTML that contains expressions that are evaluated by Angular and that inserts the results into the content that is sent to the browser. When the project was created, the ng new command added a template file named app.component.html to the src/app folder. Open this file for editing and replace the contents with those shown in listing 2.9.
Listing 2.9. Replacing the contents of the app.component.html file in the src/app folder <h3>
{{ username }}'s To Do List <h6>{{ itemCount }} Items</h6> </h3>
I’ll add features to the template shortly, but this is enough to get started. Displaying data in a template is done using double braces {{ and }} and Angular evaluates whatever you put between the double braces to get the value to display.
The {{ and }} characters are an example of a data binding, which means they create a relationship between the template and a data value. Data bindings are an important Angular feature, and you will see more of them in this chapter as I add features to the example application (and I describe them in detail in part 2 of this book). In this case, the data bindings tell Angular to get the value of the username and itemCount properties and insert them into the content of the h3 and h6 elements.
As soon as you save the file, the Angular development tools will try to build the project. The compiler will generate the following errors:
Error: src/app/app.component.html:2:6 - error TS2339: Property 'username' does not exist on type 'AppComponent'.
2 {{ username }}'s To Do List
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
Error occurs in the template of component AppComponent.
Error: src/app/app.component.html:3:10 - error TS2339: Property 'itemCount' does not exist on type 'AppComponent'.
3 <h6>{{ itemCount }} Items</h6>
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
Error occurs in the template of component AppComponent. These errors occur because the expressions within the data bindings rely on properties that don’t exist. I’ll fix this problem in the next section, but these errors show an important Angular characteristic, which is that templates are included in the compilation process and that any errors in the template are handled just like errors in regular code files.
2.3.3 Updating the component
An Angular component is responsible for managing a template and providing it with the data and logic it needs. If that seems like a broad statement, it is because components are the Angular feature that do most of the heavy lifting. As a consequence, they can be used for all sorts of tasks.
In this case, I need a component to act as a bridge between the data model classes and the template so that I can create an instance of the TodoList class, populate it with some sample TodoItem objects, and, in doing so, provide the template with the username and itemCount properties it needs.
Another random document with no related content on Scribd:
The Project Gutenberg eBook of Economic effects of the world war upon women and children in Great Britain
This ebook is for the use of anyone anywhere in the United States and most other parts of the world at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this ebook or online at www.gutenberg.org. If you are not located in the United States, you will have to check the laws of the country where you are located before using this eBook.
Title: Economic effects of the world war upon women and children in Great Britain
Author: Irene Osgood Andrews Margaret A. Hobbs
Release date: January 6, 2024 [eBook #72639]
Language: English
Original publication: New York: Oxford University Press, 1921
Credits: The Online Distributed Proofreading Team at https://www.pgdp.net (This book was produced from images made available by the HathiTrust Digital Library.)
Carnegie Endowment for International Peace
DIVISION OF ECONOMICS AND HISTORY
JOHN BATES CLARK, DIRECTOR
PRELIMINARY ECONOMIC STUDIES OF THE WAR
EDITED
BY
DAVID KINLEY
President of the University of Illinois Member of Committee of Research of the Endowment
No. 4
ECONOMIC EFFECTS OF THE WORLD WAR UPON WOMEN AND CHILDREN IN GREAT BRITAIN
BY IRENE OSGOOD ANDREWS
Assistant Secretary of the American Association for Labor Legislation AND
MARGARETT
A. HOBBS
SECOND (REVISED) EDITION
NEW YORK
OXFORD UNIVERSITY PRESS
AMERICAN BRANCH: 35 WEST 32ⁿᵈ STREET
London, Toronto, Melbourne and Bombay
1921
FIRST EDITION
FEBRUARY, 1918
SECOND (REVISED) EDITION MAY, 1921
COPYRIGHT 1921 BY THE CARNEGIE ENDOWMENT FOR INTERNATIONAL PEACE
2 J P
W , D. C.
P B S. A
W , D. C.
Preliminary Economic Studies of the War
EDITED BY DAVID KINLEY
President of the University of Illinois Member of Committee of Research of the Endowment
1. E E E W C . By Adam Shortt, formerly Commissioner of the Canadian Civil Service, now Chairman, Board of Historical Publications, Canada.
2. E E E W F , C I C By L. S. Rowe, Professor of Political Science, University of Pennsylvania.
3. W A R U S G B . By Frank H. Dixon, Professor of Economics, Dartmouth College, and Julius H. Parmelee, Statistician, Bureau of Railway Economics.
4. E E W W W C G B . By Irene Osgood Andrews, Assistant Secretary of the American Association for Labor Legislation.
5. D C P W . By Ernest L. Bogart, Professor of Economics, University of Illinois.
6. E W I S R S I P By William F. Gephart, Professor of Economics, Washington University, St. Louis.
7. T F H G B , 1914-1918. By Frank L. McVey, President, University of Kentucky.
8. B W A . By John A. Fairlie, Professor of Political Science, University of Illinois.
9. I G W S . By J. Russell Smith, Professor of Industry, University of Pennsylvania.
10. W T By Thomas Nixon Carver, Professor of Political Economy,
Harvard University.
11. E G W A U S G B
By Benjamin H. Hibbard, Professor of Agricultural Economics, University of Wisconsin.
12. D S S —P T By Edward T. Devine, Professor of Social Economy, Columbia University.
13. G C L B G B U S .
By Thomas Nixon Carver, Professor of Political Economy, Harvard University
14. B L C L W .
By Matthew B. Hammond, Professor of Economics, Ohio State University
15. E W M , C B F U S . By B. M. Anderson, Jr., Ph.D.
16. N M W .
By Emmett J. Scott, Secretary-Treasurer, Howard University, Washington, D. C.
17. E E W F , C I P .
By L. S. Rowe, Professor of Political Science, University of Pennsylvania.
18. G C O I G B U S W W .
By Charles Whiting Baker, C. E., Consulting Engineer
19. P P C G B U S W W .
By Simon Litman, Professor of Economics, University of Illinois.
[1] 20. C M R
By E. M. Kayden.
[2] 21. T G S A : A C E H W W
By C. H. Haring, Associate Professor of History, Yale University.
[3] 22. E W P , C P S W
By Edith Abbott, Lecturer in Sociology, University of Chicago.
[4] 23. (Abandoned.)
24. D I C G W W . By Ernest L. Bogart, Professor of Economics, University of Illinois. (Revised edition of Study No. 5.)
25. G W C . By John F. Crowell,
THE CARNEGIE ENDOWMENT FOR INTERNATIONAL PEACE
2 JACKSON PLACE, WASHINGTON, D. C.
EDITOR’S PREFACE
The following work on the “Economic Effects of the War upon Women and Children in Great Britain,” by Mrs. Irene Osgood Andrews, Assistant Secretary of the American Association for Labor Legislation, is the fourth in the series of preliminary war studies undertaken by the Endowment. Mrs. Andrews’ monograph is a sympathetic study of the situation by one who has long been familiar with working conditions of women and children in this country and abroad and the methods undertaken for their improvement. The author points out the difficulties and evil results of the hasty influx of women and children into industrial fields vacated by men who had gone into the army, but reaches the conclusion that on the whole the permanent effects are likely to be good. Such a conclusion by an author whose sympathies with laboring women and children are deep and whose outlook is broad is hopeful and cheering.
In the opinion of the editor, Mrs. Andrews has done her country a service in preparing this monograph, for her recital of the difficulties and evils of the British readjustment will enable our people to meet the same crisis when it comes upon us, as it surely will if the war continues, in the light of the experience of our Allies. If we go about the matter intelligently in the light of this study, we should be able to avoid some of the difficulties and evils of British experiences in this matter and open the way for a larger industrial life to women, while maintaining and indeed even improving, as we should, the conditions under which they are called upon to work and live.
D K , Editor
AUTHOR’S PREFACE TO REVISED EDITION
Following the publication of the first edition, opportunity came in 1919 to visit again both England and France and to secure first hand information concerning the effects of the war upon the economic position of women. As a member of the commission sent by the Young Women’s Christian Association to study the industrial outlook for women and children, there was occasion to interview many representative people in this field and to collect a large amount of recently published material bearing upon the subject.
The world conflict brought to women, in those countries where the industrial system was kept intact, an extraordinary invitation to active employment outside the home and in new occupations. In England and France millions of women were dislodged from their accustomed tasks and thrown into novel positions in industry, in trade and commerce and even in the professions. Many thousands have remained in the new occupations, and the vast majority will never be content to go back to their former places on the old terms.
The remarkable physical endurance of the women doing war work has been very generally recognized. This endurance has been attributed partly to the zeal of the women, but more particularly to higher wages, which enabled them to secure better food, clothing and lodging. Comfort from increased income was supplemented by canteens, welfare work and greater consideration in general for the health of wage earners.
Will woman’s improved income level be permanent? Careful analysis shows that during the war, despite government pledges, women did not receive equal treatment with men in respect to wages. Moreover, while money wages in many cases were greatly increased, seldom did they keep pace with the advancing cost of living. Furthermore, it became doubtful whether women were to be allowed to retain the more attractive positions if these were desired by men.
No one, since the war experience, doubts the skill and adaptability of women in performing a great number of tasks formerly considered “men’s work.” With the extensive standardization which British industry has adopted many more places can be successfully filled by women. Equal opportunity to secure positions, as well as equality of payment, appeals therefore to many thousands of women as merely a matter of justice. But such a new status for women, it is recognized, calls for more scientific methods in fixing wages. The old basis of sex, family obligation, tradition as to “men’s work” and “women’s work,” must be abandoned. Instead, some definite rate for a specified occupation, and where possible specified qualifications as to ability for such work, must be adopted. Moreover, it is increasingly recognized that the national welfare demands that money wages must be at least equal to the cost of living.
Such a program would place men and women more nearly on a strictly competitive basis, with the awards given to the most efficient. It would practically eliminate the constant “undercutting” now taking place and would introduce a more scientific element into the present chaotic wage market.
The insistent need for a thoroughgoing revision as to methods of determining wage rates is recognized by Mrs. Sidney Webb in her minority statement in the Report of the War Cabinet Committee on Women in Industry, 1919. Mrs. Webb recommends for immediate adoption four main principles. (1) The establishment of a national minimum rate of wage; (2) the determination of a standard or occupational rate above the national minimum; (3) the adjustment of money wages to the cost of living; and (4) wherever possible the requirement of efficiency qualifications. As to children and “young persons” in Great Britain the Fisher Education Act already has indicated a greater emphasis on training and there is hope that their employment will eventually become either subordinate to or, better still, a part of education.
The scarcity of labor now presents an appalling problem in several countries and one of the outstanding effects of the loss of human life in all war stricken nations is renewed interest in the protection of motherhood. In these countries measures are being
adopted to conserve the lives of mothers and babies. Better medical and nursing care are recognized as essential, cash maternity benefits are increasing, maternity centers are being greatly extended and in England the endowment of motherhood is proposed.
This revised monograph, while attempting to present a fairly complete history of the industrial experience of women and children during and immediately following the war, is still necessarily tentative. Some years must elapse before it will be possible to measure the full effects of the world war upon the economic condition of women and children. This revision is brought out, however, at this time to supply a demand which quickly exhausted the first edition, and in the hope that it will be of service to those interested in the progress of women industrial workers.
I O A .
New York City, April, 1920.
CHAPTER I
Introductory Summary
Under the conditions of modern warfare the industrial army in factory, field and mine is as essential to national success as the soldiers in the trenches. It is estimated that from three to five workers are necessary to keep a single soldier at the front completely equipped. Accordingly, it is not surprising that Great Britain during four years of warfare saw what was little short of an industrial revolution in order to keep up the supply of labor, to heighten the workers’ efficiency, and to secure their cooperation. No changes were more interesting and important than those which concerned working women and children.
Increase in Numbers
Upon women and children fell much of the great burden of keeping trade and industry active and of supplying war demands when several millions of men were taken away for military service. “Without the work of the women the war could not have gone on,” said representatives of the British Ministry of Munitions while in New York in November, 1917. Before the increased demand was felt, however, the dislocation of industry during the first few months of war brought far more suffering to women workers than to men. In September, 1914, over 40 per cent of the women were out of work or on short time. The “luxury” trades, which employed a large proportion of women, were most severely affected, and the women could not relieve the situation by enlisting as the men did. The prewar level of employment was not reached until April, 1915. Between that date and July, 1918, the number of females gainfully occupied increased by 1,659,000 over the number at work in July, 1914.
It is more difficult to ascertain the exact increase in the number of working children and young persons under eighteen, but apparently more children left school for work directly at the end of the compulsory education period and more were illegally employed. Official reports show an increase from 1,936,000 in July, 1914, to 2,278,000 in January, 1918, or 17.6 per cent, in the number of boys and girls under eighteen who were gainfully employed. In addition, in August, 1917, Mr. Herbert Fisher, president of the Board of Education, admitted in the House of Commons that in the past three years some 600,000 children under fourteen had been “put prematurely to work” through the relaxation of child labor and compulsory school laws. But in October of the same year the Board of Trade stated that 90,000 boys had left school for work during the war. The earlier exemptions, statistics of which have been published, were almost entirely for agriculture, but judging from Mr. Fisher’s statement a considerable number of exemptions were made for mining and munitions work during the third year of the war.
One of the most notable effects of the war was the number of occupations which women entered for the first time, until, in the winter of 1916-17, it could be said that “there are practically no trades in which some process of substitution [of women for men] has not taken place.” According to official figures, 1,816,000 females were taking men’s places in April, 1918.
During the first year of the war, however, women took men’s places for the most part in transportation, in retail trade and in clerical work rather than in manufacturing. In factory work, while some women were found to be undertaking processes slightly above their former level of skill in establishments where they had long been employed, the most general change was a transfer from slack industries to fill the expanding demands of firms making war equipment. There women were employed in the same kinds of work they had carried on before the war. The rush into the munitions industry, where women engaged in both “men’s” and “women’s” work, was one of the most important features of the second year of war. While a few additional women had begun to be taken on very early in the war, the increases were not large until the autumn of
1915 and early winter of 1916 During 1915-1916 also a decline was first noticed in the number of women in domestic service, in the printing trades, and in such typical “women’s trades” as confectionery and laundry work.
In the third year of the war the substitution of women for men on a large scale was extended from munitions to numerous staple industries having a less direct connection with the war. In many cases, of course, the women did not do precisely the same work as their masculine predecessors. Especially in the engineering trades almost an industrial revolution occurred between 1914 and 1917. Skilled processes were subdivided, and automatic machinery was introduced, all the changes tending toward greater specialization and the elimination of the need of all round craft skill. Early in the war it was generally considered that women were not as efficient as men except on routine and repetition work. But as the women gained experience it was observed that more and more of them were undertaking the whole of a skilled man’s job, and the testimony as to relative efficiency, on work within a woman’s strength, became far more favorable. During the last year of the struggle, while a few new fields were invaded, the process of substitution had progressed nearly as far as possible, and the year witnessed mainly a settling down into the new lines of work previously entered.
Though the increase in women workers in agriculture was less marked than in industry, beginning with the summer of 1916, the numbers rose, being 113,000 in 1918, in contrast to 80,000 in 1914. The widening of professional opportunities and the opening of some executive positions in industry and commerce were other important features of the changes in women’s work.
Women even engaged in work ordinarily a part of soldiers’ duties. Besides thousands of military nurses, a special corps of women under semi-military discipline was recruited for work as clerks, cooks, cleaners, chauffeurs and mechanics behind the lines in France. These “Waacs,” as they were popularly called, numbered over 50,000 by the end of the war. The “Wrens” did similar shore duty for the Navy, and the “Wrafs,” woodcutting for the Board of Trade. The women were able to take up their new lines of work with
surprisingly little formal training, the chief exceptions being short practical courses for farm workers and semi-skilled munition makers.
Changes in the work done by children were considerably different for girls and for boys. For girls the choice of occupations widened much as for adult women. But for boys, though a few received earlier promotion to skilled men’s work than would ordinarily have been the case, on the whole training for skilled trades declined. With the men drawn into the war and with the increasing cost of living, it was natural that an increase should take place in the number of child street traders, and in the number of children working outside school hours.
Wages
Under war conditions the wages of both women and children were raised, probably the largest gains being made by boy and girl munition makers. The smallest rise seems to have occurred in the unregulated, so-called “women’s trades,” like laundry work. The trade boards made a number of increases in the industries within their jurisdiction, but the changes were seldom proportionate to the increase in the cost of living. Instead, what it was believed the industry would be able to support after the war was usually the determining factor. The economic position of the women who took men’s places was undoubtedly improved, though, even taking into account differences in experience and efficiency and the numerous changes in industrial method, the plane of economic equality between the two sexes was rarely attained. The government had the power to fix women’s wages on munitions work and in so doing it seemed at first to go on record in favor of the equal pay principle. But, in practice, the principle was not applied to unskilled and semiskilled time work and the women failed to receive the same cost of living bonuses as the men, though unquestionably the wages of women substitutes in munitions work was much higher than the prewar level of women’s wages. Where other industries were covered by trade union agreements, women in most instances received “equal pay,” but in the remaining cases of substitution, for
instance in agriculture, though considerable increases were gained, the men’s rates were by no means reached.
Recruiting New
Workers
It is of interest to learn how England secured women workers to meet the demands of war. For the most part they came from three different groups. First, workers changed from the low paid “women’s trades” and various slack lines of work to munitions and different kinds of “men’s work.” Second, the additional women workers were mainly the wives and other members of working men’s families, most of the married women having worked before marriage. Soldiers’ wives often found their separation allowances insufficient. In general both patriotic motives and the rising cost of living undoubtedly played a part in sending these women and many young boys and girls into industry Finally, a comparatively small number of women of a higher social class entered clerical work, agriculture and the munitions factories, in many instances in response to patriotic appeals.
Many of the women and children were recruited through the activities of local representative “Women’s War Employment Committees” and “County Agricultural Committees,” formed by the government, and working in close cooperation with the national employment exchanges. A large number of women, about 5,000 a month in the winter of 1917, and even a good many young boys and girls were sent through the exchanges from their homes to work at a distance. According to representatives of the Ministry of Munitions, the securing of their well being outside the factory under such circumstances was the most serious problem connected with their increased employment. Efforts to provide housing, recreation and improved transit facilities were at first in the hands of the voluntary committees, but later it proved necessary for the Ministry to appoint “outside welfare officers” to supplement and coordinate this work. The “hostels” with their large dormitories and common sitting rooms which were frequently open in munition centers for the women proved unsatisfactory because of the rules required and the difficulties of maintaining necessary discipline. In many cases, also,
they were unpopular with the women themselves. In an attempt to solve the housing problem, the government, in the summer of 1917, was forced to enact a measure making compulsory the “billeting” of munition makers with families living in the district, but this does not seem to have been put into actual practice.
Removal of Trade Union Restrictions
Trade union restrictions on the kinds of work women were allowed to perform were set aside for the war period and “dilution” was made widely possible by the munitions acts, in the case of munitions of war, and by agreements between employers and employes in many staple industries. In all cases the agreements included clauses intended to safeguard the standard wage rate and to restore the men’s places and the trade union rules after the war. Even where the munitions acts gave the government power to force “dilution” it proceeded mainly through conferences and agreements.
Officials of the Ministry of Munitions claimed to believe that the substitution of women or any other important change intended to increase production could only proceed peacefully if labor’s consent and cooperation were secured. They believed also that provisions to safeguard labor standards are essential to gain such cooperation, and that anything in the nature of coercion or a “labor dictatorship” would necessarily fail to reach the desired aim of enlarged output.
Control of Labor by the Munitions Acts
Considerable irritation was aroused among the munition makers, both men and women, by the control exercised over them through certain features of the munitions acts. Strikes were forbidden and provision for compulsory arbitration was made. Special munitions tribunals were set up which might impose fines for breaches of workshop discipline. In order to stop the needless shifting from job to job which was hampering production, a system of “leaving certificates” was established. Workers who left their previous
