angular-vietnam/100-days-of-angular

Series độc quyền cung cấp bởi thành viên của Angular Vietnam về các chủ đề liên quan tới Angular trong vòng 100 ngày.

100-days-of-angular

English translation for this series is available at ./translations/EN folder

Series độc quyền cung cấp bởi thành viên của Angular Vietnam về các chủ đề liên quan tới Angular trong vòng 100 ngày.

Ủng hộ/ Support

• Ủng hộ cho Chau Tran
• Ủng hộ cho Trung Vo
• Ủng hộ cho Tiep Phan

Bọn mình chân thành cảm ơn sự ủng hộ và đóng góp của các bạn!

Dự án thực tế để tham khảo

Dự án	Nội dung	Từ khóa	Video (nếu có)
Spotify	Spotify được thiết kế với Nx workspace với một kiến trúc hoàn chỉnh tối ưu hóa Single Component Per Module (SCAM). ngrx và ngrx/component-store để quản lý dữ liệu giữa các component. TailwindCSS và ng-zorro cho phần UI.	Nx, ngrx, TailwindCSS, ng-zorro	Youtube
Jira Clone	Jira clone có sử dụng Akita state management để quản lý data giữa các thành phần trong ứng dụng. Ngoài ra có dùng thêm TailwindCSS cho styling và ng-zorro để sử dụng các component có sẵn như modal, tooltip	TailwindCSS, ng-zorro, Akita	Youtube
Tetris	Tetris là ví dụ về game đơn giản viết bằng Angular có sử dụng Akita làm state management. Trông đơn giản thôi nhưng nếu bạn mở React Devtools lên thì sẽ thấy rất nhiều data được cập nhật với mỗi chuyển động trên màn hình	Akita	Youtube
Authentication Flow	Anh Châu có chia sẻ về Authentication Flow, Permission-based Flow	Authentication Flow, Permission-based Flow	Youtube
MEAN - NestJS	Anh Châu có chia sẻ về MEAN stack - MongoDB, Express, Angular and NodeJS	NestJS, MongoDB	Youtube

Các chia sẻ tâm huyết của ban quản trị Angular Việt Nam và những khách mời

#	Title	Nội dung
1	Cơ hội việc làm tại Singapore trong ngành IT	Process phỏng vấn ở Sing trong các công ty công nghệ như thế nào, Điểm mạnh điểm yếu của ứng viên đến từ Việt Nam. Cách phát huy điểm mạnh và khắc phục
2	Giá như mình biết - Những chia sẻ của một Senior Software Engineer	Với thâm niên 10 năm làm việc trong ngành lĩnh vực tech qua nhiều vị trí, anh Bill Nguyễn sẽ quay trở lại chia sẻ với chúng ta những điều mà như anh nói là "giá như mình biết". Từ đó hy vọng các bạn rút ra được những bài học nhất định để trở thành một Software Engineer tốt hơn ngày hôm qua :)

Các bài viết

Bài viết	Translations	Video
Day 1: Prepare The Working Environment	ENG	Youtube
Day 2: Explore Angular App	ENG	Youtube
Day 3: Angular Data Binding	ENG	Youtube
Day 4: Angular Structure Directive - NgIf		Youtube
Day 5: Angular Structure Directive - NgForOf		Youtube
Day 6: Attribute Directive - Class and Style		Youtube
Day 7: Component Interaction - Pass data from parent to child with input binding		Youtube
Day 8: Component Interaction - Parent listens for child event		Youtube
Day 9: Custom Two-way Binding		Youtube
Day 10: Template Variable và ViewChild/ViewChildren		Youtube
Day 11: TypeScript Data Type		Youtube
Day 12: TypeScript Advanced Type		Youtube
Day 13: Content Projection Trong Angular		Youtube
Day 14: ng-template, ngTemplateOutlet và ng-container trong Angular		Youtube
Day 15: Introduction to Dependency Injection in Angular		Youtube
Day 16: Dependency Injection trong Ứng Dụng Angular Part 2		Youtube
Day 17: ContentChild và ContentChildren trong Angular		Youtube
Day 18: Pipes trong Angular		Youtube
Day 19: Giới thiệu Reactive Programming, RxJS và Observable		Youtube
Day 20: RxJS Creation Operators		Youtube
Day 21: RxJS Transformation Operators		Youtube
Day 22: RxJS Filtering Operators		Youtube
Day 23: RxJS Combination Operators		Youtube
Day 24: RxJS Error Handling and Conditional Operators		Youtube
Day 25: RxJS Higher Order Observables and Utility Operators		Youtube
Day 26: RxJS Subject and Multicasting		Youtube
Day 27: Router		Youtube
Day 28: Angular Router - Feature Modules, Child Routes and Services		part of 27 video, part of 29 video
Day 29: Angular Router - Lazy Loading Modules		Youtube
Day 30: Angular Router - Guards and Resolvers Part 1		Youtube
Day 31: Angular Router - Guards and Resolvers Part 2		Youtube
Day 32: Angular Router - Guards and Resolvers Part 3		Youtube
Day 33: Template-driven Forms Trong Angular		Youtube
Day 34: Template-driven Forms Trong Angular Part 2		Youtube
Day 35: Reactive Forms Trong Angular		Youtube
Day 36: Reactive Forms Trong Angular Part 2		Youtube
Day 37: Angular Form Async Validator		Youtube
Day 38: Dynamic Component
Day 39: Thực Hành Micro Frontends
Day 40: Jira Clone 01 - Lên kế hoạch và cài cắm dự án Angular	ENG
Day 41: Jira Clone 02 - Dựng layout với flexbox và TailwindCSS	ENG
Day 42: Angular CDK Coercion
Day 43: DisabledControlDirective to disable Reactive Form control	ENG
Day 44: Observable for @Output	ENG
Day 45: RxJS Trong Angular - Unsubscribe Một Subscription
Day 46: JavaScript Widget và Embedded Script
Day 47: Composition form datasource with Directive
Day 48: Using dependency injection to get data from ActivatedRoute

Youtube Playlist

https://www.youtube.com/playlist?list=PLMTyi4Bfd5pW73uXw-6jgRxDwdPYqwk0r

Tác giả

• Tiep Phan
• Chau Tran
• Trung Vo
• Tuan Le
• Khanh Tiet
• Minh Tu Hoang

100-days-of-angular's Issues

Angular 100

Chưa thấy lifecycle anh nhỉ?

Day 44. ngrx effect

100 ngày với angular

Thank you

Cảm ơn các anh vì những chia sẻ rất hữu ích <3

Day007 - Khi nào nên dùng ngOnChanges hay setter/getter

Em thấy nên ghi rõ thêm ưu nhược điểm của ngOnChanges và setter/getter.
Trong bài viết anh chỉ ghi 1 câu chung chung thế này:
Trong trường hợp bạn không thích dùng ngOnChanges, chúng ta có thể sử dụng getter/setter để làm điều này.

https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day007-Component-Interaction-01.md

Day 37 - Async Validator

Angular

Validate FormGroup với 1 vài control

Mình gặp 1 trouble như sau nhưng hiện tại chưa có hướng giải quyết:
Có 1 FormGroup gồm 3 FormControl: A, B, C.Mình viết hàm asyncValidators luôn cả FormGroup nhưng mình chỉ muốn validate khi chỉ có A,B thay đổi thôi.Còn C thì không.
Có cách nào mà không cần bỏ C ra hoặc tạo FormGroup riêng cho A với B không? Tại khi get Value ra đem lên BE hơi rắc rối.

Thanks.

Angular

Day 38 - Template Form Custom Validator

Translation?

I know I can't provide this but it would so cool for a translation to English. :)

Spanish Traslation

Hello, I have been using this tutorial and it seems great, however I would like to collaborate with the translation into Spanish.

Angular

100days angular

Angular

Tuyệt vời cảm ơn các anh

Day 42. Giới thiệu state management, what, why, how

Day 37: Async Validator trong Angular Form - về cách tạo custom validators

Ở phần source code ví dụ đang sử dụng

validateUserNameFromAPI(
  control: AbstractControl
): Observable<ValidationErrors | null> {
  return this._api.validateUsername(control.value).pipe(
    map(isValid => {
      if (isValid) {
        return null;
      }
      return {
        "usernameDuplicated": true
      }
    })
  );
}

để tạo custom async validator. Tuy nhiên, do trong function này đang sử dụng this pointer nên ở phần sử dụng cần phải viết như bên dưới

this.validateUserNameFromAPI.bind(this)

Để dễ hiểu hơn thì chúng ta có thể thay đổi validateUserNameFromAPI lại như sau

export function validateUserNameFromAPI(
  api: ApiService
): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return api.validateUsername(control.value).pipe(
      map(isValid => {
        if (isValid) {
          return null;
        }
        return {
          "usernameDuplicated": true
        };
      });
    );
  }
}

Lúc này ở chỗ sử dụng sẽ trở thành

this.registerForm = this._fb.group({
  username: [
    "",
    Validators.compose([
      Validators.required,
      Validators.minLength(6),
      Validators.pattern(/^[a-z]{6,32}$/i),
    ]),
    validateUserNameFromAPIDebounce(this._api)
  ],
});

Day 38 - Gặp lỗi khi lazy load component có dùng *ngIf hoặc cần import từ module khác

Trong phần này mình không tìm thấy cách hướng dẫn khi lazy load 1 component phức tạp.
Mình có thêm *ngIf vào thì gặp lỗi:

Can't bind to 'ngIf' since it isn't a known property of 'div'.

Demo: https://stackblitz.com/edit/angular-ivy-8qqgwg?file=src%2Fapp%2Fapp.component.ts

Day 43. ngrx action, reducer, selector