[DONE] Day040 content: Custom Structural Directive

[januaryofmine]

Work in progress. Structure for Day 40 Custom Structural Directive.

[januaryofmine]

@tieppt @nartc @trungk18 dạ em đã xong bài 40: Custom Structural Directive. Các anh xem và review giúp em. Em cảm ơn.

[trungvose]

@januaryofmine Cảm ơn em nhé. Để lát anh review 🤞

[januaryofmine]

Em có update 1 số content ở bài này. Các anh đọc commit mới nhất nhen. Em cảm ơn.

[trungvose]

@nartc Đại ca review day 40 nhé. Trong quãng đời 4 năm em chưa viết custom structural directive bao giờ nên nghĩ là em ko nên review bài này 😂😂

[trungvose]

@januaryofmine Nếu em dùng VSCode để viết markdown thì có mấy cái extension khá hữu ích, có khi em cài rồi nhưng anh cứ note ra.

1. https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker - Để check chính tả và spelling. Tránh lỗi như em phải sửa sai spelling như ở dòng này.

2. https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one - Để format, tạo table of content etc cho markdown. Nhưng hình như khi turn on thì type tiếng Việt ko có được 😂

[januaryofmine]

@trungk18
dạ, em cảm ơn a. v có gì a giúp em xem day 39 với day 41 với. Em cảm ơn anh.

[trungvose]

@januaryofmine Em có ví dụ nào thực tế hơn chút không? Vì directive này thật ra thực tế 99% là mình sẽ ko dùng đến. Nên nếu lấy đc một ví dụ nào đó em đã từng dùng thì sẽ dể để mọi người hình dung hơn. Chứ một directive để hiện lên một đoạn demo text và hover với color khác thì nếu là anh, anh sẽ viết CSS cho nhanh 😂

Đa phần custom directive anh viết thì để wrap cái element với một thư viện nào đấy chưa có sẵn cho Angular. Thì anh nghĩ đây là một use case khá phổ biến.

@Directive({ selector: "[jsTree]" })
export class JsTreeDirective implements AfterViewInit {
  @Input() jsTree: any;

  constructor(private el: ElementRef, private zone: NgZone) { 
    this.jsTree = this.jsTree || {}
  }

  ngAfterViewInit(): void {
    try {
      runOutsideAngular(this.zone, () => {
        let jsTreeElement = $(this.el.nativeElement);
        jsTreeElement.jstree(this.jsTree).bind("select_node.jstree", function (e, data) {
          var href = data.node.a_attr.href;
          if (href.indexOf('#') === -1)
            document.location.href = href;
        });
        jsTreeElement.removeClass("hidden");
      })
    } catch (error) { }
  }
}

@nartc @tieppt Các đại ca thấy sao?

[januaryofmine]

dạ. Em trong quá trình research về attribute directive, em thường thấy các use-cases demo là dùng để thay đổi styling hay attributes có sẵn của thẻ. em nghĩ directive này 1 ví dụ. Trong lúc xây dựng ví dụ, em tập trung vào sự dễ hiểu, để các bạn có thể nhanh chóng grab idea và ứng dụng theo ý các bạn. Vậy nên bản thân ví dụ sẽ đơn giản, không có tính sử dụng trực tiếp nhưng sẽ có tính tham khảo để custom nhanh theo business. Ngoài ra sự khác biệt của attribute directive và css em nghĩ đó là tính reuseable. Em thấy directive sẽ reuse dễ dàng hơn.

[januaryofmine]

Em cũng bám khá sát ví dụ từ official docs của Angular. Ở đây nó build 1 example tương tự thế này nè anh: https://angular.io/guide/attribute-directives

[trungvose]

Ừ anh hiểu ý, nhưng vì mình làm series nên nếu ví dụ sát thực tế hơn tý cũng đẹp trai hơn mà. Vì nhiều ví dụ trên Angular docs anh thấy tính thực tiễn cũng hơi thấp 🤣 Anw ý kiến chủ quan của anh thôi, chứ content hiện tại cũng rất là tốt rồi nhé.

[nartc]

ví dụ gì mà dùng jquery thế này....

[januaryofmine]

dạ, ý của a @trungk18 là wrap thư viện lại. Còn project của em không có dùng jquery.

[tieppt]

một directive khá phổ biến là để truyền vào permissions, sau đó check list available rồi xem có render một template hay ko. https://github.com/AlexKhymenko/ngx-permissions

[januaryofmine]

dạ a. v giờ em sửa lại demo ha a @tieppt.