Unlock exclusive free benefits that come with your purchase, thoughtfully crafted to supercharge your learning journey and help you learn without limits.

Here’s a quick overview of what you get with this book:

Next-gen reader

Figure 1.1: Illustration of the next-gen Packt Reader’s features

Our web-based reader, designed to help you learn effectively, comes with the following features:

Multi-device progress sync: Learn from any device with seamless progress sync.

Highlighting and notetaking: Turn your reading into lasting knowledge.

Bookmarking: Revisit your most important learnings anytime.

Dark mode: Focus with minimal eye strain by switching to dark or sepia mode.

Interactive AI assistant (beta)

Figure 1.2: Illustration of Packt’s AI assistant

Our interactive AI assistant has been trained on the content of this book, so it can help you out if you encounter any issues. It comes with the following features:

Summarize it: Summarize key sections or an entire chapter.

AI code explainers: In the next-gen Packt Reader, click the Explain button above each code block for AI-powered code explanations.

Note: The AI assistant is part of next-gen Packt Reader and is still in beta.

DRM-free PDF or ePub version

Figure 1.3: Free PDF and ePub

Learn without limits with the following perks included with your purchase:

Learn from anywhere with a DRM-free PDF copy of this book.

Use your favorite e-reader to learn using a DRM-free ePub version of this book.

Unlock this book’s exclusive benefits now Take a moment to get the most out of your purchase and enjoy the complete learning experience.	https://www.packtpub.com/unlock/9781835087480
Note: Have your purchase invoice ready before you begin.

• GitHub: https://github.com/PacktPublishing/Learning-Angular-Fifth-Edition/tree/main/ch01
• Node.js: https://nodejs.org
• Git: https://git-scm.com
• VSCode: https://code.visualstudio.com
• Angular DevTools: https://angular.dev/tools/devtools

Angular is a web framework written in the TypeScript language and includes a CLI, a language service, a debugging tool, and a rich collection of first-party libraries.

Angular enables developers to build scalable web applications with TypeScript, a strict syntactic superset of JavaScript, which we will learn about in Chapter 2, Introduction to TypeScript.

The official Angular documentation can be found at https://angular.dev.

Google created Angular. The first version, 1.0, was released in 2012 and was called AngularJS. AngularJS was a JavaScript framework, and web applications built with it were written in JavaScript.

In 2016, the Angular team decided to make a revolutionary change in AngularJS. They collaborated with the TypeScript team at Microsoft and introduced the TypeScript language into the framework. The next version of the framework, 2.0, was written in TypeScript and rebranded as Angular with a different logo than AngularJS.

In 2022, Angular entered a new era of evolutionary advancements known as the Angular Renaissance. During that period, the framework picked up momentum in web development by introducing major innovations focused on enhancing the Developer Experience (DX) and optimizing application performance, such as:

• A simple and modern approach to authoring Angular applications
• Improved reactivity patterns to manage application state efficiently
• The integration of Server-Side Rendering (SSR) techniques to improve performance

A major milestone in the Angular Renaissance era was Angular 17, when the Angular team decided to rebrand the framework with a new logo and colors, reflecting the recent changes and setting the vision for future advancements.

Angular is based on the most modern web standards and supports all the evergreen browsers. You can find more details about the specific version support of each browser at https://angular.dev/reference/versions#browser-support.

In the following section, we will learn the benefits of choosing Angular for web development.

The power of the Angular framework is based on the combination of the following characteristics:

• The main pillars of the framework:
  • Cross-platform
  • Incredible tooling
  • Easy onboarding
• The usage of Angular worldwide:
  • An amazing community
  • Battle-tested against Google products

In the following sections, we will examine each characteristic in more detail.

Cross-platform

Angular applications can run on different platforms: web, server, desktop, and mobile. Angular can run natively only on the web because it is a web framework; however, it is open-source and is backed by incredible tooling that enables the framework to run on the remaining three using the following tools:

• Angular SSR: Renders Angular applications server-side
• Angular service worker: Enables Angular applications to run as Progressive Web Applications (PWAs) that can execute in desktop and native mobile environments
• Ionic/NativeScript: Allows us to build mobile applications using Angular

The next pillar of the framework describes the tooling available in the Angular ecosystem.

Tooling

The Angular team has built two great tools that make Angular development easy and fun:

• Angular CLI: A command-line interface that allows us to work with Angular projects, from scaffolding to testing and deployment
• Angular DevTools: A browser extension that enables us to inspect and profile Angular applications from the comfort of our browser

The Angular CLI is the de facto solution to work with Angular applications. It allows the developer to focus on writing application code, eliminating the boilerplate of configuration tasks such as scaffolding, building, testing, and deploying an Angular application.

Onboarding

It is simple and easy to start with Angular development because when we install Angular, we also get a rich collection of first-party libraries out of the box, including:

• An Angular HTTP client to communicate with external resources over HTTP
• Angular forms to create HTML forms to collect input and data from users
• An Angular router to perform in-app navigations

The preceding libraries are installed by default when we create a new Angular application using the Angular CLI. However, they are only used in our application if we import them explicitly into our project.

The usage of Angular worldwide

Many companies use Angular for their websites and web applications. The website https://www.madewithangular.com contains an extensive list of those companies, including some popular ones.

Additionally, Angular is used in thousands of projects by Google and by millions of developers worldwide. The fact that Angular is already used internally at Google is a crucial factor in the reliability of the framework. Every new version of Angular is thoroughly tested in those projects before becoming available to the public. The testing process helps the Angular team catch bugs early and delivers a top-quality framework to the rest of the developer community.

Angular is backed and supported by a thriving developer community. Developers can access many available communities worldwide, online or locally, to get help and guidance with the Angular framework. On the other hand, communities help the Angular framework progress by sharing feedback on new features, testing new ideas, and reporting issues. Some of the most popular online communities are:

• Tech Stack Nation: The world’s friendliest Angular study group that brings together Angular developers who are passionate about improving their confidence in building amazing Angular applications. Tech Stack Nation is a community where Angular developers can collaborate, learn from each other’s expertise, and push the boundaries of what Angular can achieve. You can join Tech Stack Nation at https://techstacknation.com.
• Angular Community Discord: Angular’s official Discord server that brings the incredible Angular community together. Everyone is welcome to join the community with the click of a button. It is the central location to connect Angular team members, Google Developer Experts (GDEs), library authors, meetup groups, and anyone interested in learning the framework. You can join the Angular Community Discord server at https://discord.gg/angular.
• Angular.love: A community platform for Angular enthusiasts, supported by House of Angular, to facilitate the growth of Angular developers through knowledge-sharing initiatives. It started as a blog where experts published articles about Angular news, features, and best practices. Now, Angular.love also organizes in-person and online meetups, frequently featuring GDEs. You can join Angular.love at https://angular.love.

Now that we have seen what Angular is and why someone should choose it for web development, we will learn how to use it and build great web applications.

Setting up a project with Angular can be tricky. You need to know what libraries to import and ensure that files are processed in the correct order, which leads us to the topic of scaffolding. Scaffolding is a tool to automate tasks, such as generating a project from scratch, and it becomes necessary as complexity grows and where every hour counts toward producing business value, rather than being spent fighting configuration problems.

The primary motivation behind creating the Angular CLI was to help developers focus on application building, eliminating the configuration boilerplate. Essentially, with a simple command, you should be able to initialize an application, add new artifacts, run tests, update applications, and create a production-grade bundle. The Angular CLI supports all of this using special commands called schematics.

Prerequisites

Before we begin, we must ensure that our development environment includes software tools essential to the Angular development workflow.

Node.js

Node.js is a JavaScript runtime built on top of Chrome’s v8 JavaScript engine. Angular requires an active or maintenance Long-Time Support (LTS) version. If you have already installed it, you can run node -v on the command line to check which version you are running.

npm

npm is a software package manager that is included by default in Node.js. You can check this out by running npm -v in the command line. An Angular application consists of various libraries, called packages, that exist in a central place called the npm registry. The npm client downloads and installs the libraries needed to run your application from the npm registry to your local computer.

Git

Git is a client that allows us to connect to distributed version-control systems, such as GitHub, Bitbucket, and GitLab. It is optional from the perspective of the Angular CLI. You should install it if you want to upload your Angular project to a Git repository, which you might want to do.

Installing the Angular CLI

The Angular CLI is part of the Angular ecosystem and can be downloaded from the npm package registry. Since it is used to create Angular projects, we must install it globally in our system. Open a terminal window and run the following command:

npm install -g @angular/cli

The command that we used to install the Angular CLI uses the npm client, followed by a set of runtime arguments:

• install or i: Denotes the installation of a package
• -g or --global: Indicates that the package will be installed on the system globally
• @angular/cli: The name of the package to install

The Angular CLI follows the same version as the Angular framework, which in this book is 19. The preceding command will install the latest stable version of the Angular CLI. You can check which version you have installed by running ng version or ng v in the command line. If you have a different version than 19 after installing it, you can run the following command:

npm install -g @angular/cli@19

The preceding command will fetch and install the latest version of Angular CLI 19.

CLI commands

The Angular CLI is a command-line interface tool that automates specific tasks during development, such as serving, building, bundling, updating, and testing an Angular project. As the name implies, it uses the command line to invoke the ng executable file and run commands using the following syntax:

ng [command] [options]

Here, [command] is the name of the command to be executed, and [options] denotes additional parameters that can be passed to each command. To view all available commands, you can run the following:

ng help

Some commands can be invoked using an alias instead of the name. In this book, we cover the most common ones (the alias of each command is shown inside parentheses):

• new (n): Creates a new Angular CLI workspace from scratch
• build (b): Compiles an Angular application and outputs generated files in a predefined folder
• generate (g): Creates new files that comprise an Angular application
• serve (dev): Builds an Angular application and serves it using a pre-configured web server
• test (t): Runs the unit tests of an Angular application
• add: Installs an Angular library in an Angular application
• update: Updates an Angular application to the latest Angular version

You can find more Angular CLI commands at https://angular.dev/cli.

Updating an Angular application is one of the most critical tasks from the preceding list. It helps us stay up to date by upgrading our Angular applications to the latest version.

Additionally, you can use the Angular upgrade guide, which contains tips and step-by-step instructions on updating your applications, at https://angular.dev/update-guide.

Creating a new project

Now that we have prepared our development environment, we can start creating our first Angular application. We will use the ng new command of the Angular CLI and pass the name of the application that we want to create as an option:

1. Open a terminal window, navigate to a folder of your choice, and run the command ng new my-app. Creating a new Angular application is a straightforward process. The Angular CLI will ask for details about the application we want to create so that it can scaffold the Angular project as best as possible.
2. Initially, it will ask if we want to enable Angular analytics:

   Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.dev/cli/analytics. (y/N)
   

The Angular CLI will ask this question once when we create the first Angular project and apply it globally in our system. However, we can change the setting later in a specific Angular workspace.

3. The next question is related to the styling of our application:

   Which stylesheet format would you like to use?
   

It is common to use CSS to style Angular applications. However, we can use preprocessors like SCSS or Less to add value to our development workflow. In this book, we work with CSS directly, so accept the default choice, CSS, and press Enter.

4. Finally, the Angular CLI will prompt us if we want to enable SSR and Static Site Generation (SSG) in our application:

   Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
   

SSR and SSG are concerned with improving the startup and load performance of an Angular application. We will learn more about them in Chapter 15, Optimizing Application Performance. For now, accept the default choice, No, by pressing Enter.

The process may take some time, depending on your internet connection. During this time, the Angular CLI downloads and installs all necessary packages and creates default files for your Angular application. When finished, it will have created a folder called my-app. The folder represents an Angular CLI workspace that contains a single Angular application called my-app at the root level.

The workspace contains various folders and configuration files that the Angular CLI needs to build and test the Angular application:

• .vscode: Includes VSCode configuration files
• node_modules: Includes installed npm packages that are needed to develop and run the Angular application
• public: Contains static assets such as fonts, images, and icons
• src: Contains the source files of the application
• .editorconfig: Defines coding styles for the default editor
• .gitignore: Specifies the files and folders that Git should not track
• angular.json: The main configuration file of the Angular CLI workspace
• package.json and package-lock.json: Provide definitions of npm packages, along with their exact versions, which are needed to develop, test, and run the Angular application
• README.md: A README file that is automatically generated from the Angular CLI
• tsconfig.app.json: A TypeScript configuration that is specific to the Angular application
• tsconfig.json: A TypeScript configuration that is specific to the Angular CLI workspace
• tsconfig.spec.json: A TypeScript configuration that is specific to unit tests of the Angular application

As developers, we should only care about writing the source code that implements features for our application. Nevertheless, having basic knowledge of how the application is orchestrated and configured helps us better understand the mechanics and ways to intervene if necessary.

Navigate to the newly created folder and start your application with the following command:

ng serve

The Angular CLI compiles the Angular project and starts a web server that watches for changes in project files. This way, whenever you change your application code, the web server rebuilds the project to reflect the new changes.

After compilation has been completed successfully, you can preview the application by opening your browser and navigating to http://localhost:4200:

Figure 1.4: Angular application landing page

Congratulations! You have created your first Angular CLI workspace. The Angular CLI created a sample web page that we can use as a reference to build our project. In the next section, we will explore the main parts of our application and learn how to modify this page.

We will take the first intrepid steps in examining our Angular application. The Angular CLI has already scaffolded our project and done much of the heavy lifting for us. All we need to do is fire up our favorite IDE and start working with the Angular project. We will use VSCode in this book, but feel free to choose any editor you are comfortable with:

1. Open VSCode and select File | Open Folder… from the main menu.
2. Navigate to the my-app folder and select it. VSCode will load the associated Angular CLI workspace.
3. Expand the src folder.

When we develop an Angular application, we’ll likely interact with the src folder. It is where we write the code and tests of our application. It contains the following:

• app: All the Angular-related files of the application. You interact with this folder most of the time during development.
• index.html: The main HTML page of the Angular application.
• main.ts: The main entry point of the Angular application.
• styles.css: CSS styles that apply globally to the Angular application. The extension of this file depends on the stylesheet format you choose when creating the application.

The app folder contains the actual source code we write for our application. Developers spend most of their time inside that folder. The Angular application that was created automatically from the Angular CLI contains the following files:

• app.component.css: Contains CSS styles specific to the sample page. The extension of this file depends on the stylesheet format you choose when creating the application.
• app.component.html: Contains the HTML content of the sample page.
• app.component.spec.ts: Contains unit tests for the sample page.
• app.component.ts: Defines the presentational logic of the sample page.
• app.config.ts: Defines the configuration of the Angular application.
• app.routes.ts: Defines the routing configuration of the Angular application.

In the following sections, we will learn how Angular orchestrates some of those files to display the sample page of the application.

Components

The files whose names start with app.component constitute an Angular component. A component in Angular controls part of a web page by orchestrating the interaction of the presentational logic with the HTML content of the page, called a template.

Each Angular application has a main HTML file, named index.html, that exists inside the src folder and contains the following <body> HTML element:

<body>
  <app-root></app-root>
</body>

The <app-root> tag is used to identify the main component of the application and acts as a container to display its HTML content. It instructs Angular to render the template of the main component inside that tag. We will learn how it works in Chapter 3, Structuring User Interfaces with Components.

When the Angular CLI builds an Angular application, it parses the index.html file and identifies HTML tags inside the <body> element. An Angular application is always rendered inside the <body> element and comprises a tree of components. When the Angular CLI finds a tag that is not a known HTML element, such as <app-root>, it starts searching through the components of the application tree. But how does it know where to start?

Bootstrapping

The startup method of an Angular application is called bootstrapping, and it is defined in the main.ts file inside the src folder:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
 
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

The main task of the bootstrapping file is to define the component that will be loaded at application startup. It calls the bootstrapApplication method, passing AppComponent as a parameter to specify the starting component of the application. It also passes the appConfig object as a second parameter to specify the configuration that will be used in the application startup. The application configuration is described in the app.config.ts file:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

The appConfig object contains a providers property to define services provided throughout the Angular application. We will learn more about services in Chapter 5, Managing Complex Tasks with Services.

A new Angular CLI application provides routing services by default. Routing is related to in-app navigation between different components using the browser URL. It is activated using the provideRouter method, passing a routes object, called route configuration, as a parameter. The route configuration of the application is defined in the app.routes.ts file:

import { Routes } from '@angular/router';
export const routes: Routes = [];

Our application does not have a route configuration yet, as indicated by the empty routes array. We will learn how to set up routing and configure it in Chapter 9, Navigating through Applications with Routing.

Template syntax

Now that we have taken a brief overview of our sample application, it’s time to start interacting with the source code:

1. Run the following command in a terminal window to start the application if it is not running already:

   ng serve
   

   If you are working with VSCode, it is preferable to use its integrated terminal, which is accessible from the Terminal | New Terminal option in the main menu.

2. Open the application with your browser at http://localhost:4200, and notice the text below the Angular logo that reads Hello, my-app. The word my-app, which corresponds to the application name, comes from a variable declared in the TypeScript file of the main component. Open the app.component.ts file and locate the title variable:

   import { Component } from '@angular/core';
   import { RouterOutlet } from '@angular/router';
   @Component({
     selector: 'app-root',
     imports: [RouterOutlet],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css'
   })
   export class AppComponent {
     title = 'my-app';
   }
   

The title variable is a component property that is used in the component template.

3. Open the app.component.html file and go to line 228:

   <h1>Hello, {{ title }}</h1>
   

The title property is surrounded by double curly braces syntax called interpolation, which is part of the Angular template syntax. In a nutshell, interpolation converts the value of the title property to text and prints it on the page.

Angular uses specific template syntax to extend and enrich the standard HTML syntax in the application template. We will learn more about the Angular template syntax in Chapter 3, Structuring User Interfaces with Components.

4. Change the value of the title property in the AppComponent class to World, save the changes, wait for the application to reload, and examine the output in the browser:

Figure 1.5: Landing page title

Congratulations! You have successfully interacted with the source code of your application.

By now, you should have a basic understanding of how Angular works and what the basic parts of an Angular application are. As a reader, you have had to absorb a lot of information so far. However, you will get a chance to get more acquainted with the components in the upcoming chapters. For now, the focus is to get you up and running, by giving you a powerful tool like the Angular CLI and showing you how only a few steps are needed to display an application on the screen.

One of the reasons that the Angular framework is popular among developers is the rich ecosystem of available tools. The Angular community has built amazing tools to complete and automate various tasks, such as debugging, inspecting, and authoring Angular applications:

• Angular DevTools
• VSCode Debugger
• VSCode Profiles

We will learn how to use each in the following sections, starting with Angular DevTools.

Angular DevTools

Angular DevTools is a browser extension created and maintained by the Angular team. It allows us to inspect and profile Angular applications directly in the browser. It is currently supported by Google Chrome and Mozilla Firefox and can be downloaded from the following browser stores:

• Google Chrome: https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh
• Mozilla Firefox: https://addons.mozilla.org/firefox/addon/angular-devtools

To open the extension, open the browser developer tools and select the Angular tab. It contains three additional tabs:

• Components: Displays the component tree of the Angular application
• Profiler: Allows us to profile and inspect the Angular application
• Injector Tree: Displays the services provided by the Angular application

In this chapter, we will explore how to use the Components tab. We will learn how to use the Profiler tab in Chapter 3, Structuring User Interfaces with Components, and the Injector Tree tab in Chapter 5, Managing Complex Tasks with Services.

The Components tab allows us to preview the components and directives of an Angular application and interact with them. If we select a component from the tree representation, we can view its properties and metadata:

Figure 1.6: Component preview

From the Components tab, we can also look up the respective HTML element in the DOM or navigate to the actual source code of the component or directive. Clicking the < > button will take us to the TypeScript file of the current component:

Figure 1.7: TypeScript source file

Double-clicking a selector from the tree representation of the Components tab will navigate us to the DOM of the main page and highlight the individual HTML element:

Figure 1.8: Main page DOM

Finally, one of the most useful features of the component tree is that we can alter the value of a component property and inspect how the component template behaves:

Figure 1.9: Change component state

In the preceding image, you can see that when we changed the value of the title property to Angular World, the change was also reflected in the component template.

VSCode Debugger

We can debug an Angular application using standard debugging techniques for web applications or the tooling that VSCode provides out of the box.

The console object is the most commonly used web API for debugging. It is a very fast way to print data and inspect values in the browser console. To inspect the value of an object in an Angular component, we can use the debug or log method, passing the object we want to inspect as a parameter. However, it is considered an old-fashioned approach, and a codebase with many console.log methods is difficult to read. An alternate way is to use breakpoints inside the source code using the VSCode debug menu.

VSCode contains a built-in debugging tool that uses breakpoints to debug Angular applications. We can add breakpoints inside the source code from VSCode and inspect the state of an Angular application. When an Angular application runs and hits a breakpoint, it will pause and wait. During that time, we can investigate and inspect several values involved in the current execution context.

Let’s see how to add breakpoints to our sample application:

1. Open the app.component.ts file and click on the left of line 11 to add a breakpoint. A red dot denotes breakpoints:

Figure 1.10: Adding a breakpoint

2. Click on the Run and Debug button in the left sidebar of VSCode.
3. Click on the play button to start the application using the ng serve command:

Figure 1.11: Run and debug menu

VSCode will build our application, open the default web browser, and hit the breakpoint inside the editor:

Figure 1.12: Hitting a breakpoint

We can now inspect various aspects of our component and use the buttons in the debugger toolbar to control the debugging session.

Another powerful feature of VSCode is VSCode Profiles, which help developers customize VSCode according to their development needs.

VSCode Profiles

VSCode Profiles allows us to customize the following aspects of the VSCode editor:

• Settings: The configuration settings of VSCode
• Keyboard shortcuts: Shortcuts to execute VSCode commands with the keyboard
• Snippets: Reusable template code snippets
• Tasks: Tasks that automate the execution of scripts and tools directly from VSCode
• Extensions: Tools that enable us to add new capabilities in VSCode, such as languages, debuggers, and linters

Profiles can also be shared, which helps us maintain a consistent development setup and workflow across our team. VSCode contains a set of built-in profiles, including one for Angular, that we can further customize according to our development needs. To install the Angular profile:

1. Click the Manage button represented by the gear icon at the bottom of the left sidebar in VSCode and select the Profiles option.
2. Click on the arrow of the New Profile button and select the From Template | Angular option.
3. Click the gear button if you want to select a custom icon for your profile.
4. Click the Create button to create your profile.

VSCode will automatically apply the new profile after it has been created successfully.

In the following sections, we will explore some of the extensions in the VSCode Angular profile.

Angular Language Service

The Angular Language Service extension is developed and maintained by the Angular team and provides code completion, navigation, and error detection inside Angular templates. It enriches VSCode with the following features:

• Code completion
• A go-to definition
• Quick info
• Diagnostic messages

To get a glimpse of its powerful capabilities, let’s look at the code completion feature. Suppose we want to display a new property called description in the template of the main component. We can set this up by going through the following steps:

1. Define the new property in the app.component.ts file:

   export class AppComponent {
     title = 'my-app';
     description = 'Hello World';
   }
   

2. Open the app.component.html file and add the property name in the template using Angular interpolation syntax. The Angular Language Service will find it and suggest it for us automatically:

Figure 1.13: Angular Language Service

The description property is a public property. We can omit the keyword public when using public properties and methods. Code completion does not work for private properties and methods. If the property had been declared private, then the Angular Language Service and the template would not have been able to recognize it.

You may have noticed that a red line appeared instantly underneath the HTML element as you typed. The Angular Language Service did not recognize the property until you typed it correctly and gave you a proper indication of this lack of recognition. If you hover over the red indication, it displays a complete information message about what went wrong:

Figure 1.14: Error handling in the template

The preceding information message comes from the diagnostic messages feature. The Angular Language Service supports various messages according to the use case. You will encounter more of these messages as you work more with Angular.

Material Icon Theme

VSCode has a built-in set of icons to display different types of files in a project. The Material Icon Theme extension provides additional icons that conform to the Material Design guidelines by Google; a subset of this collection targets Angular-based artifacts:

Figure 1.15: Material Icon Theme

Using this extension, you can easily spot the type of Angular files in a project, such as components, and increase developer productivity, especially in large projects with many files.

EditorConfig

VSCode editor settings, such as indentation or spacing, can be set at a user or project level. EditorConfig can override these settings using the .editorconfig configuration file, which can be found in the root folder of an Angular CLI project:

# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
ij_typescript_use_double_quotes = false
[*.md]
max_line_length = off
trim_trailing_whitespace = false

You can define unique settings in this file to ensure the consistency of the coding style across your team.

That’s it! Your journey into the world of Angular has just begun. Let’s recap the features that you have learned so far. We learned what Angular is, looked over the brief history of the framework, and examined the benefits of using it for web development.

We saw how to set up our development workspace and find the tools to bring TypeScript into the game. We introduced the Angular CLI tool, the Swiss army knife for Angular, which automates specific development tasks. We used some of the most common commands to scaffold our first Angular application. We also examined the structure of our application and learned how to interact with it.

Our first application gave us a basic understanding of how Angular works internally to render our application on a web page. We embarked on our journey, starting with the main HTML file of an Angular application. We saw how Angular parses that file and starts searching the component tree to load the main component. We learned the process of Angular bootstrapping and how it is used to load the application configuration.

Finally, we met some of the most important Angular tools that could empower you as a software developer. We explored how to use Angular DevTools to inspect Angular applications and VSCode Debugger for debugging. We also examined VSCode Profiles and how it can help us maintain a consistent development environment across our team.

In the next chapter, you will learn some of the basics of the TypeScript language. The chapter will cover what problems can be solved by introducing types and the language itself. TypeScript, as a superset of JavaScript, contains a lot of powerful concepts and marries well with the Angular framework, as you are about to discover.

Join our community’s Discord space for discussions with the author and other readers:

https://packt.link/LearningAngular5e