Angular's template syntax has always supported complex operations, making development easier. However, it has been limited in certain aspects, particularly when it comes to reusing expressions across the template. Developers have often resorted to using directives or other workarounds to overcome these limitations. Now, with the introduction of @let, we have a native solution that simplifies this process.

Introducing the let syntax

The @let syntax allows you to define variables directly in the template and reuse them throughout. This new feature provides a more ergonomic and straightforward way to handle variables in your templates. Let's take a look at a basic example:

@let name = 'Rubén';
<h1>Dashboard for {{name}}</h1>
Hello, {{name}}

In this example, the variable name is defined and used seamlessly within the template. This can be especially powerful in more complex templates where you need to reuse values derived from expressions.

Practical examples and use cases

Here are a few more examples of how @let can be used in your Angular templates:

1. Using with a template variable referencing an element:

    <input #name>
    @let greeting = 'Hello ' + name.value;
    <p>{{greeting}}</p>
   

2. Using with an async pipe:

    @let user = user$ | async;
    <h1>Welcome, {{user.name}}</h1>
   

These examples demonstrate how @let can streamline your templates by reducing redundancy and improving readability.

Scope and limitations

When using @let, it's important to remember that these variables are scoped to the current view and its descendants. This means that they cannot be accessed by parent or sibling views. For example:

@let topLevel = value;

@if (condition) {
  @let nested = value;
}

<div *ngIf="condition">
  @let nestedNgIf = value;
</div>

<!-- Valid -->
{{topLevel}}

<!-- Error: Not accessible outside @if or *ngIf scopes -->
{{nested}}
{{nestedNgIf}}

Additionally, @let declarations are read-only and cannot be reassigned. Their values will be recomputed on each change detection, such as when an async pipe's value changes. Attempting to reassign them will result in a type-checking error.

@let value = 10;
<!-- Error: `value` is not assignable -->
<button (click)="value = value + 1">Change the value</button>

Syntax Definition

Let's break down the syntax for @let:

1. The @let keyword.

2. Followed by one or more whitespaces (no new lines allowed).

3. Followed by a valid JavaScript name and optional whitespaces.

4. Followed by the equals (=) symbol and optional whitespaces.

5. Followed by an Angular expression, which can span multiple lines.

6. Terminated by the semicolon (;) symbol.

Conclusion

The introduction of @let in Angular represents a significant enhancement in the way developers can manage variables within templates. This feature not only improves code readability but also provides a more intuitive and efficient method of working with template variables. As Angular continues to evolve, features like @let demonstrate the framework's commitment to optimising the developer experience.

What is Zone.js?

Zone.js acts as a helper to check whether each component in a large application needs to be updated. Each time you use a component, Zone.js ensures that any change is correctly detected and updated.

Signals: The introduction in Angular 17

Angular 17 introduced a new concept called signals. Signals allow for more efficient interactions with components, reducing the dependency on Zone.js. Signals allow developers to handle state changes more explicitly.

The revolution of Angular 18: Hybrid system

Angular 18 takes this a step further with a hybrid change detection system. Now, any invoker of markForCheck will automatically trigger change detection, regardless of whether it is inside or outside of Zone.js.

Here is an example to illustrate this:

import { Component, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<div>{{ mySignal }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  mySignal = 'Initial Value';

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    setTimeout(() => {
      this.mySignal = 'Updated Value';
      this.cdr.markForCheck();
    }, 3000);
  }
}

In this example, we manually inject ChangeDetectorRef and invoke markForCheck after updating the component's state.

Using Signals for simplicity

With the new Signals feature in Angular 18, you can simplify this process:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `{{ mySignal() }}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  mySignal = signal(0);

  ngOnInit() {
    setTimeout(() => this.mySignal.set(1), 3000);
  }
}

In this improved version, we use a signal, and the view updates automatically without needing to manually call markForCheck.

Conclusion

The main benefit of this new system is the reduction in dependency on Zone.js, which can improve performance and code clarity. However, it is important for developers to understand how Signals and the hybrid system work in order to make the most of these improvements. Angular 18 is a revolution in change detection, making applications more efficient and easier to maintain. Removing the dependency on Zone.js, along with the introduction of Signals and the hybrid system, is a significant step forward for Angular developers.

Documentation is another part of development, the same as taking the recruitment, development, QA, etc. Documenting our application helps with onboarding new teammates, fixing future issues and better understanding the project. In this article, we will learn about what Compodoc is, its main features, how to set it up and more.

What is Compodoc?

Compodoc is a documentation tool for Angular applications. It generates static documentation of your application automatically. Once it is configured, you don't have to do anything more.

Compodoc has support for Angular, NestJS, and Stencil, 8 themes with integrated dark mode, support for 12 languages, and many more features.

Installation and configure

The installation is easy; we just run the following command:

Angular CLI:

ng add @compodoc/compodoc

or NPM:

npm install -g @compodoc/compodoc

This command will create a tsconfig.doc.json file. In this file, we have to decide which parts of our application we want to include or exclude.

{
  "include": ["src/**/*.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/app/file-to-exclude.ts"]
}

Also, we can add a few scripts to execute our documentation:

"compodoc:build": "compodoc -p tsconfig.doc.json",
"compodoc:build-and-serve": "compodoc -p tsconfig.doc.json -s",
"compodoc:serve": "compodoc -s"

The results

Once we have installed and configured our project, everything is done. We just need to run the serve script and see what Compodoc builds. Let's take a look at a few examples:

In the project overview, we have a sidebar menu with all of our modules, components, classes, interfaces, etc.

Routing overview, we have a detailed map with all of our routes.

Component overview, detailed information of each component.

Documentation coverage to have the knowledge of which percentage we have documented.

Conclusion

We just built our project documentation in a few steps. Compodoc, as you can see, is a great tool, fully automated to create your project documentation. We only saw a few features, but Compodoc has a lot more. We will talk more about Compodoc in the next articles.

I have attached the official page below.

Angular has a lot of built-in pipes. Let's look at some of them and how to create your own.

How it works?

The pipes are operators that you must use within the interpolation keys; you should use them in the HTML template.

Within the interpolation, you need to add | after the value and then the name of the pipe. A simple example would be

{{ name | uppercase }}

We can separate the 3 parts for better understanding

Input: Refers to the input value to be transformed.

Transform: This is the process we submit this information to.

Output: This is the value that results from the transformation.

Remember, to use the built-in pipes, you need to import them into your module or your component. If you are using standalone components, import the CommonModule. Alternatively, you can import just the specific pipe you need instead of the whole CommonModule.

Built-in pipes

Angular provides built-in pipes for typical data transformations. Here are a few examples with their explanations:

• DatePipe: Formats a date value according to locale rules.

• UpperCasePipe: Transforms text to all upper case.

• LowerCasePipe: Transforms text to all lower case.

• CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.

• DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.

• PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.

• AsyncPipe: Subscribe and unsubscribe to an asynchronous source such as an observable.

• JsonPipe: Display a component object property on the screen as JSON for debugging.

Using pipes with parameters

Parameters can be optional or required depending on the pipe. To specify the parameter on a pipe, you have to put it after the :. Let's take a look at a few examples:

The date pipe accepts parameters to control the date format:

<p>The hero's birthday is in {{ birthday | date:'yyyy' }}</p>

Also, the date pipe accepts a second parameter to control the timezone, you need to use another :

<p>The current time is: {{ currentTime | date:'hh:mm':'UTC' }}</p>

Combining two pipes

You can use multiple pipes at the same time, you just have to add another | to separate them:

<p>The hero's birthday is in {{ birthday | date:'yyyy' | uppercase }}</p>

Using pipes inside TypeScript files

Maybe you need to transform the data for some other reason and you don't need to show it in the template, you can also do it in the template, you need to add the pipe to your component's providers array and then inject it using dependency injection. After that, you can use it like this:

const formattedDate = this.datePipe.transform(this.currentDate, 'dd/MM/yyyy');

Creating our custom pipe

If the built-in pipes that Angular gives us aren't enough, you can create your own, let's see an example:

Create it using the Angular CLI:

ng g p pipes/customPipe

This command creates the class for your custom pipe, inside the class, you should return the transformed value.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe',
  standalone: true,
})
export class CustomPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello ${value}`;
  }
}

We just create a simple pipe that returns the value we sent plus a 'Hello' text, we make it standalone but this is not required.

<h1>{{ userName | customPipe }}</h1> //Hello Rubén

Conclusion

Angular pipes are a great way to save time, by default Angular provides us with many useful pipes, but also gives us the ability to create our own. We have learned about the most useful pipes and seen an example of how to create one.

It is important to understand how it works and what its main advantages are. It's a powerful library for handling asynchronous operations, but there are many operators, and sometimes it's hard to understand what each one is for and which one is best to use at any given time. This article aims to explain with examples which ones are most commonly used.

An operator is a function used in an observable that controls and emits only the information we are interested in, in the way we need it.

map

It is one of the most common operators in RxJs, and you have probably seen it many times. map allows us to transform the data emitted by the observable without altering it. Let's have a look at an example:

const number$ = range(1, 5);

number$.pipe(map((number) => number * 2)).subscribe(console.log);
// output: 2, 4, 6, 8, 10

As we can see, the expected output would be 1, 2, 3, 4, 5, but by applying map, we transform the values of the observable, in this case multiplying the values by two.

Here is a more visual example from the official RxJs documentation where the arrow above is the initial data stream of the observable and the one below is after applying map.

filter

The filter operator is used to filter the values of the observable stream. With this operator, we only emit those values that march the condition we set. Let's look at an example.

const number$ = range(1, 10);

number$.pipe(filter((n) => n > 5)).subscribe(console.log);
// output: 6, 7, 8, 9, 10

In this way, we filter the values of the observable and return only those that match the condition. Without the filter, the output would be 1, 2, 3, 4, 5.... After applying the filter, only values greater than 5 are returned. Let's look at a visual example:

tap

It is a utility operator that allows performing side actions that do not affect the main flow without affecting the emission or transformation of the observable.

It is a useful operator for debugging and testing the observable without modifying the output. Any logic we put inside the tap will help us debug and test, but the data stream remains intact. Let's look at an example:

of(Math.random()).pipe(
  tap(console.log),
  map(n => n > 0.5 ? 'big' : 'small')
).subscribe(console.log);

In this example with the map operator, we filter the numbers received from the observable to log "big" or "small" to the console depending on whether they are greater or less than 0.5. This is fine, but for development reasons, we want to know what number was initially received before filtering. By adding the tap, we can find out what it was. Let's look at a visual example from the official documentation:

take

The take operator emits the first n values and then completes the observable. The argument count specifies the number of values the observable should emit before completing. If the observable emits fewer values than the specified maximum, it will simply emit those and complete, regardless of whether the source has completed or not.

const intervalCount = interval(1000);
const takeFive = intervalCount.pipe(take(5));
takeFive.subscribe(x => console.log(x));

// output:
// 0
// 1
// 2
// 3
// 4

In this example, using the interval operator, it should emit a value every second, but by adding the take operator with a count of 5, it only emits 5 values and then completes. The take operator can also be used together with others such as filter, map, and mergeMap to manipulate and control the values emitted by an observable. Let's have a look at a visual example from the official documentation:

Conclusion

These are just some of the most commonly used RxJs operators, but there are many more. Understanding how they work can be very useful, especially when working on Angular applications. These operators make data handling easier and save us a lot of time. However, RxJs has a high learning curve; the first time you use it can be a bit overwhelming. That's why it's important to learn the basics well from the start. We will look at more operators in the following articles.

Other RxJs articles you may be interested in:

• Handling errors in Angular with the retry operator

• Creating a custom RxJs operator for live search

• Enhancing subscription management with takeUntilDestroy in Angular

What is Scully?

Scully is a library for Angular used to build blogs with static content. It enables you to create a solid structure for generating a blog. One of its best features is generating a static HTML file for each route. This functionality significantly enhances rendering speed and SEO.

How it works?

First of all, we need an Angular application and then install the Scully library:

ng new scully-app
npm i @scullyio/scully @scullyio/ng-lib @scullyio/scully-plugin-puppeteer

We need to add the ScullyLibModule to our app.module, Scully doesn't support bootstrapping via a standalone component, Scully needs to be bootstrapped in a module, and then you can use standalone components.

There is a schematic for this:

ng add @scullyio/init

With this command, we add the ScullyLibModule and also create the scully.[PROJECT_NAME].config.ts

From Angular 14 onwards the defaultProject property has been deprecated from the angular.json. Scully needs this property, we need to configure it:

{ "defaultProject": "[PROJECT_NAME]" }

Finally, we need to add some scripts to our package.json:

"scripts": {
    "scully": "scully",
    "scully:serve": "scully serve"
  }

How to create the content?

To create content, you can use the CLI command ng generate @scullyio/init:post --name="This is my post" or just create the file with .md

This will generate the file with 3 tags:

• title: this is the title of the blog post

• description: this is the description

• published: this is a property representing whether the blog post is published or not. It takes a true or false.

Then you just have to generate the route for your post with: npx scully

You can also add other tags if needed, such as image, date, keywords and authors. This is useful if you want to add more features to your blog.

To test the blog, simply run: npx scully:serve

Conclusion

To summarize, we have seen a brief introduction to Scully, what it is, and how it works, we need to talk more about Scully but we have a quick introduction and the first steps to building a blog with Scully, we will talk more in depth in the next articles.

The ng-conf is an annual conference focused on Angular. It brings together experts, developers, and enthusiasts to discuss the latest Angular trends and practices. Highlights include talks, workshops, and panel discussions on new features, best practices, and the future of Angular. It's a key event for staying up to date in the world of web development.

In this conference, Minko Gechev and Jeremy Elbourn, both working in the Angular team, present the news that Angular will be merged with Wiz, Google's internal framework.

What is Wiz?

Wiz is a front-end internal framework made by Google, they are used in many products, one of them are Google Drive, Google Photos, Google Maps, YouTube and Gmail.

Wiz had been used for a while, but we don't know much about them because it is not open source, we know that they have the Signals of Angular and a resumability feature.

What we can expect?

We can expect a merge between Angular and Wiz, adding all the Wiz features in Angular, mainly the resumability. With this feature Angular will increase it's performance a lot.

There's not much information at the moment, that's the official news, but I want to speculate a bit...

I think that this is going to be a huge improvement for Angular, in terms of marketing and performance, Angular it's from Google but we don't know which products they used, Angular has the potential to be used in many sites and many companies can adopt it, but Google has not done the marketing for it.

Now if Google starts this merge and starts to use Angular in more sites, Angular is going to have a big impact and it's going to be more popular. In the other site with this merge maybe Angular will change a little bit its syntax or the way that we have been developing up to now, the releases may start to do slowly.

Conclusion

It's great news that Google will do this, I hope it will be the next step for Angular and the community, but we need time to have a look at it, we will wait for the next news about it, and I will attach some references about it.

Do you like this change? Do you already know Wiz? Let me know in the comments!

ng-conf website

ng-conf video

X thread

What is a package.json?

The package.json file is generated by default for all node.js projects, when you run the command npm init automatically starts asking you a few questions about the project, then it generates the package.json file.

If you are here, you may be front-end and may know package.json because your Angular, React or Vue project.

The main purpose of this file is to contain information about the npm packages installed for the project.

A typical package.json file might look like this:

{
  "name": "my-app",
  "version": "0.0.0",
  "description": "",
  "keywords": [],
  "author": "Rubén Peregrina",
  "license": "ISC",
  "scripts": {
    //
  },
  "private": true,
  "dependencies": {
    //
  },
  "devDependencies": {
    //
  }
}

What is each field?

Let's look at each field in package.json:

• name: The name of the project, library, or package, ideally matching the repository.

• version: Version of the package.

• description: Short project description.

• main: Entry point for the project, usually index.js (for Node) or index.html (for browsers).

• scripts: Collection of project scripts.

• keywords: Relevant keywords for project searchability.

• author: Author's name, usually including contact information or a URL.

• license: Project license type, commonly ISC.

• dependencies: Packages required for production environment.

• devDependencies: Packages needed for development environment.

• homepage: URL of the project's homepage.

• repository: Repository URL (type and route).

• bugs: Object containing the project's issues page URL.

Managing dependencies

The main focus of this file is to specify dependencies, providing an efficient way of managing project dependencies.

There are several types of dependencies, let's review each of them:

dependencies: Essential project dependencies, added using npm install my-dependency

devDependencies: Dependencies used during development, added using the --save-dev flag

optionalDependencies: These are dependencies that will not cause installation failure of an application or project. NPM will ignore them if they fail. The application will still work as expected regardless of whether these dependencies are present or not. Use the --save-optional flag to install them as optional.

bundledDependencies: Used to specify an array of dependencies that should be bundled together with the package itself when it is released or distributed. If an NPM package has dependencies listed in bundledDependencies, those dependencies will be automatically installed along with the main package.

peerDependencies: Used to specify dependencies that are necessary for the package to work properly, but must be provided by the environment in which the package is installed. NPM will give a warning if some peer dependencies are missing.

Formats for specifying versions

There are several formats to specify which version you are using:

1.2.2: Exactly version 1.2.2

^1.2.2: The latest version compatible with version 1.2.2

~1.2.2: Works for versions such as 1.2.2, 1.2.3, 1.2.4,...

~1.2: Works for versions like 1.3, 1.4, 1.5,...

1.2.x: Works with any patched version of 1.2

1.x: Works for any minor version of the package’s 1 version

\>=1.2: Version 1.2 or higher. You can also use <, <= or >

1.2.2 4.1.1: Versions 1.2.2 through 4.1.1 (inclusive)

Multiple possible version ranges can be specified by separating each range with ||

Conclusion

The package.json file serves as a crucial component in Node.js projects, facilitating efficient management of dependencies and project configurations. Understanding its structure and functionality is essential for seamless project development and maintenance.

With this article you have learnt a bit more about the structure of the package.json and how it works, there are still questions in the air that we can clear up in the next articles.

Introduction

Developers must carefully consider the builder when creating a robust Angular application, as this choice significantly impacts performance and development efficiency. Angular 17 introduces three different builders, and this article will focus on a comprehensive overview to help developers make the right decisions.

Builders overview:

When you go to the new Angular website and exploring the available builders, you will come across three main types, excluding the fourth, which is dedicated to libraries. Let's look at each of them:

@angular-devkit/build-angular:browser (Webpack-Based):

This is the oldest and most commonly used builder, provide bundling client-side applications for browser use with Webpack. It provides a smooth transition to new Angular features, particularly if there are dependencies or customizations in Webpack.

@angular-devkit/build-angular:browser-esbuild (EsBuild-Based):

Similar to the Webpack-based builder, but with a significant distinctio. it use EsBuild instead of Webpack. EsBuild, being notably faster due to its build in Go, offers around a 57% speed improvement according to Angular team tests. Ideal for optimizing local development times and integrating with continuous integration workflows.

@angular-devkit/build-angular:application (SSR Builder):

Introduced as a new feature in Angular 17, this builder prioritizes efficient development, supporting both server-side and client-side rendering. Aligned with the industry trend towards server-side rendering by default, promising enhancements in initial load times and SEO.

Detailed comparison:

For a more detailed understanding, let's compare @angular-devkit/build-angular:browser and @angular-devkit/build-angular:browser-esbuild. This comparison goes further than simply choosing between Webpack and EsBuild; it examines the potential impact on development speed.

Conclusion:

The choice of Angular builder depends on your project's specific requirements and goals. The Webpack-based builder remains a solid option for many scenarios, while the EsBuild-based builder offers in terms of speed and efficiency. For projects demanding server-side rendering, the @angular-devkit/build-angular:application builder becomes to be a game changer.

Consider the aspects of your project, evaluate the builders' strengths, and make a decision based on your development needs. Remember, the key is to understand the differences of each builder and align them with your project's goals.

Angular official documentation

EsBuild comparison

What is TypeScript?

TypeScript is an additional layer that allows you to write code in your favorite editor. However, once compiled, all TypeScript code is transformed into pure JavaScript. This is important because JavaScript engines cannot interpret TypeScript code directly. It has to go through a "pre-translation" process called compilation. Only after this stage do you get clean JavaScript code ready to run in a browser. In essence, TypeScript is a special variant of JavaScript that requires a "translator" before execution.

Why use TypeScript?

The benefits of using TypeScript quickly become apparent, especially when it comes to detecting both serious and minor errors in your code. It also gives your code base a solid structure and makes it almost self-documenting. Improved autocompletion in your editor is just an added benefit.

While there are proponents and detractors, the fact remains that TypeScript is a robust tool that, once mastered, can significantly increase your productivity and code quality. In this article, we will explore some of the key benefits that make TypeScript a valuable addition to your development toolkit.

Advantages of TypeScript:

1. Static typing:

TypeScript provides static typing, allowing you to specify the type of a variable, function parameter, or object property. This helps in detecting errors during compilation, providing more robust code, and preventing runtime issues.

let age: number = 25;
let name: string = "Rubén";
let isUpdated: boolean = false;

2. Early error detection:

Static typing allows TypeScript to detect errors during the compilation process, preventing potential issues before the code runs.

let age: number = "Hello"; // Error: Incorrect data type

3. Enhanced autocompletion:

TypeScript's type system improves autocompletion in editors, offering more accurate suggestions and reducing development errors.

const fruits: string[] = ["Apple", "Banana", "Cherry"];
fruits. // You get autocompletion suggestions

4. Clear code structuring:

TypeScript allows you to define clear data types and structures in your code, making it easier to understand and maintain.

interface Person {
  name: string;
  age: number;
}

5. Type inference:

While type annotations can be added, TypeScript can automatically infer the type of a variable based on its value, making the code more concise.

let message = "Hello"; // TypeScript infers that 'message' is of type string

6. Code maintenance improvement:

Static typing and clear structures in TypeScript contribute to more maintainable code, making it easier for developers to understand and work on the project.

function greet(person: string): string {
  return "Hello, " + person;
}

Conclusion

These benefits demonstrate how TypeScript can improve software development by providing developers with stronger tools for creating robust and efficient code. We will discover more benefits in the next articles.

• Official documentation https://www.typescriptlang.org/

• Playground https://www.typescriptlang.org/play

In this article, we will explore a few features like experimental support for Material 3, signal queries, model inputs, Netlify loader, and hydration debugging support in Angular DevTools.

Experimental Material 3

In this release, Angular has experimental support for Material 3 theming in Angular Material.

The Angular team has been working closely with Google's Material Design team to make this happen.

Material 3 is the most recent version of Material Design, Google's open-source design system. Material 3 for Angular is an alternative theme that is compatible with the same Angular Material components and Sass mixins currently in use.

We will explore more about Material 3 in the following articles.

Improving signals

Since a few versions ago Angular has tried to improve reactivity.

Angular is continuously improving with each version, and developers can try out new features in developer previews. Signals is an example of this.

Signal queries and model inputs are included in this version.

Angular DevTools now supports hydration debugging

Thanks to this improvement, we can now debug Angular DOM mismatch errors.

Angular DevTools now displays the difference between the DOM from the browser and the HTML generated by the server.

Improvements for NgOptimizedImage

The NgOptimizedImage directive was an improvement that enabled us to optimize image management.

You can optimize the image loader with Netlify by using provideNetlifyLoader instead of including an image loader with srcset.

The placeholder attribute can be used to quickly add a blurred image while the actual image loads. This will automatically request a smaller version of the image, blur it, and display it until the full image is ready.

Anything else?

The Angular CLI now supports Bun's package manager and allows for control of the Vite development server prebundling. Additionally, the application builder now supports custom postcss configuration.

Conclusion

Angular continues to release new features and updates frequently, demonstrating a commitment to listening to the community's needs. The upcoming release, Angular 18 in May, is highly anticipated.

What improvements do you anticipate?

In this article, we will take a look at how Angular applications manage this and we will create a few examples to learn it. But, before we dive into that, let's cover some basics.

What is an environment?

An environment is a configuration that you can make to work with different scenarios in your application, imagine that you are developing an application and you need to have dev, test and staging environments to deal with your data base or API.

When you run a builder target, such as build, serve, and test, Angular replaces the environment default file for the one you selected.

Since Angular 14 we don't have the environments folder by default when we create a new project, we need to create it with: ng generate environments

How can I create it?

Once we have our environments folder created in src/environments, we have a default configuration environment environment.ts

This file provides us the default configuration for production, we can add different ones like staging, development.

my-app/src/environments
├── environment.development.ts
├── environment.staging.ts
└── environment.ts

The base file contains the default configuration like this:

export const environment = {
  production: true
};

The build targets use this file as a default if we do not specify one.

Now we can add more values to the environment like the APIs, and URLs that we need to use:

export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

Always check that we have our environments configurates in angular.json file like this:

"configurations": {
    "development": {
      "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.development.ts"
          }
        ],
        ...

Using specific environments in our app

Now it's the time to use our environment values in the components and services.

To ensure the build, serve and test commands use the correct file, we have to use the original environment file.

We just to import the file into our component or service like this:

import { environment } from './environments/environment';

Then we can access to values that we defined before.

Build, serve and test with a specific environment

Once we create our environment, add some values, and use these values in our components it's time to select which environment we want to use for build, serve or test our application.

Here there are a few examples:

ng build --configuration development
ng serve --configuration development
ng test --configuration development

With this commands, Angular replaces the src/environments/environment.ts file with the development specific one.

We can do the same for other environments like staging production etc.

Conclusion

Now we have more knowledge about how Angular manages the environments in our applications, and with this we can develop more complex and security applications.

This is the second part of the exploroing the Gemini API, you can take a look at the first part here.

In this article we take a deep dive into the Gemini API using the UI library Nebular for Angular, Nebular brings us a powerfull library with over 40+ components, I chose that specifically for the chat component.

The plan is to build a real time conversational chat application, the chat will be specialized in Angular and TypeScript to bring us the best answers.

How to get the API key?

Go to https://ai.google.dev/ and get your API key

Once we have the key we need to create a project to use it, in this case, we are going to use Angular.

Creating our Gemini project

First, we will create our project to be able to use Gemini, I assume you have everything you need to work with Angular installed, if not you can see it here:

https://angular.dev/tutorials/first-app

We will create our project using Angular CLI:

ng n gemini-chat

Installing and configuring Nebular

Once we have created the project, we need to install the Nebular UI library.

Here we have the documentation in case you get lost.

ng add @nebular/theme

Add the Nebular module to our main module:

@NgModule({
  imports: [
    NbThemeModule.forRoot(),
  ]
})

Include the Nebular styles in angular.json:

"styles": [
  "node_modules/@nebular/theme/styles/prebuilt/default.css",
],

Installing the Gemini library

Install the Google Gemini library using the following command:

npm i @google/generative-ai

Make sure everything goes well and check your package.json to see if the google/generative-ai is installed.

Implementing the Gemini SDK

First of all we need to implement the API, so let's generate the environments and introduce your API key:

ng g environments

Set it up:

export const environment = {
    gemini_key: "your-key"
};

Now create a service to consume the API:

ng g s services/gemini

We will use the Gemini SDK to create an instance of Google AI with the key and generate a model called 'gemini-pro'.

The intended use of the model is based on a prompt. This prompt tells Gemini how to answer our questions.

import { GoogleGenerativeAI } from '@google/generative-ai';
import { environment } from '../../environments/environment';

generativeAI = new GoogleGenerativeAI(environment.gemini_key);
model = this.generativeAI.getGenerativeModel({ model: 'gemini-pro' });

We select answers from Angular and TypeScript experts.

  prompt = 'You are an Angular and TypeScript expert, answer the questions providing the best examples including code'

This is the main logic of our application and it's the way to connect with Gemini, we used a try catch to avoid errors, then we check if we have the text and start building our object for the Gemini SDK, we need to add to our model that we generated before the prompt and the question that we will get the response and in this case we just need to get the text object, we return that to use after in our component.

  async generate(textInput: string) {
    try {
      if (textInput) {
        const parts = [{text: this.prompt,},{ text: textInput }];

        const modelResult = await this.model.generateContent({
          contents: [{ role: 'user', parts }],
        });
        const response = modelResult.response;
        const text = response.text();
        return text;
      }
    } catch (e: any) {
      return 'An error has ocurred';
    }
    return 'Ann error has ocurred';
  }

Creating the chat interface with Nebular

Nebular is a customizable open source Angular UI library that contains over 40 UI components.

It has a chat component with everything you need to build a chat application, it's all done so we just need to specify the information.

We need to import all the Nebular modules that we will use, in this case the most important ones are NbChatModule and NbLayoutModule, also we add the NbCardModule and NbSpinnerModule to add the spinner animation while we wait for the API response.

import { NbCardModule, NbChatModule, NbLayoutModule, NbSpinnerModule, NbThemeModule } from '@nebular/theme';
import { provideAnimations } from '@angular/platform-browser/animations';

@NgModule({
    ...
  imports: [
    ...
    NbChatModule,
    NbLayoutModule,
    NbCardModule,
    NbSpinnerModule
  ],
  providers: [provideAnimations()],
})

Don't forget to add the provideAnimations() in the providers to add the smooth animations while we are chatting.

Let's start with the template, we will add an nb-card to have the spinner feature while we are chatting, the nb-chat to see the conversation and the nb-chat-form to have the input message:

<nb-layout>
  <nb-layout-column>
    <nb-card [nbSpinner]="isLoading" nbSpinnerMessage="Loading..." nbSpinnerSize="giant" nbSpinnerStatus="success">
    <nb-chat title="Gemini chat" [status]="'success'" size="large">
      @for( msg of messages; track msg.id){
        <nb-chat-message
        [type]="msg.type"
        [message]="msg.text"
        [reply]="msg.reply"
        [sender]="msg.user.name"
        [date]="msg.date"
        [avatar]="msg.user.avatar"
      >
    </nb-chat-message>
    }
    <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true"> </nb-chat-form>
    </nb-chat>
    </nb-card>
  </nb-layout-column>
</nb-layout>

Let's add the logic to understand everything, we have to create the isLoading variable and the messages variable in this variable we will have our conversation, starting with the initial message.

  isLoading = false;
  messages: any[] = [
    {
      text: 'Hi! I\'m Gemini, Angular and TypeScript expert, how can i help you?',
      date: new Date(),
      reply: false,
      user: {
        name: 'Gemini',
        avatar: 'https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/robot-face.png',
      },
    },
  ];

Do not forget to add our Gemini service

import { GeminiService } from './services/gemini.service';
geminiService = inject(GeminiService);

Then, when the user asks a question we need to add their message to our messages array, call our gemini service and get the response, then add the new message to our array.

  async sendMessage(event: any) {
    this.isLoading = true;
    this.messages.push({
      text: event.message,
      date: new Date(),
      reply: true,
      type: 'text',
      user: {
        name: 'Rubén Peregrina',
        avatar: 'https://cdn-icons-png.flaticon.com/512/5556/5556468.png',
      },
    });

    const botReply = await this.geminiService.generate(event.message);

    this.messages.push(    {
      text: botReply,
      date: new Date(),
      reply: false,
      user: {
        name: 'Gemini',
        avatar: 'https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/robot-face.png',
      },
    },
    );
    this.isLoading = false;
  }

The Nebular chat need this structure to work, the text is the message, the date is the date that will be displayed in our message, reply it's to know who is texting and finally the user, we can add the name and the avatar to display.

Conclusion

Finally we have our fully functional chat working with Nebular and the Gemini SDK, in this case we add a prompt to get expert answers about Angular and TypeScript.

This is the second part of the exploring the Gemini API, you can take a look at the first part here.

• Nebular documentation

• Gemini documentation

Angular 17.1 introduces Input Signals as a developer preview, offering developers an alternative to the traditional @Input decorator. Signal Inputs provide a new approach to handling component input values, allowing for increased flexibility and reactivity.

The primary syntax shift comes with the introduction of the input() function from @angular/core, which creates input values received as signals. Let's look at the three available flavours of signal inputs:

Default value Signal:

Resolves to a Signal of a specific type.

export class SampleComponent {
  name = input<string>('Angular');
}

The 'name' signal can be accessed directly, enabling dynamic updates without the need for ngOnInit or ngOnChanges.

Optional value Signal:

Requires a generic type and results in a union type containing undefined.

export class OptionalComponent {
  value = input<number>(); // number | undefined
}

This allows for optional inputs, accommodating scenarios where the value may or may not be present.

Required value Signal:

Expects a generic type but does not include undefined in the union type.

export class RequiredComponent {
  firstName = input<string>(); // string | undefined
  lastName = input.required<string>(); // string
}

The 'lastName' signal ensures that a value is provided, throwing a runtime error if accessed before initialization.

In addition, Angular 17.1 supports transformation functions for type mapping and parameter binding from the router, increasing the versatility of signal inputs.

Conclusion

Angular 17.1's Signal Inputs mark a significant evolution in the way we handle component inputs. Using the input() function, developers can embrace a more reactive and flexible approach to managing input values. The three flavors – default, optional, and required – cater to a variety of use cases, providing a seamless transition from the traditional @Input decorator. As Angular continues to innovate, Signal Inputs open up new possibilities for cleaner, more dynamic component architectures.

As a beginner, it's easy to feel overwhelmed when diving into a new framework like Angular, but fear not, we're here to guide you! In this post, we'll break down a step-by-step roadmap that I wish I had when I started my Angular programming journey. Keep reading to discover essential tips, tricks, and guides that will set you apart in the world of Angular development.

Prerequisites: Before we dive into Angular, it's essential to ensure you have a solid foundation in JavaScript. If you're not familiar with JavaScript basics, take some time to acquaint yourself with the fundamentals.

Understanding Angular: Angular, as a robust web application framework, supports full-stack development. Its architecture is centred around TypeScript and the concept of components, which are fundamental to creating reactive single-page applications (SPAs). Understanding these components and how they interact is key to mastering Angular.

By following these steps, you'll build a strong foundation in both TypeScript and Angular, setting the stage for a successful journey into the dynamic world of web development.

Before starting, I gathered all the useful documentation links that I found and recommend checking them out.

Learn TypeScript basics

Angular is constructed with TypeScript, a strongly typed, object-oriented, and compiled programming language that extends JavaScript. To navigate the world of Angular effectively, it's crucial to grasp the basics of TypeScript. This statically typed superset of JavaScript not only enhances code reliability and maintainability but is also the backbone of Angular development.

• Structural Typing

• Type Interface

• Union Types

• Built-in Types

• Type Guards

• Generics

• Decorators

• Utility Types

TypeScript playground for practice

Learn Angular CLI

The Angular CLI, a command-line interface tool, streamlines the initiation, development, scaffolding, and maintenance of Angular applications directly from a command shell. To install the latest Angular CLI, execute the following command:

npm install -g @angular/cli

Create a new project:

ng new my-app

One of the common commands if you need help:

ng --help
ng generate --help
ng build --help

Quick guide for generating components in Angular:

Also, you can add flags at the ends of the command to add features, here are some examples:

I recommend learning Angular file structure: How the components are organized like in modules, and their components, services, etc.

Lifecycle Hooks

A component's lifecycle in Angular begins when the component class is instantiated and the view, along with its child views, is rendered. This lifecycle includes change detection, where Angular monitors changes in data-bound properties, updating both the view and the component instance. The lifecycle concludes when Angular destroys the component instance, removing its template from the DOM. Similar to components, directives follow a lifecycle involving creation, updates, and destruction during execution.

To interact with these lifecycles, your application can utilize lifecycle hook methods, which allow you to handle key events such as initialization, change detection, response to updates, and cleanup before deletion. The essential Angular lifecycle hooks are:

See more about the Angular's lifecycle hooks here

Templates

A component, comprising a TypeScript class, an HTML template, and a CSS style sheet, governs a designated area of the screen known as a view. The TypeScript class orchestrates the interaction between the HTML template and the resulting DOM structure, while the style sheet dictates the component's appearance.

In an Angular application, distinct components are employed to define and manage various facets of the application, there are a few things that you need to know before continuing:

• Interpolation: Involves embedding expressions into marked-up text using double curly braces {{ }} as delimiters. Angular then substitutes currentCustomer with the string value of the corresponding component property.

• Property binding: Enables the assignment of values to properties of HTML elements or directives. By enclosing the element's property in square brackets [], Angular interprets the right-hand side of the assignment as a dynamic expression.

• Template statements: Are employed in HTML to respond to user events, facilitating actions like displaying dynamic content or submitting forms. By enclosing the event in (), Angular evaluates the right-hand side of the assignment as one or more template statements linked together with semicolons (;).

• Binding(data, props, attrs, events): In Angular templates, bindings establish a dynamic link between the view and the model, ensuring synchronization.

  • Property Binding: Sets values for properties of HTML elements or directives.

  • Attribute Binding: Directly sets values for attributes of HTML elements.

  • Event Binding: Listens for and responds to user actions, like keystrokes, mouse movements, clicks, and touches.

  • Two-Way Data Binding: Combines property and event binding, facilitating data sharing between components.

• Reference variables: Enable the utilization of data from one section of a template in another. These variables can reference a DOM element within a template, component, or directive. To declare a template reference variable, employ the hash symbol, #, in the template.

• @Input() @Output(): facilitate communication between a child and its parent component in Angular. With @Input(), a parent component can update data in the child component, while @Output() allows the child to send data to the parent component.

Some examples:

// Render the title propertu
<p>{{ title }}</p>
// Render the image with the url property
<img alt="item" src="{{ itemImageUrl }}">
// Call deleteHero function when click button
<button type="button" (click)="deleteHero()">Delete hero</button>
// Call the function onSubmit with form parameteres
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
// Disabled o enabled button by condition isUnchanged
<button type="button" [disabled]="isUnchanged">Disabled Button</button>
// Shareing data between child and parent component
<app-item-detail [childItem]="parentItem"></app-item-detail>
// Two way data binding between child and parent component
<app-sizer [(size)]="fontSizePx"></app-sizer>

Take it easy to understand all of the concepts, I know the first impression could be difficult. This documentation maybe could be useful

Routing

Angular's routing empowers users to construct a single-page application featuring multiple views and seamless navigation between them. This enables users to switch between views without sacrificing the application state and properties.

Here is a short example of how can configure routes:

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'detail/:id', component: ... },
    { path: 'about', component: ... },
    { path: 'items', // lazy load a module
    loadChildren: () => import('./items/
    items.module').then(m => m.ItemsModule)}
]);

We need to put the router-outlet element in the HTML to say Angular where we want to render our routes:

<router-outlet></router-outlet>

We use the control navidation to link our routes inside of our app like this:

<a routerLink="/home">
<a [routerLink]="[ '/detail', user.id]”>

Learn the basics of RxJS

RxJS is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs.

• Observer Pattern: The observer pattern is a software design approach where a subject object keeps a list of dependents (observers) and automatically informs them of any state changes by calling one of their methods. In Angular, this pattern is employed through Observables, where objects subscribe to them using the subscribe method and respond when the observable undergoes any relevant action.

• Observable lifecycle: An observable, functioning as a wrapper for a data stream, enables message passing within your application. However, it becomes meaningful only when an observer subscribes to it. The observer, consuming data emitted by the observable, continues to receive values until either the observable completes or the observer unsubscribes. This asynchronous process allows for diverse operations like updating the user interface or handling JSON responses.

  The observable life cycle consists of four stages: creation, subscription, execution, and destruction.

• RxJS vs Promises: Eager vs. Lazy, Asynchronous Nature, Data Delivery.

Learn how to use RxJS operators

RxJS is primarily valued for its operators, which, while built on the foundation of Observables, play a pivotal role. These operators serve as crucial components, enabling the seamless composition of intricate asynchronous code in a declarative fashion.

There are two kinds of operators:

Pipeable Operators, like filter(…) and mergeMap(…), can be applied to Observables using the syntax observableInstance.pipe(operator()). These operators do not alter the existing Observable instance; instead, they create a new Observable. Subscribing to the new Observable also subscribes to the original one.

Piping involves chaining these operators together, enhancing readability. The .pipe() method of Observables achieves this concisely:

codeobs.pipe(op1(), op2(), op3(), op4());

Creation Operators are standalone functions used to create new Observables with predefined behaviors or by combining other Observables. For example, the interval function takes a number as an input argument and produces an Observable:

const observable = interval(1000);

These operators are distinct from pipeable operators and will be explored in more detail in a later section.

Are there more?

Yes, this is only the basics, with this you are ready to create your first Angular application, create some components, link to a routes and render some information, but this is just the beginning, Angular has a lot more, here are a few more concepts that you need to know to take all the Angular advantages:

• Forms

• Pipes

• Directives

• Guards

• Interceptors

• Resolvers

• HttpClient

• Testing

• Signals

• Deferrable Views

Conclusion

Maybe from the outside Angular looks like another framework, but in my opinion, it's not it. Angular it's a platform more than a framework, it's a platform that offers you all the necessary things to build great quality applications, most of the time you don't need to install third-party libraries to do some things, Angular has many features like SRR, PWA, great forms, good security etc.

Many themes have remained to talk about in this article, maybe I can write another article with more foundation, let me know in the comments.

Information that may interest you

• https://rubenperegrina.com/series/angular

• https://angular.io/docs

• https://angular.dev/overview

• https://angular.dev/tutorials/learn-angular

• https://angular.dev/tutorials/first-app

• https://roadmap.sh/angular

We've all seen this type of import in our files:

import { Something } from '../../../../../../../something.ts';

You can work around this by using aliases in the tsconfig.json attribute via paths:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "@components/*": ["src/app/components/*"],
      "@routes/*": ["src/app/routes/*"],
      "@shared/*": ["src/app/shared/*"],       
    }
  }
}

You can then use these aliases to import your resources:

import { ButtonComponent, CardComponent } from '@components';
import { formatText } from '@shared/utils/formatting';
import { converting } from '@shared/utils/converting';

Conclusion

You should do this for several reasons:

• It is much easier to read than relative paths.

• This is useful for refactoring: if your code changes location, the import stays the same.

• IDEs can import directly from aliases

How was it done before?

Once we have configured our route file with the parameters we want to pass to each of the URLs, we need to get those parameters into the component.

Let's look at an example:

import { ActivatedRoute } from "@angular/router";
export class UserComponent implements OnInit {
  activatedRoute = inject(ActivatedRoute);
  ngOnInit(): void {
    let paramId = this.activatedRoute.snapshot.paramMap.get('id');
  }
}

As you can see, first we need to import and inject the ActivatedRoute to use it, and then we need to obtain the param from ActivatedRoute, in this example the param calls id

How is it done now?

First of all, we need to add the route with the parameter that we need to send, this step is the same in the older way and in the new way.

export const routes: Routes = [
    {
        path: 'user/:id',
        loadComponent: () =>
            import('./user/user.component').then(c => c.UserComponent)
    }
];

For this example, we created a UserComponent and added an id in the URL.

To obtain parameters through URL using inputs we need to import the withComponentInputBinding() in our app.config.ts

import { withComponentInputBinding } from '@angular/router';
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withComponentInputBinding())]
};

Just import the withComponentInputBinding from angular/core and add to the providers, now Angular knows that we want to use input properties to read route parameters.

If you are still using modules in your application set bindToComponentInputs to true in your AppRoutingModule

In our component just need to add an input with the name of our parameter like this:

@Input() id!: string;

If we need to change the name and don't use the same parameter name we can rename the input like this:

@Input('id') paramId!: string;

Now we can obtain our parameter in the ngOnInit function without using the activatedRoute, we just need to use our variable from the input

  ngOnInit(): void {
    console.log(this.id);
  }

Using the new way we don't need to import and inject the activatedRoute and we write less code.

Angular automatically reads the route parameter and assigns it to the input property.

Remember that if you want to access the value of the parameter in the constructor, it will be empty, you need to access it in the ngOnInit.

Conclusion

In this article we have discovered a simple way to collect parameters from the URL, saving us code in a very simple way, I think that from now on we will leave behind the activatedRoute to do it this way.

After a year with ChatGPT among us, it seems that the first real competition is coming out.

Not only have they presented Gemini, as it's called, but from day one they've opened up the API to use it, they've provided a free API key for development purposes, which is great!

In this article, we are going to test the capabilities of Gemini using its API.

How to get the API key?

Go to https://ai.google.dev/ and obtain your API key

Once we have the key we need to create a project to use it, in this case, we are going to use Angular.

Creating our Gemini project

First, we will create our project to be able to use Gemini, I assume you have everything you need to work with Angular installed, if not you can see it here:

https://angular.dev/tutorials/first-app

We will create our project using Angular CLI:

ng n google-gemini-pro-ai

Installing Gemini library

Install the Google Gemini library with the following command:

npm i @google/generative-ai

Make sure everything goes well and check your package.json to see if the @google/generative-ai is installed.

Using the Gemini API

The last and most important part, inside our component where we will display the results, we create a new GoogleGenerativeAI, is imported from the library we have installed.

import { GoogleGenerativeAI } from '@google/generative-ai';
import { environment } from '../environments/environment';
generativeAI = new GoogleGenerativeAI(environment.gemini_api_key);

GoogleGenerativeAI gets the API key, in this case, we have set it in the environments.

You can generate your own environments with ng g environments

Then we have to choose the model we are going to use, we choose it by calling getGenerativeModel on our GoogleGenerativeAI that we have generated before, I expect to get a model, so we choose gemini-pro.

model = this.generativeAI.getGenerativeModel({ model: 'gemini-pro' });

In this example I have added an input so that the user can add their prompt, the result will be displayed on the screen.

  <h1> Google Gemini pro </h1>
  <label for="prompt">Type your prompt</label>
  <br><br>
  <input id="prompt" [(ngModel)]="prompt" placeholder="Enter your prompt here" />
  <button (click)="generate()" [disabled]="!prompt">Generate!</button>
  <br><br>
  @defer (when result) {
    {{ result }}
  }
  @placeholder {
    <span>Waiting for your prompt</span>
  }
  @loading(minimum 1s) {
    <span>Loading...</span>
  }

When the user adds the prompt and clicks the generate button, it calls the function that calls the Gemini API.

  async generate() {
    try {
      const result = await this.model.generateContent(this.prompt);
      const response = await result.response;
      this.result = response.text();
    } catch(e: any) {
      this.result = e;
    }
  }

Simply with our model created, we need to call generateContent passing the user prompt, it will return the result or an error, we control this with the new defer blocks.

Conclusion

That's all, with just a few lines we can start using the Gemini Pro API, this is a simple example where we have just used text with a simple answer, in the following articles I will make examples with data stream to make a chat, answers with images and everything that this API allows us to do.

Nearly all mid to large-sized applications require data management to ensure accessibility across all pages, with features for reading, adding, and editing.

Angular, being a robust framework, offers tools and libraries for streamlined state management. In this post, we will explore well-known state management solutions, customized to suit particular requirements in Angular applications.

1. Stateful Services (Subjects)

Using the power of Subjects, Stateful Services provide a simple way to manage state within Angular. By exploring this way, developers can easily manage the state of the application just using RxJS, you don't need to install any third-party libraries and easily to use but has some limitations instances others.

Example:

@Injectable({
  providedIn: 'root',
})
export class StatefulService {
  private stateSubject = new Subject<string>();
  state$ = this.stateSubject.asObservable();

  updateState(newState: string) {
    this.stateSubject.next(newState);
  }
}

export class MyComponent implements OnInit {
  currentState: string;

  constructor(private statefulService: StatefulService) {}

  ngOnInit() {
    this.statefulService.state$.subscribe((state) => {
      this.currentState = state;
    });
  }

  updateState() {
    this.statefulService.updateState('New State');
  }
}

2. NgRx

NgRx Global Store is a robust state management solution inspired by Redux. It centralizes state and actions, providing a predictable and scalable approach to managing application data.

We can use it globally in our application or manage every single component or module with them.

If you are using Signals in your application you can use NgRx SIgnals Store for better performance.

Example:

// Actions
export const updateMessage = createAction('[App] Update Message', props<{ message: string }>());

// Reducer
const initialState = { message: '' };
const appReducer = createReducer(
  initialState,
  on(updateMessage, (state, { message }) => ({ ...state, message }))
);

// Store
export const appStore = createFeatureSelector('app');
export const selectMessage = createSelector(appStore, (state) => state.message);

// Component
export class MyComponent {
  message$ = this.store.pipe(select(selectMessage));

  constructor(private store: Store) {}

  updateMessage() {
    this.store.dispatch(updateMessage({ message: 'New Message' }));
  }
}

3. NGXS

NGXS is a state management library that simplifies complex state management scenarios. It combines the simplicity of Redux with Angular's reactive approach, providing a convenient solution for developers.

// State
export interface AppStateModel {
  message: string;
}

@State<AppStateModel>({
  name: 'app',
  defaults: { message: '' },
})
@Injectable()
export class AppState {
  @Selector()
  static getMessage(state: AppStateModel) {
    return state.message;
  }

  @Action(UpdateMessage)
  updateMessage({ patchState }: StateContext<AppStateModel>, { message }: UpdateMessage) {
    patchState({ message });
  }
}

// Action
export class UpdateMessage {
  static readonly type = '[App] Update Message';
  constructor(public message: string) {}
}

// Component
export class MyComponent {
  message$ = this.store.select(AppState.getMessage);

  constructor(private store: Store) {}

  updateMessage() {
    this.store.dispatch(new UpdateMessage('New Message'));
  }
}

This example uses NGXS to define a simple state with a message. It also includes an action to update the message and a selector to access the message from the component. Remember to install and configure NGXS in your application before using this code.

There are more options like:
- State adapt
- RxAngular
- MiniRx
- Ngx Signal State
- Akita
- Elf
- Custom state management

Conclusion

Choosing the appropriate state management option for your Angular app relies on the needs of your project. Whether you prefer the easy Stateful Services or the adaptable NgRx, grasping these tools helps Angular developers create strong and sustainable applications.

This article gives a quick introduction to state management options in the Angular ecosystem. Try out these tools, analyze their benefits, and select the one that fits your project's requirements best.

VSCode snippets for NgRx

Increase efficiency with Angular CLI

• Angular CLI is essential for project creation and management

• It provides a standardized, efficient way to bootstrap, develop, test, and deploy Angular applications.

Here are a few examples:

# Generate a new service
ng generate service my-service
# Run unit tests
ng test
# Build the application for production
ng build --prod
# Add a dependency (e.g., Angular Material)
ng add @angular/material
# Update Angular CLI to the latest version
ng update @angular/cli
# Add Angular Routing to the project
ng generate module app-routing --flat --module=app
# Serve the application on a different port
ng serve --port 4201
# Create a production build with AOT compilation
ng build --prod --aot
# Run end-to-end (e2e) tests
ng e2e

Build maintainable code by aplying single responsibility principle

• Each component, service, or module should have a single responsibility

• The single responsibility principle promotes maintainability, readability, and reusability, ensuring an understandable and debuggable code base.

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-user',
  template: `
    <div>
      <h2>User Details</h2>
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  `,
})
export class UserComponent {
  @Input() user: UserInfo;
}
export interface UserInfo {
  name: string;
  email: string;
}

Improve the performance with OnPush change detection

• Use ChangeDetectionStrategy.OnPush to optimize component change detection.

• OnPush reduces the number of checks, significantly improving performance, especially in larger applications.

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-user',
  template: '<div>{{ user.name }}</div>',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserComponent {
  user = { name: 'Rubén Peregrina' };
}

Implement Smart Component Architecture

• Use an intelligent component architecture for improved maintainability and scalability.

• This architecture improves code organization, making it easier to understand and debug.

import { Component } from '@angular/core';
@Component({
  selector: 'app-user-container',
  template: `
    <h2>User Management</h2>
    <app-user-details [selectedUser]="selectedUser"></app-user-details>
  `,
})
export class UserContainerComponent{
  selectedUser: User = [name: 'Rubén', email: 'ruben@hashnode.com'];
}

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-user-details',
  template: `
    @if (selectedUser){
      <h3>User Details</h3>
      <p>Name: {{ selectedUser.name }}</p>
      <p>Email: {{ selectedUser.email }}</p>
    }
  `,
})
export class UserDetailsComponent {
  @Input() selectedUser: UserInfo;
}

Lazy loading for improved performance

• Implement lazy loading for feature modules to load them on demand.

• Lazy loading reduces the initial bundle size and speeds up the initial load time of the application.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module')
    .then(m => m.DashboardModule),
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Conclusion

Here are some examples of how can you optimize and improve your Angular application, you can increase your Lighthouse stats by applying these examples.