DEV Community: Shahar Kazaz

Remove Redundant Subscriptions in Angular with @jsverse/letify

Shahar Kazaz — Wed, 30 Oct 2024 15:58:49 +0000

In modern web applications, performance and maintainability are key.
✨ Letify is here to help you remove redundant subscriptions in your Angular templates by automatically identifying these duplications and replacing them with @let variable declarations.

A Quick Reminder: The Async Pipe and Its Pitfall

The async pipe is a widely used feature in Angular for handling observables and promises in templates. However, it has a drawback: it creates a new subscription each time it's used.

<p>{{ (data$ | async).name }}</p>
<p>{{ (data$ | async).description }}</p>

In this example, data$ | async is used twice, leading to multiple subscriptions to the same observable. This can degrade performance, especially in large applications.

Before Angular v18.1, solutions to this problem included capturing the value in an ngIf statement or using third-party libraries like @rx-angular/template with its rxLet directive.

With the introduction of @let in Angular v18.1, you can now manage async data more efficiently by creating a single subscription and reusing it throughout your template:

@let data = data$ | async;
<p>{{ data.name }}</p>
<p>{{ data.description }}</p>

But, there's still the challenge of refactoring your existing codebase and keeping those redundant subscriptions away in the future. That's where letify comes in!

What is `@jsverse/letify`?

The @jsverse/letify CLI tool helps developers automatically detect and optimize redundant async pipe subscriptions in their templates. It scans your HTML files, identifies duplicate subscriptions, and replaces them with the @let directive to enhance performance.

Using letify is straightforward. Once installed, you can run it against your project files to generate a report:

npm i -D @jsverse/letify
npx letify [analyze|fix] 'src/app/**/*.html' ...

Analyze: Scans your templates and highlights opportunities for refactoring.
Fix: Automatically replaces occurrences where possible.

You can even integrate letify into your CI pipeline or Git hooks to catch these issues before code is committed.

✨Conclusion

Angular's new features continuously enhance app performance and readability. Because of asyncpopularity, duplicated subscriptions are common. letify is your Swiss army knife to easily tackle this issue and optimize your templates.

Join the ️@jsverse Community

I'm excited to see how letify can enhance your Angular apps! Be sure to check out the @jsverse/letify repository, give it a star, and follow the jsverse organization for more updates and tools that will help you build better apps.

Remove Redundant Subscriptions in Angular with @jsverse/letify

Shahar Kazaz — Wed, 30 Oct 2024 15:58:49 +0000

A Quick Reminder: The Async Pipe and Its Pitfall

The async pipe is a widely used feature in Angular for handling observables and promises in templates. However, it has a drawback: it creates a new subscription each time it's used.

<p>{{ (data$ | async).name }}</p>
<p>{{ (data$ | async).description }}</p>

In this example, data$ | async is used twice, leading to multiple subscriptions to the same observable. This can degrade performance, especially in large applications.

Before Angular v18.1, solutions to this problem included capturing the value in an ngIf statement or using third-party libraries like @rx-angular/template with its rxLet directive.

With the introduction of @let in Angular v18.1, you can now manage async data more efficiently by creating a single subscription and reusing it throughout your template:

@let data = data$ | async;
<p>{{ data.name }}</p>
<p>{{ data.description }}</p>

But, there's still the challenge of refactoring your existing codebase and keeping those redundant subscriptions away in the future. That's where letify comes in!

What is `@jsverse/letify`?

Using letify is straightforward. Once installed, you can run it against your project files to generate a report:

npm i -D @jsverse/letify
npx letify [analyze|fix] 'src/app/**/*.html' ...

Analyze: Scans your templates and highlights opportunities for refactoring.
Fix: Automatically replaces occurrences where possible.

You can even integrate letify into your CI pipeline or Git hooks to catch these issues before code is committed.

✨Conclusion

Join the ️@jsverse Community

Thank you Faker. Now it’s Time to Move On.

Shahar Kazaz — Mon, 24 Jan 2022 21:36:37 +0000

TL;DR — Falso is a modern, tree-shakeable, well-documented replacement for Faker.js

You probably know what happened to Faker.js around two weeks ago.

In collaboration with Netanel Basal, I created a new mock data generator lib to provide a quick, suitable replacement for those relying on Faker (including us).

Meet Falso 🎩

✅ 160+ Functions ( at the time of writing)
✅ Tree Shakable
✅ Fully Typed
✅ Entity Functions
✅ Well documented with live previews
✅ Single and Array Results

There was a lot of community effort put into building this library. In just two weeks, we accomplished:

✨ A whopping 1.6k Github Stars
💪 59 Merged pull requests
🎁 58 New Features

I want to thank everyone who took part in this, you rock!

Give Falso a try and let me know what you think 🌟

ngneat / falso

All the Fake Data for All Your Real Needs 🙂

All the Fake Data for All Your Real Needs 🙂

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.

✅ 164 Functions
✅ Tree Shakable
✅ Fully Typed
✅ Entity Functions
✅ Single and Array Result

🤓 Learn about it on the docs site
🔥 Run it on Stackblitz

Installation

npm i @ngneat/falso
yarn add @ngneat/falso

Usage

import { randEmail, randFullName } from '@ngneat/falso';

const user = { email: randEmail(), name: randFullName() };

const emails = randEmail({ length: 10 });

Setting a Randomness Seed

You can set your own seed if you want consistent results:

import { rand, seed } from '@ngneat/falso';
seed('some-constant-seed');

// Always returns 2
rand([1, 2, 3, 4, 5]);

…

View on GitHub

See the docs:

We’re just getting started.

What’s Next?

🌐 Locale support
💪 More Generators
🎯 Improve data accuracy

You are welcome to contribute! Let us build the next generation of mock data together!

For those looking to contribute for the first time to an open-source, Falso is an excellent choice!

Introducing Variabless - JS & CSS A Match Made in Heaven

Shahar Kazaz — Sun, 01 Aug 2021 11:36:28 +0000

Thanks goes to Rubi Deri for this awesome logo 🎉

We have all been there. We start a new project, create our theme using CSS variabless, and then the worst; We add third-party libraries that expose a JS API to alter their style. What do we do now? How do we share our lovely theme with those libraries?

No worries. We got you covered! Let's see the magic of Variabless:

One Single Source of Truth

Instead of managing two sets of theme definitions, one in CSS and one in JS, Variabless will convert your Variabless definitions file to CSS variables or properties, allowing you to use those values in JS and CSS files:

You can try it live in the Variabless playground

Now we can pass our theme to our 3rd party lib and use it anywhere in our JS code:

Or use it in our CSS files just like any other variable:

Styles Generator

Variabless allows you to easily create utility classes or any selector you wish referencing the variable’s value. For example, let’s add font-size classes:

As easy as it gets 🔥

Use the Power of JS

Variabless uses a JS config file. It means you can leverage JavaScript to prevent repetitions and keep your config clean 🧼

Let’s take a look at the following configuration. We want to define several font sizes:

Using JS we can easily replace that with a cleaner more scalable option:

Bonus: since Variabless uses JS and CSS files you get your IDE’s autocompletion 🎉

Getting Started

Installation

Install the Variabless package via yarn or npm by running:

npm i -D @ngneat/variabless
yarn add -D @ngneat/variabless

Usage

There are two ways you can use Variabless via CLI or Webpack plugin.

The recommended approach is with the Webpack plugin since it provides you with the ability to add/remove variables during development, while you’re working on the project and see the results as you make the changes.

All you have to do is add the VariablessWebpackPlugin to your plugins list:

You can find information on using it via CLI here.

Include the generated file by Variabless in your styles:

Add the generated file to your .gitignore file, there is no need to track it.

For more information visit the variabless repo, docs and playground:

jsverse / variabless

JS & CSS - A Match Made in Heaven 💎

Variabless allows you to manage application-wide CSS styles and variables in a single source of truth manner Variabless will convert a JS definitions file to CSS variables or classes, allowing you to use those values in JS and CSS files.

Why Variabless?

Since introducing CSS variables, supporting themes in your app, and customizing styles became much more convenient While developing several apps, we noticed a reoccurring need. We need to refer to the theme and variables in our TS files for various reasons. For example, we are passing colors and fonts to libraries such as highcharts and grid.

At that point, it was either managing two sets of theme definitions, one in CSS and one in TS, or found a solution to centralize our theme and make it accessible for both; thus, Variabless was born.

Features

✅ Convert JS to CSS variables
✅ Single Source of Styling Across the App…

View on GitHub

This library was created by myself and @netanelbasal with ❤️

Writing Custom Git Hooks With NodeJS

Shahar Kazaz — Fri, 17 Jan 2020 13:54:39 +0000

Git hooks are a useful tool, especially when working in large teams.
They can help us apply code style and linting standards to our staged files.

In the article, we'll write a few powerful Javascript git hooks that will help us manage our codebase and have a smoother developing experience.

Running The Script

We are going to run our hooks with the help of Husky 🐶.
After we installed Husky the next thing we need to do is run our node script.
Let's add our script to the package.json scripts section, and use husky to call it:

"scripts": {  
  "hooks:pre-commit": "node ./hooks/pre-commit.js",
  "hooks:pre-push": "node ./hooks/pre-push.js"
},
"husky": {
  "pre-commit": "npm run hooks:pre-commit",
  "pre-push": "npm run hooks:pre-push"
}

That's pretty much it, now let's see some useful implementations of
pre-commit and pre-push hooks.

Exec.js

I created an exec.js helper function for my hooks scripts, that wraps shelljs's exec function.
The exec function spawns a shell then executes a given command within that shell:

Pre-Commit 📦

1. Branch Names Convention

2. Forbidden Tokens ✋

Who hasn't forgotten to remove a debugger? or an fdescribe in a test? no more!

Pre-Push 🚀

1. Auto Sync Master

We noticed that developers often forget to update their branches regularly from the remote.

This is a simple but important hook that updates your local branch from the remote master.

2. Forbidden Branches ✋

There are brunches that we don't want their commits ending up in master
such as a staging branch.

We'll make a commit in these branches that will act as a "flag" 🚩.
Before pushing to the remote we will verify that this commit isn't part of the branch being pushed (we will obviously remove this code in the staging branch).

Takeaways

We saw some useful examples for using git hooks, and how easy you can use Husky and NodeJS to apply policies and prevent bad commits.

Now you can customize these hooks in the best way that suits your project 🥳

Have You Tried Transloco Yet? 🌐

ng-neat introduces Transloco, the internationalization (i18n) library for Angular. It allows you to define translations for your content in different languages and switch between them easily in runtime.

It exposes a rich API to manage translations efficiently and cleanly. It provides multiple plugins that will improve your development experience.
We/I highly recommend you read more about it and check it out!

Introducing Transloco: Angular Internationalization Done Right

Translation Files Validation in Angular with Transloco And Husky

Lazy Load Translation Files In Angular Using Transloco

Translation Files Validation in Angular with Transloco And Husky

Shahar Kazaz — Tue, 15 Oct 2019 05:39:48 +0000

Originally published at shahar.kazaz

When working on an enterprise application and with multiple teams, it’s often the case where we have merge conflicts with one of the translation files.

In this case, we can accidentally break the file by forgetting an extra comma, for example:

{
  "key": "",
  "keyTwo": "", <====
}

Which leads to an invalid JSON. In most cases, the developer doesn’t notice this change and pushes the code to production or staging environments, and brokes that app.

Here in Transloco, we take such things seriously, and to prevent this, we created a linter that will verify the translation files before they pushed.

In addition to that, it will also check that it does not contain duplicate keys.
Let’s see how we use it:

Set up husky and lint-staged
Run npm i @ngneat/transloco-validator --save-dev

Update your package.json file:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/assets/i18n/*.json": ["transloco-validator"]
  }
}

This will make sure no one accidentally pushes an invalid translation file.

If you liked this post, please 👏🏻 and share it!

Here is some more great content about Transloco:

Introducing Transloco: Angular Internationalization Done Right

Lazy Load Translation Files In Angular Using Transloco

Help the Translator by Using Transloco: The internationalization (i18n) library for Angular

Lazy Load Translation Files In Angular Using Transloco

Shahar Kazaz — Fri, 11 Oct 2019 07:08:34 +0000

Originally published at shahar.kazaz

In this article, we will learn how we can use the internationalization library for Angular Transloco to lazy load translation files in our Angular application. There are two advantages to this approach. First, we make our initial bundle smaller, which will improve the application load time. Second, we are less exposed to merge conflicts.

Let's see how easy it is to do it with Transloco 💪

Let's say we have a user profile page. We want to create separate translation files for this page and load them only when the user navigates there.

First, we need to create a user-profile folder (or whatever name you choose); In it, we create a translation file for each language we want to support:

├─ i18n/
   ├─ en.json
   ├─ es.json
   ├─ profile-page/
      ├─ en.json
      ├─ es.json

In each file will add only the relevant translations for this page:

{
   "title": "User Profile"
}

Let's continue and create the UserProfile module and routes:

const routes: Routes = [
  {
    path: '',
    component: UserProfileComponent
  }
];

@NgModule({
  declarations: [UserProfileComponent],
  providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'user-profile' }],
  imports: [CommonModule, RouterModule.forChild(routes), TranslocoModule]
})
export class UserProfileModule {}

Adding the TRANSLOCO_SCOPE to the providers instruct Transloco load the corresponding scope based on the active language and merge it under the scope namespace into the active language translation object.

For example, if the active language is en, it will load the user-profile/en.json file, and will set the translation to be the following:

{
  header: '',
  login: '',
  userProfile: {
    title: 'User Profile'
  }
}

Now we can access each one of the user profile keys by using the userProfile namespace:

<ng-container *transloco="let t">
   {{ t('userProfile.title') }}
   {{ t('title') }}
</ng-container>

By default, the namespace will be the scope name (camel-cased), but we can override it in two ways:

By using the config.scopeMapping config:

{
  provide: TRANSLOCO_CONFIG,
   useValue: {
    defaultLang: 'en',
    scopeMapping: {
      'user-profile': 'profile'
    }
  }
}

By providing a custom alias name in the module/component scope provider:

{
  provide: TRANSLOCO_SCOPE,
  useValue: { scope: 'user-profile', alias: 'profile' }
}

Now we can access it through a custom name we provided instead of the original scope name (profile in our case):

<ng-container *transloco="let t">
   {{ t('profile.title') }}
   {{ t('title') }}
</ng-container>

Here is some more great content about Transloco:

Help the Translator by Using Transloco: The internationalization (i18n) library for Angular

Shahar Kazaz — Sun, 15 Sep 2019 10:48:29 +0000

Originally published at shahar.kazaz

There are times where we need to help the translator with a description and meaning. To translate a text message accurately, the translator may need additional information or context.

Let's take for example the following translation key:

{
  "book": "Book"
}

Is this a "book" or to "book" something? We need to communicate to our translators the translation context.

Let's learn how we can use Transloco the internationalization (i18n) library for Angular in order to provide the translators with these type of comments.

For each translation key that requires a description, we can add a companion key post-fixed with .comment, as shown in the example below:

{
  "book": "Book",
  "book.comment": "we mean a reading book"
}

Now, We don't want these keys to get into our final bundle, so we can remove them using an official transloco library when building the production environment.

First, we need to install the library:

npm install @ngneat/transloco-remove-comments

Then, we need to add to the package.json the following script:

"scripts": {
  "remove-comments": "transloco-remove-comments dist/appName/assets/i18n",
  "build:prod": "ng build --prod && npm run remove-comments",
}

Now when we build the production environment, the library will take care of removing these keys from the translation files specified in the path.

Once again, Transloco has made our life more comfortable. Cheers! 🍻

Here is some more great content about Transloco:

Creating Search Engine-friendly Internationalized Apps with Angular Universal and Transloco 🌐

Shahar Kazaz — Fri, 13 Sep 2019 09:08:06 +0000

Originally published at shahar.kazaz

In this article, I will show you how easily we can add internalization (i18n) support to Angular SSR using the next generation Angular internalization library Transloco. Let's get started.

First, let's create a brand new Angular CLI project:

npx @angular/cli new transloco-ssr

Now, add SSR support by using @nguniversal/express-engine schematics:

ng add @nguniversal/express-engine --clientProject <PROJECT-NAME>

Add Transloco to your project by using schematics:

ng add @ngneat/transloco

Choose your supported languages, and answer Yes for the SSR question. Now you can see that it created the translation files, the loader, and added everyhing it needs to the AppModule.

When using Angular SSR, we need to change our loader base path to be absolute instead of relative, for it to work. This is already done for you.

The only thing you need to do is modify the new baseUrl property in each one of the environment files based on your application:

export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200' <====
};

// environment.prod.ts
export const environment = {
  production: true,
  baseUrl: 'http://localhost:4000' <====
};

Now let's add a new key to our translation files:

{
  "title": "Angular SSR with Transloco english"
}

And let's use it in our template:

<ng-template transloco let-t>
  {{ t.title }}
</ng-template>

Let's build our application for production using the following commands:

npm run build:ssr
npm run serve:ssr

Open your browser and navigate to http://localhost:4000 and Viola! We did it!

Let's see the source HTML file:
image

We have got a working application with SSR and internalization (i18n) support in 5 minutes.

Bonus

We can use the accept-language header to set the preferred user language automatically. The Accept-Language request HTTP header advertises which languages the client can understand, and which locale variant is preferred.

import { Component, Inject, Optional } from '@angular/core';
import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { TranslocoService } from '@ngneat/transloco';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Optional() @Inject(REQUEST) private request: Request, private translocoService: TranslocoService) {
    if (request.headers) {
      translocoService.setActiveLang(normalize(request.headers['accept-language']));
    }
  }
}

The accept-language headers return the following string:

  'accept-language': 'en-US,en;q=0.9,he;q=0.8,ru;q=0.7,fr;q=0.6,pt;q=0.5',

You need to extract the language and set it as active.

Here is some more great content about Transloco:

Server Side Pagination Made Easy with Akita and Angular

Shahar Kazaz — Mon, 20 May 2019 08:55:34 +0000

Introduction

When developing applications, we often need to deal with large data-sets. Imagine a scenario where we have one million records in the database, and we require to show it on a web page.

We generally want to avoid sending all the data at once. The reasons for that are 1) We want a faster initial page load. 2) We don’t want to bloat the user’s machine memory.

Instead, server-side paging is used, where the server sends just a single page at a time.

In addition to that, we also want to cache pages that already have been fetched, to spare the need for an additional request. To save you the hassle and help you manage this whole thing, we created the PaginatorPlugin.

The Paginator Plugin

The Paginator API provides two useful features:

Caching of pages which have already been fetched.
Pagination functionally, which gives you all the things you need to manage pagination in the application.

Here is the plugin in action:

Let’s learn how to use it.

Create the Scaffold

We need to maintain a collection of contacts, so we’ll use an EntityStore. You can think of an entity store as a table in a database, where each table represents a flat collection of entities.

Let’s create a contacts table, i.e. an EntityStore managing a Contact object:

/** contacts.store.ts */
export interface ContactsState extends EntityState<Contact> { }

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'contacts' })
export class ContactsStore extends EntityStore<ContactsState, Contact> {
   constructor() {
     super();
   }
}

/** contacts.query.ts */
@Injectable({ providedIn: 'root' })
export class ContactsQuery extends QueryEntity<ContactsState, Contact> {
  constructor(protected store: ContactsStore) {
    super(store);
  }
}

/** contacts.model.ts */
import { ID } from '@datorama/akita';

export interface Contact {
  id: ID;
  email: string;
  name: string;
  address: string;
}

We created the basic building blocks of Akita. Now, let’s create the ContactsService which is responsible for fetching the data:

/** contacts.service.ts  */
@Injectable({ providedIn: 'root' })
export class ContactsService {
  get(params): Observable<PaginationResponse<Contact>> {
    return getContacts(params);
  }
}

The getContact function is a mock implementation which returns the required server data with a one-second delay.

Basic Pagination:

First, we need to create a new provider for our contacts:

/** contacts-paginator.ts */
import { inject, InjectionToken } from '@angular/core';
import { ContactsQuery } from './state/contacts.query';
import { PaginatorPlugin } from '@datorama/akita';

export const CONTACTS_PAGINATOR = new InjectionToken('CONTACTS_PAGINATOR', {
  providedIn: 'root',
  factory: () => {
    const contactsQuery = inject(ContactsQuery);
    return new PaginatorPlugin(contactsQuery).withControls().withRange();
  }
});

You should already be familiar with the above code. This is the regular process of creating a factory provider in Angular.

We are creating a new PaginatorPlugin(), passing the query we want to use in our pagination.

Calling withControls() will give us an array of pages so we ngFor on them and withRange() which will give us the from and to values to display to the user.

Now, we can use it in our component:

/** contacts-page.component.ts */

import { CONTACTS_PAGINATOR } from '../contacts-paginator';
import { Contact } from '../state/contact.model';
import { PaginationResponse, PaginatorPlugin } from '@datorama/akita';

@Component({
   templateUrl: './contacts-page.component.html',
})
export class ContactsPageComponent {
  contacts$: Observable<PaginationResponse<Contact>>;

  constructor(@Inject(CONTACTS_PAGINATOR) private paginatorRef: PaginatorPlugin<Contact>,
     private contactsService: ContactsService
   ) { }

  ngOnInit() {
     this.contacts$ = this.paginatorRef.pageChanges.pipe(
       switchMap((page) => {
         const requestFn = () => this.contactsService.get({ page });
         return this.paginatorRef.getPage(requestFn);
       })
     );
   }
}

Paginator exposes a pageChanges observable (which fires the first page immediately). When this observable emits, we call the paginatorRef getPage() method, passing the HTTP request we want to initialize when the page doesn’t exist in the cache

Paginator expects to get the following fields as part of the response from the server (in our case, the request service method):

/** paginator-request.interface.ts */
{
 "perPage": 10,
 "lastPage": "10",
 "currentPage": "3",
 "total": 150,
 "data": […]
}

In addition to that, Paginator also exposes all the data that you need to display as well as methods for controlling the page from the UI, for example:
isLoading$, isFirst, isLast, prevPage(), nextPage(), setPage(), isPageActive(), pageControls, etc.

Let’s see how can we use it in the component’s template:

/** contacts-page.component.html */
<div>
    <content-loader *ngIf="paginatorRef.isLoading$ | async"></content-loader>
    <ng-container *ngIf="(contacts$ | async) as contacts">
      <section [class.hide]="paginatorRef.isLoading$ | async">
        <table>
          <thead class="thead-dark">
            <tr>…</tr>
          </thead>
          <tbody>
            <tr *ngFor="let contact of contacts.data">
              <th>{{ contact.id }}</th>
              <td>{{ contact.name }}</td>
              <td>{{ contact.email }}</td>
              <td>{{ contact.address }}</td>
            </tr>
          </tbody>
        </table>
        <nav>
          <ul>
            <li [class.disabled]="paginatorRef.isFirst" 
                (click)="paginatorRef.prevPage()">
                <a>Previous</a>
            </li>
            <li [class.active]="paginatorRef.isPageActive(page)"  
                (click)="paginatorRef.setPage(page)"  
                *ngFor="let page of contacts.pageControls">
                <a>{{ page }}</a>
            </li>
            <li [class.disabled]="paginatorRef.isLast" 
                (click)="paginatorRef.nextPage()">
                <a>Next</a>
            </li>
          </ul>
        </nav>
      </section>
    </ng-container>
</div>

That’s all you need in order to get fully working pagination including caching.

Router Integration

There are times where we want to persist the current page in the URL address, for example: http://app.com/contact?page=3.

Here is an example of how can we implement it with the plugin:

/** contacts-page-router.component.ts */
export class ContactsPageComponent {
  contacts$: Observable<PaginationResponse<Contact>>;

  constructor(@Inject(CONTACTS_PAGINATOR) private paginatorRef: PaginatorPlugin<Contact>,
     private contactsService: ContactsService,
     private route: ActivatedRoute
   ) { }

  ngOnInit() {
     this.route.queryParamMap.pipe(
       map(params => +params.get('page')),
       untilDestroyed(this)
     ).subscribe(page => this.paginatorRef.setPage(page));

     this.contacts$ = this.paginatorRef.pageChanges.pipe(
       switchMap((page) => {
         const requestFn = () => this.contactsService.get({ page });
         return this.paginatorRef.getPage(requestFn);
       })
     );
   }
}

Each time the page query parameter changes, we notify the plugin about the current page.

Advanced Pagination

There are times where we want to give our users the ability to filter the data, sort it, or change the number of entries per page. The vital step here is that when we change a filter, sort, etc. We want to invalidate the cache, because it may alter the server response.

For example, let’s add a sortBy filter:

/** contacts-page-advanced.component.ts */
export class ContactsPageComponent {
  contacts$: Observable<PaginationResponse<Contact>>;
  sortByControl = new FormControl('name');

  constructor(@Inject(CONTACTS_PAGINATOR) private paginatorRef: PaginatorPlugin<Contact>,
    private contactsService: ContactsService
  ) { } pag

  ngOnInit() {
    const sortChanges$ = this.sortByControl.valueChanges.pipe(startWith('name'));
    this.contacts$ = combineLatest([
      sortChanges$.pipe(tap(() => this.paginatorRef.clearCache())),
      this.paginatorRef.pageChanges
    ]).pipe(
      switchMap(([sortBy, page]) => {
        const requestFn = () => this.contactsService.get({ page, sortBy });
        return this.paginatorRef.getPage(requestFn);
      })
    );
  }
}

When the sortBy value changes, we need to invalidate the cache, so the Paginator will know that it needs to re-fetch the data from the server.

Pagination Metadata

Sometimes you want to save the current filters, so if the user navigates from the current route and comes back you want the filter values to persist. Paginator exposes a metadata property where you can set these values.

For example:

/** contacts-page-metadata.component.ts */
import { startWith } from 'rxjs/operators';

export class ContactsPageComponent {
  ngOnInit() {
    const sortByValue = this.paginatorRef.metadata.get('sortBy') || 'name';
    this.sortByControl = new FormControl(sortByValue);
    const sort$ = this.sortByControl.valueChanges.pipe(startWith(sortByValue));

    this.contacts$ = combineLatest([
      sort$.pipe(tap(() => this.paginatorRef.clearCache())),
      this.paginatorRef.pageChanges
    ]).pipe(
      switchMap(([sortBy, page]) => {
        const requestFn = () => this.contactsService.get({ page, sortBy });
        this.paginatorRef.metadata.set('sortBy', sortBy);
        return this.paginatorRef.getPage(requestFn);
      })
    );
  }
}

Thank you for reading!

If you liked the article hit the 🧡 & 🦄 buttons and share it 🎉

We’re looking for great front-end developers. If you’re one of them, you’re passionate about technology, and you want to work for the best company in the world, come and join me.

DEV Community: Shahar Kazaz

Remove Redundant Subscriptions in Angular with @jsverse/letify

A Quick Reminder: The Async Pipe and Its Pitfall

What is @jsverse/letify?

✨Conclusion

Join the ️@jsverse Community

Remove Redundant Subscriptions in Angular with @jsverse/letify

A Quick Reminder: The Async Pipe and Its Pitfall

What is @jsverse/letify?

✨Conclusion

Join the ️@jsverse Community

Thank you Faker. Now it’s Time to Move On.

Meet Falso 🎩

ngneat / falso

All the Fake Data for All Your Real Needs 🙂

Installation

Usage

Setting a Randomness Seed

What’s Next?

Introducing Variabless - JS & CSS A Match Made in Heaven

One Single Source of Truth

Styles Generator

Use the Power of JS

Getting Started

Installation

Usage

jsverse / variabless

JS & CSS - A Match Made in Heaven 💎

Why Variabless?

Features

Writing Custom Git Hooks With NodeJS

Running The Script

Exec.js

Pre-Commit 📦

1. Branch Names Convention

2. Forbidden Tokens ✋

Pre-Push 🚀

1. Auto Sync Master

2. Forbidden Branches ✋

Takeaways

Have You Tried Transloco Yet? 🌐

Introducing Transloco: Angular Internationalization Done Right

Translation Files Validation in Angular with Transloco And Husky

Lazy Load Translation Files In Angular Using Transloco

Translation Files Validation in Angular with Transloco And Husky

Introducing Transloco: Angular Internationalization Done Right

Lazy Load Translation Files In Angular Using Transloco

Help the Translator by Using Transloco: The internationalization (i18n) library for Angular

Lazy Load Translation Files In Angular Using Transloco

Help the Translator by Using Transloco: The internationalization (i18n) library for Angular

Creating Search Engine-friendly Internationalized Apps with Angular Universal and Transloco 🌐

Bonus

Server Side Pagination Made Easy with Akita and Angular

Introduction

The Paginator Plugin

Create the Scaffold

Basic Pagination:

Router Integration

Advanced Pagination

Pagination Metadata

What is `@jsverse/letify`?

What is `@jsverse/letify`?