Angular

Angular 11 Released

Published Nov 20, 2020

Updated Feb 14, 2023

3 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

I'm so excited to see the recent release of Angular v11.0.0!

There are lot of improvements especially with regards to tooling.

What's new in the release

CLI: Inlining of Google Fonts

First, contentful paint is always the critical part for performance. [Eliminate render-blocking resources] (https://web.dev/render-blocking-resources/) is an important guide to improve the FCP performance, and Angular is also working on following the guide to inline the blocking resources.

In Angular v11, the Google Fonts will be inline by adding the following options to the angular.json.

"optimization": {
  "fonts": true
}

And without this option, your Google font importing looks like this.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

After activating this optimization, it looks like this.

<style>
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }

  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
  }
</style>

CLI: Hot Module Replacement Support

Angular supports HMR for a while, but to make it work requires configuration and code changes, which is not a good developer experience. From v11, it is simple to enable the HMR support by using

ng serve --hmr

Now, the live reload will also keep the state of your application, so it is much easier to apply some small updates to your application.

CLI: Experimental Webpack 5 support

Webpack 5 supports many new features such as:

Module federation which is a new way to develop micro-frontend
Disk caching for faster build
Better tree shaking

Now, you can opt-in the Webpack 5 by adding the following section in the package.json file.

"resolutions": {
     "webpack": "5.4.0"
}

CLI: ng build better output

Now, running ng build will generate more clear output.

CLI: ng serve ask for new port

It is a really nice feature! If the 4200 port is in use, ng serve will ask you for a different port without re-run with --port option.

? Port 4200 is already in use.
Would you like to use a different port? (Y/n)

** Angular Live Development Server is listening on localhost:60335, open your browser on http://localhost:60335/ **

CLI: Lint

Now, Angular uses TSLint as the default linter, and since TSLint is deprecated now, Angular uses angular-eslint to replace TSLint/Codelyzer. Here is the migration guide.

Features: Trusted Types support

Trusted Types is a new solution to prevent DOM-based cross-site scripting vulnerabilities.

Consider the following example:

anElement.innerHTML  = location.href;

With Trusted Types enabled, the browser throws a TypeError and prevent this behavior. To tell the browser this is a trusted safe operation, you need to do it like this:

anElement.innerHTML = aTrustedHTML;

Note that the aTrustedHtml is a TrustedHtml object.

It looks similar to the DomSanitizer's functionality, so now Angular permits support to allow such an operation to return a Trusted Types.

Tooling

Typescript is updated to v4.0

Deprecations

IE 9,10 and IE mobile are no longer supported.
ViewEncapsulation.Native has been removed.
async test helper function is renamed to waitForAsync.

For the full deprecation list, please check here.

Triaging issues and PRs

The Angular team put forward a significant effort to go through all the issues/PRs now opened in the GitHub, and check/triage these issues to make sure that they are at the correct state. It greatly helps the community to get better/faster support and feedback. I am so honored to also take part in this process.

How to update to v11

It is very simple. Just use the Angular CLI.

ng update @angular/cli @angular/core

You can find more information from update.angular.io/ and also from the official blog.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Jia Li
Jia Li is a frontend developer with passion, he is an Angular Collaborator and the code owner of angular/zone.js. He loves Angular and now develops Angular enterprise application.
@JiaLiPassion @JiaLiPassion

Exploring Angular Forms: A New Alternative with Signals

Exploring Angular Forms: A New Alternative with Signals In the world of Angular, forms are essential for user interaction, whether you're crafting a simple login page or a more complex user profile interface. Angular traditionally offers two primary approaches: template-driven forms and reactive forms. In my previous series on Angular Reactive Forms, I explored how to harness reactive forms' power to manage complex logic, create dynamic forms, and build custom form controls. A new tool for managing reactivity - signals - has been introduced in version 16 of Angular and has been the focus of Angular maintainers ever since, becoming stable with version 17. Signals allow you to handle state changes declaratively, offering an exciting alternative that combines the simplicity of template-driven forms with the robust reactivity of reactive forms. This article will examine how signals can add reactivity to both simple and complex forms in Angular. Recap: Angular Forms Approaches Before diving into the topic of enhancing template-driven forms with signals, let’s quickly recap Angular's traditional forms approaches: 1. Template-Driven Forms: Defined directly in the HTML template using directives like ngModel, these forms are easy to set up and are ideal for simple forms. However, they may not provide the fine-grained control required for more complex scenarios. Here's a minimal example of a template-driven form: ` ` 2. Reactive Forms: Managed programmatically in the component class using Angular's FormGroup, FormControl, and FormArray classes; reactive forms offer granular control over form state and validation. This approach is well-suited for complex forms, as my previous articles on Angular Reactive Forms discussed. And here's a minimal example of a reactive form: ` ` Introducing Signals as a New Way to Handle Form Reactivity With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms. Let’s explore how signals can be used in both simple and complex form scenarios. Example 1: A Simple Template-Driven Form with Signals Consider a basic login form. Typically, this would be implemented using template-driven forms like this: ` ` This approach works well for simple forms, but by introducing signals, we can keep the simplicity while adding reactive capabilities: ` ` In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals. You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue: Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. Example 2: A Complex Form with Signals You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed. Here's how this form might be defined using signals: ` > Notice that the phoneNumbers field is defined as a signal of an array of signals. This structure allows us to track changes to individual phone numbers and update the form state reactively. The addPhoneNumber and removePhoneNumber methods update the phoneNumbers signal array, triggering reactivity updates in the form. ` > In the template, we use the phoneNumbers signal array to dynamically render the phone number input fields. The addPhoneNumber and removePhoneNumber methods allow users to reactively add or remove phone numbers, updating the form state. Notice the usage of the track function, which is necessary to ensure that the ngFor directive tracks changes to the phoneNumbers array correctly. Here's a StackBlitz demo of the complex form example for you to play around with: Validating Forms with Signals Validation is critical to any form, ensuring that user input meets the required criteria before submission. With signals, validation can be handled in a reactive and declarative manner. In the complex form example above, we've implemented a computed signal called formValid, which checks whether all fields meet specific validation criteria. The validation logic can easily be customized to accommodate different rules, such as checking for valid email formats or ensuring that all required fields are filled out. Using signals for validation allows you to create more maintainable and testable code, as the validation rules are clearly defined and react automatically to changes in form fields. It can even be abstracted into a separate utility to make it reusable across different forms. In the complex form example, the formValid signal ensures that all required fields are filled and validates the email and phone numbers format. This approach to validation is a bit simple and needs to be better connected to the actual form fields. While it will work for many use cases, in some cases, you might want to wait until explicit "signal forms" support is added to Angular. Tim Deschryver started implementing some abstractions around signal forms, including validation and wrote an article about it. Let's see if something like this will be added to Angular in the future. Why Use Signals in Angular Forms? The adoption of signals in Angular provides a powerful new way to manage form state and reactivity. Signals offer a flexible, declarative approach that can simplify complex form handling by combining the strengths of template-driven forms and reactive forms. Here are some key benefits of using signals in Angular forms: 1. Declarative State Management: Signals allow you to define form fields and computed values declaratively, making your code more predictable and easier to understand. 2. Reactivity: Signals provide reactive updates to form fields, ensuring that changes to the form state trigger reactivity updates automatically. 3. Granular Control: Signals allow you to define form fields at a granular level, enabling fine-grained control over form state and validation. 4. Dynamic Forms: Signals can be used to create dynamic forms with fields that can be added or removed dynamically, providing a flexible way to handle complex form scenarios. 5. Simplicity: Signals can offer a simpler, more concise way to manage form states than traditional reactive forms, making building and maintaining complex forms easier. Conclusion In my previous articles, we explored the powerful features of Angular reactive forms, from dynamic form construction to custom form controls. With the introduction of signals, Angular developers have a new tool that merges the simplicity of template-driven forms with the reactivity of reactive forms. While many use cases warrant Reactive Forms, signals provide a fresh, powerful alternative for managing form state in Angular applications requiring a more straightforward, declarative approach. As Angular continues to evolve, experimenting with these new features will help you build more maintainable, performant applications. Happy coding!...

Oct 4, 2024

5 mins

AngularJavaScript

Using HttpClient in Modern Angular Applications

Introduction With all the wonderful treats that the Angular team has given us during the recent "renaissance" era, many new developers are joining in on the fun. And one of the challenges they'll face at some point is how to call an API from your Angular application properly. Unfortunately, while searching for a guide on how to do this, they might stumble upon a lot of outdated information. Hence, this article should serve as a reliable guide on how to use the HttpClient in Angular >= 17. The Setup To make an HTTP request in Angular, you can take advantage of the HttpClient provided by the @angular/common/http package. To use it, you'll need to provide it. Here's how you can do that for the whole application using the bootstrapApplication function from @angular/platform-browser: ` With that, you should be good to go. You can now inject the HttpClient into any service or component in your application. Using HttpClient in Services Let's take a common example: You have a database object, say a Movie, and you want to implement CRUD operations on it. Typically, you'll want to create a service that provides methods for these operations. Let's call this service MovieService and create a skeleton for it with a method for getting all movies. ` Implementing the Method using HttpClient Let's assume we have a GraphQL API for our movies. We can implement our getAllMovies using HttpClient to make a request to fetch all movies. First, we will need to define a new type to represent the response from the API. This is especially important when you are using GraphQL, which may return a specific structure, such as: ` When working with a real API, you'll likely use some code generator to generate the types for the response from the GraphQL schema. But for the sake of this example, we'll create an interface to represent the response manually: ` Now, we can implement the getAllMovies method using HttpClient: ` > Note: The post method is used here because we are sending a request body. If you are making a GET request (e.g. to a REST API), you can use the get method instead. The getAllMovies method returns an Observable of MoviesListResponse. In this example, I have typed it explicitly to make it obvious at first glance, but you could also omit the type annotation, and TypeScript should infer it. > Note: While I'm excited about signals as much as the next guy, making HTTP requests is one of the typical async operations for which RxJS Observables are a perfect fit, making a great argument for RxJS still having a solid place in Angular alongside signals. Using the Service in a Component Now that we have our MovieService set up, we can use it as a component to fetch and display all movies. But first, let's create a Movie interface to represent the structure of a movie. Trust me, this will prevent many potential headaches down the line. Although using any at the beginning and implementing the types later is a valid approach in some cases, using data fetched from an API without validating the type will inevitably lead to bugs that are difficult to solve. ` Now, we can start implementing our standalone MoviesComponent: ` In this component, we are calling the getAllMovies method from the MovieService in the constructor to fetch all movies and assign them to the movies property which we will use to display the movies in the template. ` In this case, placing our code inside the constructor is safe because it doesn’t depend on any @Input(). If it were, our code would fail because the inputs aren’t initialized at time of instantiation. That's why it is sometimes recommended to place logic in ngOnInit instead. You could also put this call in an arbitrary method that is called e.g. on a button click. Another way to handle the subscription is to use the async pipe in the template. This way, Angular will automatically subscribe and unsubscribe from the observable for you and you won't have to assign the response to a property in the component. Due to the structure of the returned data, however, we'll need to use the RxJS map operator to extract the movies from the response. ` > Note using the pipe method to chain the map operator to the observable returned by getAllMovies. This is a common pattern when working with RxJS observables introduced in RxJs 5.5. If you see code that uses the map operator directly on the observable and wonder why it isn't working for you, it's likely using an older version of RxJS. Now, we can simply apply the async pipe in the template to subscribe to the observable and display the movies: ` Conclusion HttpClient in Angular is pretty straightforward, but with all the changes to RxJS and Angular in the past few years, it can pose a significant challenge if you're not super-experienced with those technologies and stumble upon outdated resources. Following this article, you should hopefully be able to implement your service using HttpClient to make requests to an API in your modern Angular application and avoid the struggle of copying outdated code snippets....

Mar 27, 2024

4 mins

AngularJavaScript

Build Typescript Project with Bazel Chapter 2: File Structure

Build Typescript Project with Bazel Chapter 2: File Structure In the last chapter, we introduced the basic concept of Bazel. In this blog, I would like to talk about the file structure of Bazel. Concept and Terminology Before we introduce the file structure, we need to understand several key concepts and terminology in Bazel. - Workspace - Package - Target - Rule These concepts, and terminology, are composed to Build File, which Bazel will analyze, and execute. The basic relationship among these concepts looks like this , we will discuss the details one by one. Workspace A "workspace" refers to the directories, which contain 1. The source files of the project. 2. Symbolic links contain the build output. And the Bazel definition is in a file named WORKSPACE, or WORKSPACE.bazel at the root of the project directory. NOTE, one project can only have one WORKSPACE definition file. Here is an example of the WORKSPACE file. ` In a WORKSPACE file, we should 1. Define the name of the workspace. The name should be unique globally, or at least unique in your organization. You could use the reverse dns name, such as com_thisdot_bazel_demo, or the name of the project on GitHub. 2. Install environment related packages, such as yarn/npm/bazel. 3. Setup toolchains needed to build/test the project, such as typescript/karma. Once WORKSPACE is ready, application developers don't really need to touch this file. Package - The primary unit of code organization (something like module) in a repository - Collection of related files and a specification of the dependencies among them - Directory containing a file named BUILD or BUILD.bazel, residing beneath the top-level directory in the workspace - A package includes all files in its directory, plus all subdirectories beneath it, except those which, themselves, contain a BUILD file It is important to know how to split a project into package. It should be easy for the users to develop/test/share the unit of a package. If the unit is too big, the package has to be rebuilt on every package file change. If the unit is too small, it will be very hard to maintain and share. So, this is not an issue of Bazel. It is a general problem of project management. In Bazel, every package will have a BUILD.bazel file, containing all of the build/test/bundle target definitions. For example, here is a of the Angular structure. Every directory under packages directory is a package of code organization, and also the build organization of Bazel. Let's take a look at the file structure of gulpjs in Angular, so we can have a better understanding about the difference between Bazel and gulpjs. ` In most cases, - a gulpjs file doesn't have 1:1 relationship to the package directory. - a gulpjs file can reference any files inside the project. But for Bazel, - Each package should have their own BUILD.bazel file. - The BUILD.bazel can only reference the file inside the current package, and if the current package depends on other packages, we need to reference the Bazel build target from the other packages instead of the files directly. Here is a Bazel Package directory structure in Angular repo. Build File Before we talk about target, let's take a look at the content of a BUILD.bazel file. ` The language of the BUILD.bazel file is Starlark. - Starlark is a subset of Python. - It is a very feature-limited language. A ton of Python features, such as class, import, while, yield, lambda, is, raise, are not supported. - Recursion is not allowed. - Most of Python's builtin methods are not supported. So Starlark is a very very simple language, and only supports very limited Python syntax. Target The BUILD.bazel file contains build targets. Those targets are the definitions of the build, test, and bundle work we want to achieve. The build target can represent: - Files - Rules The target can also depend on other targets - Circular dependencies are not allowed - Two targets, generating the same output, will cause a problem - Target dependency must be declared explicitly. Let's see the previous sample, ` Here, ts_library is a rule imported from @npm_bazel_typescript workspace, and ts_library(name = "lib") is a target. The name is lib, and this target defines the metadata for compiling the lib.ts with ts_library rule. Label Every target has a unique name called label. For example, if the BUILD.bazel file above is under /lib directory, then the label of the target is ` The label is composed of several parts. 1. the name of the workspace: @com_thisdot_bazel_demo. 2. the name of the package: lib. 3. the name of the target: lib. So, the composition is //:. Most of the times, the name of the workspace can be omitted, so the label above can also be expressed as //lib:lib. Additionally, if the name of the target is the same as the package's name, the name of the target can also be omitted. Therefore, the label above can also be expressed as //lib. NOTE: The label for the target needs to be unique in the workspace. Visibility We can also define the visibility to define whether the rule inside this package can be used by other packages. ` The visibility can be: - private: the rules can be only used inside the current package. - public: the rules can be used everywhere. - //some_package:package_scope: the rules can only be used in the specified scope under //some_package. The package_scope can be: pkg/subpackages/package group. And if the rules in one package can be accessed from the other package, we can use load to import them. For example: ` Here, we import the ts_library rule from the Bazel typescript package. Target - Target can be Files or Rule. - Target has input and output. The input and output are known at build time. - Target will only be rebuilt when input changes. Let's take a look at Rule first. Rule The rule is just like a function or macro. It can accept named parameters as options. Just like in the previous post, calling a rule will not execute an action. It is just metadata. Bazel will decide what to do. ` So here, we use the ts_library rule to define a target, and the name is lib. The srcs is lib.ts in the same directory. The visibility is public, so this target can be accessed from the other packages. Rule Naming It is very important to follow the naming convention when you want to create your own rule. - *_binary: executable programs in a given language (nodejs_binary) - *_test: special _binary rule for testing - *_library: compiled module for a given language (ts_library) Rule common attributes Several common attributes exist in almost all rules. For example: ` - name: unique name within this package - srcs: inputs of the target, typically files - deps: compile-time dependencies - data: runtime dependencies - testonly: target which should be executed only when running Bazel test - visibility: specifies who can make a dependency on the given target Let's see another example: ` Here, we use the data attribute. The data will only be used at runtime. It will not be analyzed by Bazel at build time. So, in this blog, we introduced the basic Bazel structure concepts. In the next blog, we will introduce how to query Bazel targets....

Mar 30, 2020

6 mins

Bazel

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....

Nov 8, 2024

3 mins

AccessibilityCSSPlaywright

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Angular 11 Released

What's new in the release

CLI: Inlining of Google Fonts

CLI: Hot Module Replacement Support

CLI: Experimental Webpack 5 support

CLI: ng build better output

CLI: ng serve ask for new port

CLI: Lint

Features: Trusted Types support

Tooling

Deprecations

Triaging issues and PRs

How to update to v11

Jia Li

You might also like

Exploring Angular Forms: A New Alternative with Signals

Using HttpClient in Modern Angular Applications

Build Typescript Project with Bazel Chapter 2: File Structure

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Let's innovate together!

You might also like

Exploring Angular Forms: A New Alternative with Signals

Using HttpClient in Modern Angular Applications

Build Typescript Project with Bazel Chapter 2: File Structure

Understanding the Difference Between `:focus` and `:focus-visible` in CSS