FAQ

While installing the library, I get an error about conflicting Angular peer dependencies.

The library depends on several @angular packages. These are defined in package.json in the peerDependencies section. The version of these package might not match the version you are using in your Angular app. This mismatch causes errors like "Conflicting peer dependency …".

There are several things you can do to deal with this issue. Typically you might want to align your Angular version with the version used in the library. Unfortunately this is not possible in every situation for many reasons.

As a temporary workaround it usually helps to add --force to your command (e.g. npm i --force).

You might be wondering when and how we migrate the Angular peer dependencies. Here's the plan to give you a rough idea:

• The library loosely follows Angular's release cycle. When a new stable major release of Angular is published, we test the library against the new release. This won't affect the published stable versions of the library.
• As a rule of thumb, the library upgrades the Angular peer dependencies when the first minor version of a given Angular major version is published.
• Upgrading of the major version of the Angular peer dependencies is a breaking change and thus will result in a major release of the library.
• Whenever possible, the library shall be compatible with older Angular versions. However new features, fixes and releases of the library are tested against the Angular version declared in peer dependency only.

Here's an example:

• Once Angular 36.0.0 is released, we will test the library against the new Angular release internally.
• Given the library's version is 23.4.5 depending on Angular 35.x, we will upgrade the Angular peer dependency to 36.x at around the time Angular 36.1.0 is released. The first stable version of the library including the updated Angular peer dependency will be 24.0.0.

I get a compile-time warning about "CommonJS or AMD dependencies can cause optimization bailouts."

Add core-js, etc. to the list of allowed common js dependencies in your project's angular.json.

"architect": {
"build": {
...
"options": {
"allowedCommonJsDependencies": [
"core-js",
"can-use-dom",
"lodash.debounce",
"lodash.memoize",
"lodash.throttle",
]
...
}
...
}
}

How can I use Inbox without the default filtering and sorting?

To enable the consuming application to run their own filtering and sorting logic, the library provides the InboxState service with the inboxConfiguration$ object. The inboxConfiguration$ enables the user to set the disableInboxFiltering and disableInboxSorting flags to true.

A possible workflow could look like this:

1. Inject the InboxState service into your component.

import { InboxState } from '@talenra/inbox';
import { inject } from '@angular/core';

inboxState = inject(InboxState);

2. Set the disableInboxFiltering and disableInboxSorting flags to true.

this.inboxState.setInboxConfiguration(...this.inboxState.inboxConfiguration$.value, {
  disableInboxFiltering: true,
  disableInboxSorting: true,
});

3. Listen to changes of the filter and sort selection in the inbox and set the new data accordingly.

<talenra-inbox
  ...
  (filterSortSearchEmitter)="onFilterSortSearchEmitter($event)"
  [dataItems]="dataItems"
  [(paginatorState)]="paginatorState"
  [(refreshing)]="isRefreshing"
  usePagination>
</talenra-inbox>

@Component({
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss'],
})
export class DemoComponent {
  dataItems: any[] = [];
  isRefreshing = false;
  paginatorState: PaginatorState = {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
  };

  onFilterSortSearchEmitter(state: InboxFilterSortSearchEvent): void {
    // set the refreshing state to true, to display the loading spinner
    this.isRefreshing = true;
    // Implement your own filtering and sorting logic here
    changedItems = this.dataItems.filter((item) => item.name === 'John Doe');
    changedItems = changedItems.sort((a, b) => a.name.localeCompare(b.name));
    // set the new data items
    this.dataItems = changedItems;
    // if paginator is used, adjust the paginator state
    this.paginatorState = {
      currentPage: 1,
      pageSize: 10,
      totalItems: changedItems.length,
    };
    // set the refreshing state to false, to hide the loading spinner
    this.isRefreshing = false;
  }
}