Hôm nay mình sẽ mang đến cho các bạn một bài viết vô cùng thú vị và bổ ích. Bạn có bao giờ gặp rắc rối khi phải sử dụng các phương thức setter và getter trong Angular không? Hãy yên tâm, từ phiên bản Angular v16.1.0, một tính năng mới cực kỳ hữu ích đã được giới thiệu nhằm cung cấp một cách tiếp cận dễ dàng và thay thế để chuyển đổi - Transform các giá trị input, từ đó loại bỏ nhu cầu phải sử dụng các phương thức setter và getter. Nghe hấp dẫn chưa nào?

Vấn đề với Setters và Getters

Để hiểu rõ hơn, trước hết, chúng ta cùng tìm hiểu về setter và getter nhé. Trong lập trình hướng đối tượng, setter và getter là những phương thức được sử dụng để thiết lập và lấy giá trị của các thuộc tính. Tuy vậy, việc sử dụng chúng đôi khi có thể gây ra những phiền toái không đáng có.

Ví dụ, xem xét đoạn mã dưới đây:

function toNumber(value: string | number) {
    return isNumber(value) ? value : parseInt(value);
}

@Component({
    selector: 'app-foo',
    template: ``,
    standalone: true,
})
export class FooComponent {
    @Input({ transform: toNumber }) width: number;
}

Trong đoạn mã trên, khi chúng ta sử dụng FooComponent và truyền width input dưới dạng một chuỗi:

<app-foo width="100" />

Hàm chuyển đổi toNumber sẽ xử lý việc chuyển đổi, chuyển đổi giá trị chuỗi thành số.

Đối với những lập trình viên mới hoặc chưa quen với cách làm việc này, việc phải sử dụng các phương thức setter và getter có thể trở nên phức tạp và gây rối.

Giải pháp từ Angular v16.1.0

Rồi, vậy giải pháp ở đâu? Đó chính là tính năng mới của Angular: transform option. Với transform option, bạn có thể dễ dàng chuyển đổi các giá trị input mà không cần phải sử dụng setter và getter. Hãy xem xét một ví dụ cụ thể dưới đây.

Đoạn mã dưới đây minh họa cách sử dụng transform option:

import { Input, booleanAttribute } from '@angular/core';

@Component({
    selector: 'app-checkbox',
    template: ``,
    standalone: true,
})
export class CheckboxComponent {
    @Input({ transform: booleanAttribute }) disabled: boolean = false;
}

Trong đoạn mã trên, hàm chuyển đổi booleanAttribute được sử dụng để xử lý việc chuyển đổi boolean. Bây giờ, khi chúng ta sử dụng CheckboxComponent và chỉ định thuộc tính disabled:

<app-checkbox disabled />

Hàm chuyển đổi sẽ diễn giải đúng mực sự hiện diện của thuộc tính như true.

Đáng chú ý là Angular đã sử dụng tính năng này một cách nội tại trong router.

Giải pháp cho các thuộc tính HTML

Cũng như vậy, transform option cũng có thể giúp chúng ta giải quyết vấn đề với các thuộc tính HTML. Nếu bạn đã từng làm việc với Angular, có lẽ bạn đã từng gặp vấn đề khi Angular hiểu tất cả các thuộc tính tĩnh dưới dạng chuỗi, dẫn đến một vấn đề phổ biến. Ví dụ, đoạn mã sau đây sẽ trả về một chuỗi rỗng:

@Component({
    selector: 'app-checkbox',
    template: ``,
    standalone: true,
})
export class CheckboxComponent {
    @Input() disabled: boolean;
}

<app-checkbox disabled />

Để giải quyết vấn đề này, chúng ta có thể sử dụng transform option thay cho việc sử dụng các phương thức getter và setter.

Tổng kết

Nhìn chung, với việc giới thiệu transform option trong decorator @Input, Angular đã đơn giản hóa quá trình chuyển đổi giá trị input, mang lại một cách tiếp cận tinh gọn hơn so với các phương thức setter và getter truyền thống.

---

English Version

Today I'm going to bring you a very interesting and informative article. Have you ever encountered any trouble using the setter and getter methods in Angular? Don't worry, starting from Angular version 16.1.0, a new and incredibly useful feature has been introduced to provide an easy and alternative way to transform input values, eliminating the need for setter and getter methods. Sounds appealing, doesn't it?

The Issue with Setters and Getters

To understand better, let's first familiarize ourselves with setter and getter. In object-oriented programming, setter and getter are methods used to set and get the values of properties. However, using them can sometimes cause unnecessary complications.

For example, consider the following code snippet:

function toNumber(value: string | number) {
    return isNumber(value) ? value : parseInt(value);
}

@Component({
    selector: 'app-foo',
    template: ``,
    standalone: true,
})
export class FooComponent {
    @Input({ transform: toNumber }) width: number;
}

In the above code snippet, when we use FooComponent and pass the width input as a string:

<app-foo width="100" />

The toNumber transformation function will handle the conversion, transforming the string value into a number.

For new or unfamiliar developers, using setter and getter methods can be complex and confusing.

The Solution from Angular v16.1.0

So, where's the solution? It lies in a new feature introduced by Angular: the transform option. With the transform option, you can easily transform input values without the need for setter and getter methods. Let's consider a specific example below.

The following code snippet illustrates the usage of the transform option:

import { Input, booleanAttribute } from '@angular/core';

@Component({
    selector: 'app-checkbox',
    template: ``,
    standalone: true,
})
export class CheckboxComponent {
    @Input({ transform: booleanAttribute }) disabled: boolean = false;
}

In the above code snippet, the booleanAttribute transformation function is used to handle boolean transformation. Now, when we use CheckboxComponent and specify the disabled property:

<app-checkbox disabled />

The transformation function will interpret the presence of the attribute as true.

It's worth noting that Angular has internally used this feature in the router.

Solution for HTML Attributes

Similarly, the transform option can help us address issues with HTML attributes as well. If you've worked with Angular before, you may have encountered the problem of Angular interpreting all static attributes as strings, leading to a common issue. For example, the following code snippet would return an empty string:

@Component({
    selector: 'app-checkbox',
    template: ``,
    standalone: true,
})
export class CheckboxComponent {
    @Input() disabled: boolean;
}

<app-checkbox disabled />

To solve this problem, we can use the transform option instead of using getter and setter methods.

Summary

In conclusion, by introducing the transform option in the @Input decorator, Angular has simplified the process of transforming input values, providing a more streamlined approach compared to traditional setter and getter methods.

---

日本語版

今日は、非常に興味深く、有益な記事をお届けします。Angularでsetterとgetterメソッドを使用する際にトラブルに遭遇したことはありますか？心配しないでください、Angularバージョン16.1.0から、新しく非常に便利な機能が導入され、入力値を簡単に変換するための代替方法が提供されるようになりました。良かったですね。

setterとgetterの問題

より良く理解するために、まずはsetterとgetterに慣れてみましょう。オブジェクト指向プログラミングでは、setterとgetterはプロパティの値を設定および取得するために使用されるメソッドです。しかし、使用することで不必要な複雑さが生じることがあります。

例えば、次のコードの断片を考えてみましょう：

function toNumber(value: string | number) {
    return isNumber(value) ? value : parseInt(value);
}

@Component({
    selector: 'app-foo',
    template: ``,
    standalone: true,
})
export class FooComponent {
    @Input({ transform: toNumber }) width: number;
}

上記のコードの断片では、FooComponentを使用してwidth入力を文字列として渡す場合：

<app-foo width="100" />

toNumber変換関数が変換を処理し、文字列値を数値に変換します。

新しいまたは慣れていない開発者にとって、setterとgetterメソッドを使用することは複雑で混乱することがあります。

Angular v16.1.0からの解決策

では、解決策はどこにあるのでしょうか？それは、Angularによって導入された新機能にあります：transformオプションです。transformオプションを使用すると、setterとgetterメソッドを使用せずに入力値を簡単に変換することができます。以下に具体的な例を考えてみましょう。

次のコードの断片は、transformオプションの使用例を示しています：

import { Input, booleanAttribute } from '@angular/core';

@Component({
    selector: 'app-checkbox',
    template: ``,
    standalone: true,
})
export class CheckboxComponent {
    @Input({ transform: booleanAttribute }) disabled: boolean = false;
}

上記のコードの断片では、booleanAttribute変換関数がブール値の変換を処理するために使用されています。今、CheckboxComponentを使用してdisabledプロパティを指定すると：

<app-checkbox disabled />

変換関数は属性の存在をtrueと解釈します。Angularは、内部的にこの機能をルーターで使用していることに注意する価値があります。

HTML属性の解決策

同様に、transformオプションはHTML属性の問題に対処するのに役立ちます。Angularを使用したことがある場合、すべての静的属性を文字列として解釈するAngularの問題に遭遇したことがあるかもしれません。次のコードの断片では、空の文字列が返されます：

@Component({
    selector: 'app-checkbox',
    template: ``,
    standalone: true,
})
export class CheckboxComponent {
    @Input() disabled: boolean;
}

<app-checkbox disabled />

この問題を解決するために、getterとsetterメソッドの代わりにtransformオプションを使用することができます。

まとめ

結論として、@Inputデコレーターでtransformオプションを導入することにより、Angularは入力値の変換プロセスを簡素化し、従来のsetterとgetterメソッドに比べてより効率的なアプローチを提供しています。

Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)

Ref

• Origin article: https://netbasal.com/say-goodbye-to-setters-and-getters-angulars-transform-option-for-input-values-88fd9442dcad