A Significant Release — A New Chapter in Our Development Journey

In our team, we regard major releases as significant milestones. We don’t rush these updates; preparing for a new version takes months, if not longer.

Back in December 2020, we launched our second major release, which initiated Taiga's open-source journey. The third release followed in late summer 2022. After starting development for the fourth version at the end of 2023, we’re thrilled to present its first stable release now.

While we don’t stop progressing between major releases—having conducted almost weekly updates—the most exciting transformations arise from these major changes.

Updating the Minimum Required Angular Version

In my previous writings, I've often discussed the challenges faced by library authors in maintaining compatibility with older Angular versions. Despite our wishes or resources, we cannot instantly adopt the latest Angular version for our libraries. If we do, users may be unable to use our offerings until they also upgrade.

Thus, we continued with Angular 12 throughout the third major release. This was challenging as the framework has evolved significantly over the past four years, but we are finally upgrading to Angular 16.

What This Means for You: - If you're already using a modern Angular version, you're in the clear—everything will function as expected. However, if your applications are on a version older than 16, it’s crucial to encourage your team to update Angular before transitioning to the latest Taiga UI. - You can say goodbye to modules! In this release, we've rewritten all directives and components to be standalone, enhancing tree-shaking capabilities. Additionally, we've revamped naming conventions and eliminated unnecessary suffixes. For instance, when referencing TuiButton, you simply add TuiButton to your component imports rather than TuiButtonModule or TuiButtonComponent. This simplifies and cleans up the code!

What This Offers Us: - Host directives are now available, which opens doors for better code organization and simplification. They eliminate the necessity for additional HTML nesting, allowing many components to function as directives. This benefits your customization options and will enable us to separate styles into distinct packages in the future. Who knows? We might even see Taiga components for React or vanilla JavaScript down the line!

• We’ve also integrated signals for the first time, simplifying certain code aspects. We anticipate fully harnessing their potential with the transition to Angular 17, which will introduce signal inputs and two-way binding tools. However, our initial experience with signals has already been quite impressive!

Enhancing Browser Support

With each major release, we reassess the minimum supported browser versions. This enables us to streamline our codebase by removing workarounds for outdated browsers, resulting in lighter and more stable Taiga UI libraries.

In this major update, we've raised the minimum requirements for several browsers. Without polyfills or fallbacks, we now have access to browser APIs such as ResizeObserver, Clipboard, VisualViewport, pointer events, and the beforeinput event for all masked text fields.

The latest list of supported browsers is available as a library—@taiga-ui/browserslist-config.

Introducing the @taiga-ui/legacy Library

With this fourth major release, we’ve introduced the @taiga-ui/legacy package as a transitional solution for outdated components before they are fully phased out. Any entities found in this package during this release will be removed in the fifth.

This package aims to ease the migration process to the latest major version. Typically, it includes components that have modern counterparts in stable packages, but the migration can be too complex for automation.

We hope this will make it easier for you to transition essential components first (with our automated schematic migration) and then gradually remove the rest from the @taiga-ui/legacy package. Keep in mind, however, these components are not supported anymore, so it’s wise to switch to modern versions as soon as possible.

Transitioning Experiments to Stable Packages

Users of our packages might have noticed an expanded “Experimental” section in the documentation, now filled with additional directives and components from the @taiga-ui/experimental package.

Our team has adopted this strategy from the Angular team. For instance, they maintain the @angular/material-experimental package, which contains prototypes and in-development experiments for Angular Material. Nothing in this package is stable or production-ready, and breaking changes can occur with any release.

We follow similar principles. The new @taiga-ui/experimental package allows users to glimpse the direction of the upcoming major release early. Users can even implement this package in their applications and provide feedback if they choose. However, it's crucial to exercise caution when updating the experimental package, as the public API may change unexpectedly.

Most features described in this article were previously part of the experimental package, but they have now transitioned to various stable Taiga libraries. Let's explore the details of each new feature!

Revamped Checkbox and Radio Components

Let's begin with checkboxes and revisit their previous public API.

Do you want a simple square that shows a checkmark when clicked?

Import TuiCheckboxModule and use the following markup:

<tui-checkbox [(ngModel)]="value" />

Want a checkbox with accompanying text, where clicking the text also checks it?

Import the TuiCheckboxLabeledModule and utilize the following markup:

<tui-checkbox-labeled [(ngModel)]="value">

Click on the text too

</tui-checkbox-labeled>

Another example:

This is essentially an improved version of the previous CheckboxLabeled component, now featuring an additional border and click/hover functionality across the entire area.

Let’s recall the module name from Taiga UI v3—TuiRadioBlockModule, and the markup for this component now appears as follows:

<tui-checkbox-block [(ngModel)]="value">

An option

</tui-checkbox-block>

For clarity, similar changes occurred with radio buttons. Previous modules included: TuiRadioModule, TuiRadioLabeledModule, and TuiRadioBlockModule, all following the same logic I just described.

With that background established regarding the third major version of Taiga UI, let’s appreciate the elegance of these updated components.

To create basic checkboxes and radio buttons, simply import TuiCheckbox and TuiRadio:

<input tuiCheckbox type="checkbox" [(ngModel)]="value" />

<input tuiRadio type="radio" [(ngModel)]="value" />

Looking to add clickable labels? You’ll appreciate the new style, which closely resembles the native one. Import TuiLabel, then wrap the inputs with a <label> tag (this works for both checkboxes and radio buttons):

<label tuiLabel>

<input tuiCheckbox type="checkbox" [(ngModel)]="value" />

Label text

</label>

Want to replicate the behavior of the previous versions of TuiCheckboxBlockModule / TuiRadioBlockModule? Now there’s a unified solution for both! Import TuiBlock, and simply apply this directive to the <label> tag:

<label tuiBlock>

<input tuiCheckbox type="checkbox" [(ngModel)]="value" />

Label text

</label>

All new API examples are equally applicable to the new radio buttons.

Moreover, the Label and Block directives also work with the new Switch component.

The new versions of Checkbox, Radio, and Switch feature a consistent public API that is easy to remember, closely aligning with the native syntax of similar built-in browser components—no hidden DOM nesting involved!

SwipeActions Component

The experimental SwipeActions component has now been integrated into the stable @taiga-ui/addon-mobile package. Its concept is straightforward and familiar, as it’s commonly implemented in popular email services like Gmail. It provides users with additional actions via horizontal swipes on mobile devices. This new component takes care of most functionalities, requiring only that you declaratively describe the content of these actions through templates.

To implement it, simply wrap any content in <tui-swipe-actions /> and place a set of icon buttons next to it that will appear upon swiping:

<tui-swipe-actions>

<div>

Any content you like

</div>

<button appearance="destructive" iconStart="@tui.trash" size="s" tuiIconButton tuiSwipeAction>

</button>

</tui-swipe-actions>

Introducing the Sensitive Directive

Our core package, @taiga-ui/kit, now includes a unique directive called Sensitive. This allows you to visually obscure any content from the user. This feature is particularly useful for hiding sensitive information, such as balances or bank account numbers, during screen recordings or demonstrations.

The primary advantage of this directive is its compatibility with any native tag or custom Angular component. The only limitation is the avoidance of the ::after pseudo-element on the hidden content, which can easily be circumvented with additional HTML nesting.

Skeleton Directive

A similar feature to the previous directive is the Skeleton directive.

In web development, a skeleton is a temporary placeholder that represents content that hasn't yet loaded, displaying its approximate layout until loading is complete. Skeletons are typically gray with a subtle pulsating animation indicating the loading state.

The new Skeleton directive can be applied to any native tag or Angular component, transforming any content into skeletons through the magic of the CSS filter property.

Introducing the Segmented Component

The new Segmented component is a popular method for utilizing buttons in app navigation, particularly effective for mimicking a native mobile app appearance.

Fade Directive

The ellipsis at the end of a line is a common technique for indicating text overflow. If you seek an alternative, the new Fade directive has transitioned to the stable @taiga-ui/kit package.

Mobile Dropdown Component

Although this component was replicated in the third major branch, it was developed during the active creation of the new major release, thus warrants mention.

Our team has crafted a new dropdown version specifically for mobile devices. Traditional desktop dropdowns often feel cramped on smaller screens. The new TuiDropdownMobile directive from the @taiga-ui/addon-mobile package addresses this issue.

Simply attach the tuiDropdownMobile directive to components such as Select, MultiSelect, or ComboBox, and the directive will manage the functionality: opening a standard dropdown list on desktop while displaying the mobile version on smaller screens.

Enhancements in the @taiga-ui/layout Library

Components are not always laden with heavy JavaScript code. Sometimes, developers require a solid collection of ready-made templates to simplify layout tasks. In the latest release, our @taiga-ui/layout package has been upgraded with valuable components and directives for this purpose.

The new CardMedium and CardLarge components facilitate the effortless creation of cards.

In this article, I've showcased just one type among many potential variations. You'll find a plethora of fascinating examples in the documentation.

The new Cell component is ideal for long lists containing extensive text content.

Finally, the new BlockDetails component, when paired with the existing BlockStatus, will assist in creating effective status pages within your application.

Revamped Icon Component

Before this major release, our approach to icons involved a combination of <svg> and <use> tags. While functional, this method was overly complex and had limitations. It required multiple entities and preprocessing scripts, making it difficult to explain.

The new major release introduces a new Icon component in the @taiga-ui/core package, which serves as the primary method for managing icons across other Taiga components. This new component displays icons via a CSS mask, unlocking new possibilities:

• Icons can be hosted on a CDN, displayed without any DOM manipulations or sanitization.
• Simplified icon scaling: Just adjust the size of the component’s host, and the icon will scale automatically, preserving details and line thickness using the property vector-effect="non-scaling-stroke".
• The browser takes care of icon caching automatically.

Updated InputPhoneInternational Component

Our InputPhoneInternational component has finally rid itself of numerous hard-coded constants that had been neglected!

We no longer maintain a database of phone number formats for every country. Instead, Google does this for us through their library, libphonenumber, which keeps phone number patterns up to date.

Before diving into Taiga’s fourth major release, we developed the @maskito/phone library, which employs a JavaScript version of Google’s library. It leverages the full capabilities of Maskito to create a masked text field for any country's phone number with minimal code. We have now integrated this library into Taiga’s InputPhoneInternational component.

Additionally, the public version of this component previously relied on low-quality raster images for country flags. Now, our tuiFlag pipe (used within the InputPhoneInternational component) delivers high-quality vector images instead of .png files!

Refined Textfield Component

Lastly, I will discuss the most comprehensive refactoring yet, which is still ongoing and will continue in future releases.

We have redesigned the PrimitiveTextfield component, the foundation for all of Taiga’s text fields. The updated version is now called Textfield.

The standout feature of the new component is its significantly revamped API style, which allows for a much more declarative definition and customization through templates rather than relying on numerous input properties.

Here’s a basic example:

<tui-textfield iconStart="@tui.search" iconEnd="@tui.settings">

<label tuiLabel>I am a label</label>

<input placeholder="I am placeholder" tuiTextfield [(ngModel)]="value" />

<tui-icon icon="@tui.bell" />

<tui-icon tuiTooltip="I am a hint" />

</tui-textfield>

This code produces the following text field:

After the refactoring of this component, we will transition all previous generation text fields to the @taiga-ui/legacy package. Our goal is to create new alternatives that maintain a similar API style to the base component, Textfield. Some components (like InputCard) have already been rewritten in this new style, while others will follow in upcoming releases.

In Conclusion

The fourth major release is now live. The features described here represent just a fraction of the overall improvements—check the release changelog for more details.

We invested considerable effort to facilitate your updates. Numerous schematics have been created to automatically traverse your entire project and address most breaking changes.

If you’re utilizing Angular CLI, run the migration scripts with the following command:

ng update @taiga-ui/cdk

For projects based on Nx CLI, the command to execute is:

nx migrate @taiga-ui/cdk

If you’ve stumbled upon this article and wish to give Taiga a try in your project, we have a command to simplify the onboarding process:

ng add taiga-ui

Should you encounter any issues or bugs during the update, feel free to create an issue or seek help in our Telegram community. The Taiga team is eager for your feedback!

As a friendly reminder, the easiest way to show appreciation is to star us on GitHub.