Angular Book

Angular Components

Constructor không có private thì sao?
Có lỗi Unable to display error. Open your browser's console to view.
vì vậy cần khai báo private hoặc public, protected

Component Metadata:
    - changeDetection: ChangeDetectionStrategy.OnPush, Default xem
    - viewProviders: xem
    - hostDirectives: xem v15
    - moduleId: xem
    - animations: xem | xem

    - encapsulation: ViewEncapsulation.None, Emulated, ShadowDom xem
    - interpolation: Cú pháp nội suy {{ templateExpression }} xem | xem
    - entryComponents: xem v9 | xem v13

viewProvider vs provider khác gì nhau?

Ng-content là gì? xem | xem

Vòng đời lifecycle hooks trong angular? xem 

ChangeDetectorRef - Cung cấp máy dò thay đổi? xem |  xem

Property binding sử dụng như thế nào? xem

Attribute Binding sử dụng như thế nào? xem

Class Binding sử dụng như thế nào? xem

Style Binding sử dụng như thế nào? xem

Event Binding sử dụng như thế nào? xem

One way và Two way Binding sử dụng như thế nào? xem | xem | customize

Template reference variable là gì? xem

ComponentFactoryResolver - Cách tạo Dynamic Component như thế nào? xem | xem | xem

Sự khác nhau giữa Constructor và ngOnInit?
Là sự khác nhau dễ nhận thấy. Constructor là Typescript, ngOnInit là vòng đời của angular 

Cách hoạt động của ngOnChange? xem

Meta elements for SEO? xem

$any() type cast? xem
<!-- Accessing an undeclared member -->
<div> The hero's marker is {{$any(hero).marker}} </div>

Non-null assertion (!.) xem
Toán tử xác nhận không null.

<div *ngIf="hero">

  The hero's name is {{hero!.name}}

</div>

Optional chaining (?.)
The current hero's name is {{currentHero?.info?.name}}

Nullish Coalescing in Angular v12

The current hero's name is {{currentHero.info.name ?? 'NaN'}}

Angular Directive

Có bao nhiêu loại Directive trong Angular?

Component Directive (Directive thành phần): selector xem

Structural directive (Directive cấu trúc): *ngIf, *ngFor... xem | xem | xem | custom | angular (dấu * là cho input)

Attribute directive (Directive thuộc tính): href, src, title... xem

Render2 tương tác với DOM? xem

Render2 vs ElementRef? xem

Directive Input Alias & Output Alias viết như thế nào? xem

Directive Metadata:
     - selector: đã biết
     - inputs: xem
     - outputs: xem
     - host: Css-class | Events | Attributes | Poperties
     - hostDirectives: xem
     - providers: xem | APP_INIT

     - exportAs: xem | xem
     - queries: xem

Custom Structural Directives - Check permission? xem
ViewContainerRef.createEmbeddedView(templateRef)
ViewContainerRef.clear()

Built-in Directives

NgModel Binding có bao nhiêu cách dùng?? xem

NgClass Binding có bao nhiêu cách dùng?? xem

NgStyle Binding có bao nhiêu cách dùng?? xem

NgIf  ? xem

Sự khác nhau giữa ngIf và hidden ? xem

NgFor ? xem

CdkVirtualFor ? xem | xem chat
Scroll virtual, rất mạnh mẽ không gây tốn bộ nhớ trình duyệt

CdkOverlay? xem

NgSwitch là gì? xem

Sự khác nhau giữa ngPlural và ngSwitch? xem

ngTemplateOutlet cách sử dụng? xem | xem

ngComponentOutlet cách sử dụng? xem | xem | xem v9 | xem v13 | dynamic

so sánh sự khác nhau giữa ng-container và ng-template? xem

ngNonBindable? xem
Lệnh ngNonBindablecho Angular không biên dịch hoặc liên kết nội dung của phần tử DOM hiện tại.

ngZone ? xem | xem | xem

Class Field Decorators

@Input @Output sử dụng như thế nào? xem

@Output Observable? xem

@HostBinding sử dụng như thế nào? xem

@HostListener sử dụng như thế nào? xem

@ContentChild @ContentChildren là gì? khác nhau như thế nào? xem | xem | xem

@ViewChild @ViewChildren là gì? khác nhau như thế nào? xem

@ViewChildren subscribe change? xem

@Viewchild { static: false } là gì? xem

Angular Pipe |

@Pipe() là gì? xem

Custom pipe? xem | XSS Bypass & DomSanitizer

@Pipe option - Pure and Impure pipes là gì? xem

Async pipe khai triển như thế nào? xem
Async Pipe có thể nhận giá trị kiểu Promise hoăc Observable như là input data và sẽ tự động subcribe input này. {{name | async}}

Currency pipe cách sử dụng? xem

Decimal pipe cách sử dụng? xem

Percent pipe cách sử dụng? xem

Date pipe cách sử dụng? xem
Khuyến cáo:
- Không nên dùng lib moment vì làm chậm app,
- Nên dùng service DatePipe của Angular.

import { DatePipe } from '@angular/common';

this.datepipe.transform(new Date(), 'dd-MM-yyyy HH:mm');

I18nPlural pipe là gì? xem | xem

I18nSelect pipe là gì? xem | xem

JSON pipe và lợi ích debugging? xem

KeyValue pipe dành cho *ngFor cách sử dụng? xem | xem | customs

LowerCase pipe và UpperCase pipe? xem

Slice pipe cách sử dụng? xem

TitleCase pipe là gì? xem

Angular Forms

Reactive Forms - FormControl ? xem

Reactive Forms - FormGroup ?  compose

Reactive Forms - Nested Group ? xem

Reactive Forms - FormBuilder ? xem

Reactive Forms - FormArray ? dynamic

Reactive Forms Custom Validators (Directive)? xem 

Template Driven Forms - Validation ? xem

asyncValidators? xem

Multi pattern? xem

Match password? xem

PatchValue, SetValue dùng để binding data trong FromGroup như thế nào? xem

Sự khác nhau giữa FormControlName vs FormControl? xem

Sự khác nhau giữa Template Driven và Reactive Form?

Sự khác nhau giữa FormGroup và FormBuilder?

ControlValueAccessor sử dụng để validate nhiều component lồng nhau? xem | xem

ControlValueAccessor base? xem

Customize một ngModel bằng ControlValueAccessor? xem | custom | xem

Angular Dependency Injection (DI)

Dependency?
Khi mô-đun đầu tiên cần mô-đun thứ hai để chạy trong một ứng dụng thì mô-đun thứ hai là phần phụ thuộc của mô-đun đầu tiên.

DI trong angular có ba thứ?
- Injector (Vòi phun) giúp tạo các instance xem
- Provider (Các nhà cung cấp) cho biết cách tạo một phiên bản

- Dependency (Sự phụ thuộc) là kiểu đối tượng nên được tạo

Dependency Injection (DI)? 
Là một kỹ thuật trong đó một lớp nhận các phụ thuộc của nó từ các nguồn bên ngoài thay vì tự tạo ra chúng .

Injection Token (DI Token)? xem

Providers? xem
Là một object được khai báo cho Angular để nó có thể đưa components, directives, classes vào hàm khởi tạo của angular
Danh sách các nhà cung cấp tiêm phụ thuộc cho thành phần này và con của nó.

Injector? xem (providedIn: root, any, platform)
Injector tìm kiếm sự phụ thuộc trong Angular Provider, đưa vào components, service.

Singleton services là như thế nào? xem

RouterModule.forRoot và RouterModule.forChild là như thế nào? xem

@Self  @SkipSelf @Optional @Host chúng sử dụng như thế nào? xem
// @Self  - Chỉ nhìn vào component injector hiện tại
// @SkipSelf  - Bỏ qua component injector hiên tại và bắt đầu tìm với component injector cha mẹ

// @Host - Tìm component injector hiên tại nếu không có bắt đầu tìm với component injector cha mẹ

// @Optional - Trả về null thay vì ném một lỗi nếu không tìm thấy nhà cung cấp.

Angular HttpClient

Get, Post, Put, Path, Delete Request? xem

Error Handling một request? xem

HttpHeaders and HttpParams? xem

Interceptor? xem

Interceptor handle error triển khai như thế nào? xem

SetHeaders "Authorization" token  như thế nào? xem

Angular Routing - Route guard

CanActivate Kiểm tra để xem nếu người dùng có thể truy cập một route
CanActivateChild Kiểm tra để xem nếu người dùng có thể truy cập một route con
CanDeactivate Kiểm tra xem người dùng có thể thoát khỏi một route không.
CanLoad Kiểm tra xem liệu người dùng có thể link đến một mô-đun lazy loading không.
Resolve Thực hiện truy xuất dữ liệu route trước khi kích hoạt route.

Route ? xem

Router Links? xem

<a [routerLink]="['product-list']" [queryParams]="{ page: 99 }">Go to Page 99</a>

Router Navigation? xem | xem

Resolve router? xem

Sự khác nhau giữa children vs loadChildren trong router? xem
children là mảng chưa các path + component
loadChildren là load một lazy một module

Activated Route? xem

Lazy loading là một kỹ thuật cho phép tải các module, component, hoặc các tài nguyên khác chỉ khi chúng cần thiết, thay vì tải toàn bộ ứng dụng cùng lúc. Điều này giúp cải thiện hiệu suất và tăng tốc độ tải trang.

Lazy component? xem v13 ngComponentOutlet |  xem v14 loadComponent

Lazy Loading module? xem v7 | xem v8 | lazy v9 Compiler + ViewContainerRef  | lazy v13 Compiler + ViewContainerRef

Lazy Loading Compiler Module Async? lazy v9 Compiler + ViewContainerRef | lazy v13 Compiler + ViewContainerRef

Eager Loading, Lazy Loading, Pre-Loading trong Angular? xem | xem

PreloadAllModules là gì (Để switch giữa các route lazy được nhanh hơn)?  xem

Lưu trữ router RouteReuseStrategy (Để lưu dữ liệu khi location.back())? xem | xem | xem

ExtraOptions interface? xem| xem

scrollPositionRestoration? xem

Lưu lại vị trí trang web, khi refresh lại thì màn hình vẫn ở vị trí trang web đấy?(trang web dài, kéo xuống giữa trang)
Trả lời:
- cần lưu window.pageYOffset vào localStorage,
- ngOnInit => window.scrollTo(0, scrollPosition lấy trong localStorage);

HashLocationStrategy? xem

HashLocationStrategy

    RouterModule.forRoot(appRoots, { enableTracing: true, useHash:true })
    Where URL looks like http://localhost:4200/#/product

PathLocationStrategy

    Where URL looks like http://localhost:4200/product

Xác định 404 route bằng cách nào?

{
    path: '404',
    component: NotFoundComponent
}, {
    path: '**',
    redirectTo: '/404'
}

Router - NavigateByUrl vs Navigate? xem
Ví dụ 1: applications/123
Ví dụ 2: applications/123/update?type=clone_applications

constructor (private router: Router) { }
this.router.navigateByUrl('applications/' + params.appId);
this.router.navigate(
   ['/applications/', params.appId, 'update'], { queryParams: { type: 'clone_applications' } }
);

ActivatedRoute - Param?
Ví dụ: / param1 /: param1/param2 /: param2

constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
    });
}
or
const param1 = this.route.snapshot.paramMap.get('param1');
const param2 = this.route.snapshot.paramMap.get('param2');

ActivatedRoute - QueryParams url?
Ví dụ: /user?name=hallo&phone=0983773883

constructor(private route: ActivatedRoute) {
   this.route.queryParams.subscribe(params => {
        this.param1 = params['name'];
        this.param2 = params['phone'];
   });
}
or
const name: string = this.route.snapshot.queryParamMap.get('name');
const phone: string = this.route.snapshot.queryParamMap.get('phone');

Angular Modules

@NgModule() Decorator? xem

EntryComponents là gì? xem
Danh sách các component được sử dụng trong view của component hiện tại.

Lazy Loading Feature Modules? xem

Sharing Modules? xem

WebAssembly? xem

Angular Event

Các event mouse? xem

Các event key? xem

Angular DOM

DOCUMENT trong angular ? xem

Render2 trong angular?  xem

Incremental DOM vs Virtual DOM? xem
DOM tăng dần với DOM ảo ?

@ViewChild {read: [reference type]}? xem

ElementRef? size | clone | focus focus

TemplateRef

ViewRef

ComponentRef

ViewContainerRef | CreateEmbedView | EmbeddedViewRef

ng-content, ng-template, ng-container?  xem

*ngTemplateOutlet vs *ngTemplateOutletContext? xem | xem

*ngComponentOutlet, component lazy? xem | lazy loading | xem v9 | xem v13 | dynamic

Phân Biệt "Attribute" và "Property" trong JavaScript (và HTML) xem
- <input> <textarea> sẽ có các Attribute(Thuộc tính) như id, name, type và value.
- Phần tử input sẽ có một đối tượng DOM được tạo ra bởi trình duyệt
- DOM là viết tắt của cụm từ Document Object Model
- DOM Object có cả attribute và property.
- Phần tử HTML không có property mà chỉ có attribute
- Property sẽ là children, childNodes, childElementCount, baseURI.... 

Angular another
Angular Ivy là gì và tại sao nó tuyệt vời? xem

Sử dụng callback function hiểu như thế nào? xem

Một số hữu ích bạn chưa từng nghe? xem | xem

Bạn sử dụng những gì trong Angular CDK? xem

Ivy Compiler khác với View Engine Compiler ntn?

Cái mà Angular muốn giải quyết khi cho ra mắt Ivy là gì?

File angular.json và package.json để làm gì?

IterableDiffers là gì? xem
Kiểm tra biến thêm hay xoá

angular.json và package.json bạn thường làm gì ở trong file này?
Khai báo thêm thư viện css, js. Quản lý version module

Quản lý state loading on/off như thế nào? xem
Gợi ý: Có thể tạo subject chứa mảng các uuid unique của lần request và clear sau mỗi lần end request
khi subject data là rỗng thì off loading!

Angular change detection hoạt động như thế nào?

Những gì trigger change detection?

Angular có những life cycle hooks, thứ tự các Life Cycle hooks được thực thi khi Angular khởi tạo Component và khi Change Detection chạy là ntn?

Bạn có sử dụng những gì trong Angular CDK?

Ivy Compiler khác với View Engine Compiler ntn?

Cái mà Angular muốn giải quyết khi cho ra mắt Ivy là gì?

Cấu hình tsconfig.json đường dẫn import ngắn gọn?

import { ToastrService } from '@services';

{

  "compilerOptions": {

    "paths": {

      "@services": ["src/services"],

      "@services/*": ["src/services/*"],

    }

  },

}

Tại sao lập phiên bản và phát hành? 

Số phiên bản biểu thị mức độ thay đổi được giới thiệu bởi bản phát hành

Ý nghĩa các ký tự đặc biệt trong package.json?
"*" Bất kỳ phiên bản nào đáp ứng
"~1.1.5" Gần tương đương với version "1.1.0" đến "1.2.0" (Fix bug)
"^1.1.5" Tương thích với version "1.1.5" đến "2.0.0" (Tái cấu trúc nội bộ lớn)
">1.1.5" Phải lớn hơn version
.
"14.0.0-rc.6" Bản phát hành xem trước? 
Để giữ cho người dùng được thông tin đầy đủ, Angular hết sức cẩn thận để cho bạn biết những gì có thể sẽ sớm được giới thiệu thông qua “bản phát hành xem trước” như Beta, Next và Release Candidate (-rc).

Cách set base url khi ng build --prod trong file angular.json?

"architect": {
  "build": {
    "configurations": {
      "production": {
        "baseHref": "/va-admin/",
      }
    }
  }
}
// Hoặc có thể dùng lệnh: ng build --prod --base-href "/<repository-name>/"

Budgets trong angular.json là cài đặt để làm gì?
cung cấp khả năng cảnh báo khi vượt mức và có thể thay đổi

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  }
]

Cách cài đặt proxy gọi api nhiều cổng khác nhau trong angular.json? xem | xem

Cài đặt proxy cho url trên Nginx phía server như thê nào? xem

Call api bi Cross Origin dùng url proxy để giải quyết xem

Angular Service Worker (chính là PWA)? xem | xem | xem | xem

PWA (Progressive Web Apps) vs SPA (Single Page App) ? xem | xem 

PWA - Ứng dụng web lũy tiến xem | xem
SPA - Ứng dụng một trang

OAuth2 vs JWT? xem

Login SSO? xem

Authentication (xác thực) và Authorization (quyền)? xem

Microfrontends single-spa? xem | xem | xem | xem
Single Page Application (gọi tắt là SPA) là tên gọi chung cho một kiểu lập trình web.

Sở dĩ có tên là Single Page Application là do các website code theo kiểu này chỉ cần 1 trang duy nhất để xử lý tất cả các tính năng.

Ví dụ:

– domain.com/admin/#/login

– domain.com/admin/#/change-password

– domain.com/admin/#/account

– domain.com/admin/#/dashboard

Microfrontend là một microservice tồn tại trong một trình duyệt.

Microfrontends là các phần trong giao diện người dùng của bạn, thường bao gồm hàng chục thành phần, sử dụng các khung như React, Vue và Angular để hiển thị các thành phần của chúng. Mỗi microfrontend có thể được quản lý bởi một nhóm khác nhau và có thể được triển khai bằng cách sử dụng khuôn khổ riêng của họ. Thực tế và được đề xuất chỉ sử dụng một khung cho tất cả các microfrontends của bạn, mặc dù bạn có thể thêm các khung bổ sung khi di chuyển hoặc khi thử nghiệm.

Mỗi microfrontend có kho lưu trữ git riêng package.json, tệp riêng và cấu hình công cụ xây dựng riêng. Do đó, mỗi microfrontend có một quy trình xây dựng độc lập và một triển khai / CI độc lập . Điều này thường có nghĩa là mỗi repo có thời gian xây dựng nhanh chóng.

Một số mô hình Micro Frontend 

Webpack 5 Module Federation

Nx monorepo hoặc lerna

Qiankun

Complete Angular Tutorial For Beginners? xem

AngularJS vs Angular? xem

Angular DOC | DOC14

Sự khác nhau giữa các phiên bản angular? xem

Angular 4 new features?

 - TypeScript 2.2

 - View Engine

 - Animation Package

 - Improved *ngIf and *ngFor

 - 

Angular 5 new features?

 - TypeScript 2.3

 - Bỏ HTTP nữa mà dùng HTTPClient API nhanh hơn, an toàn và hiệu quả.

 - Pipes: Number, Date, and Currency

 - Build Optimizer - Trình tối ưu hóa bản dựng, kích thước, cải thiện tốc độ ứng dụng
 - @angular/elements xem
 - Progressive Web Apps (PWA) sử dụng Service Worker

Angular 6 new features?

 - TypeScript 2.9

 - Angular CLI: Các lệnh mới được thêm vào như ng-update, ng-add f

 - Updated CDK: Supports responsive. Supports overlay pop-ups. xem

 - Angular Material: Thành phần mat-tree, cdk-tree được thêm vào

Angular 7 new features? xem
 - TypeScript 3.1
 - @angular/cdk/drag-drop Drag and Drop xem
 - @angular/cdk/scrolling Virtual Scrolling

Angular 8 có những gì mới? xem
 - TypeScript 3.4
 - Lazy-loading with import()
 - ViewChild('hello', { static: false }) có từ Angular 8+

Angular 9 new features?
 - TypeScript 3.7
 - Ivy is enabled
 - Optional chaining operator (?.)  .ts vs .html,
 - Nullish coalescing operator (??) .ts and no .html

Angular 10 new features?
 - Typescript 3.9
 - ng new nameOfApp --strict
 - New Date Range Picker

Angular 11 new features?
 - TypeScript 4.0
 - Webpack 5 Support
 - Cải thiện Logging and Reporting trên terminal

Angular 12 new features?
 - Typescript 4.2
 - Nullish coalescing trên html (??)
 - Improvements in styling 
     @import '~@angular/material/theming; // Before
     @use '~@angular/material' as mat; // After

Angular 13 new features?
 - Typescript 4.4
 - Removal of View Engine
 - Validation Improvements
 - IE 11 support removed
 - Remove ComponentFactoryResolver use viewContainerRef.createComponent

Angular 14 new features? xem
 - Typescript 4.7
 - Standalone components, directives, and pipes api | xem

 - Lazy load component route

 - Typed Angular forms
 - new FormControl('', { nonNullable: true }), xem
 - NgOptimizedImage v14.2.0 xem
- "builder": "@angular-devkit/build-angular:browser-esbuild"

 - Streamlined page title accessibility (Route.title)

 - Bind to protected component members

 - Extended developer diagnostics

 - Optional injectors in embedded Views

Angular 15 new features? xem
- Typescript 4.7
- hostDirectives
- ng g component –standalone
- loại bỏ provideIn: ‘any’
- canMatch: [() => inject(LoginService).isLoggedIn()] xem
- @import 'font-awesome/scss/font-awesome'; loại bỏ dấu ~ trước chữ font-aw...

Angular 16 new features? xem | xem
- TypeScript 5.0 xem

- Signals
- Required input
- SSR with hydration xem
- Binding router information to component inputs
- ngcc đã bị xóa. (trình biên dịch)

- Các thư viện Angular View Engine sẽ không còn hoạt động trong các dự án Ivy.
- takeUntilDestroyed and DestroyRef đã được giới thiệu

- thay cho constructor(@Optional() public myService: MyService) {}
- Esbuild dev server and Vite esbuild | xem | xem

View Engine vs Ivy? xem

Các tính năng mới Angular được phát hành theo từng phiên bản? xem

Tổng hợp các đường link về angular xem

Angular book? xem

Clean code checklist? xem

Giải thích trình biên dịch JIT và AOT? xem

Các cách để cải thiện performance của ứng dụng Angular? xem

Mô tả kiến trúc Angular?

Xoá cache component như thế nào? xem

Copy assets? xem

NgRX

Cách sử dụng Redux trong Angular với ngrx? xem | xem | xem ngrx v9 | xem ngrx v13

Tìm hiểu mô hình Mvc vs Redux vs Flux? xem

Redux vs không Redux: cho ý kiến cá nhân.?

RxJS

Run online https://rxviz.com/ https://thinkrx.io/ https://www.rxjs-fruits.com/

Refer: https://angular.io/guide/rx-library
Refer: https://www.learnrxjs.io
Refer: https://rxjs-dev.firebaseapp.com/guide/v6/migration
Refer: https://reactivex.io/rxjs/class/es6/Observable.js~Observable.html
Refer: https://indepth.dev/reference/rxjs/operators

RxJS: Định nghĩa

Observable: là dòng dữ liệu. Nó thể hiện ý tưởng về một tập hợp các giá trị hoặc sự kiện không thể thay đổi được trong tương lai.

Observer: là một tập hợp tối đa 3 callback(next, error, complete) biết cách lắng nghe các giá trị được cung cấp bởi Observable.

Subscription: đại diện cho việc thực thi một Observable, chủ yếu hữu ích để bắt đầu thực thi trong trường hợp có thể observable nguội và để hủy thực thi trong trường hợp có thể observable nóng.

Operators: là các hàm thuần túy cho phép kiểu lập trình chức năng xử lý các tập hợp bằng các thao tác map, filter, concat, flatMap, etc.

Subject: tương đương với EventEmitter và là cách duy nhất để gửi nhiều giá trị hoặc sự kiện tới multiple Observers.

Schedulers: là bộ điều phối tập trung để kiểm soát sự đồng thời, cho phép chúng tôi điều phối khi tính toán xảy ra trên ví dụ setTimeout hoặc requestAnimationFrame hoặc những thứ khác.

Làm thế nào để lưu trữ một dữ liệu được quan sát? xem

Combined 2 request và trả về một subcribe? xem

Phương thức subcribe làm gì trong angular?
Đây là một phương thức được đăng ký theo dõi. Bất cứ khi nào phương thức được gọi, một thực thi độc lập của quan sát được xảy ra.

So sánh Subject vs BehaviorSubject vs ReplaySubject vs AsyncSubject ? xem  | AsyncSubject
Chú ý: BehaviorSubject, RelaySubject, AsyncSubject kế thừa từ Subject

So sánh Scan vs Reduce trong rxjs?  xem

Tại sao HttpClient không cần unsubscribes? xem
Không cần vì nó tự complete() complete 

Sự khác biệt giữa MergeMap FlatMap ConcatMap SwitchMap |ExhaustMap? xem

First, Take, TakeUntil, TakeWhile & TakeLast có tự unsubcribe không? xem

Phân biệt merge, concat, forkJoin, combineLatest, zip? xem

Create observable, fromPromise, time,. interval, subscription, fronEvent?  xem

Filter, first, last ? xem

CatchError? xem

Defer rxjs? xem

Retry retryWhen? xem

Publish multicast? xem

Sự kiện click với rxjs? xem

Sự khác biệt Promise vs Observable? xem

Làm sao để Cache một observable data? xem

Xử lý multi request với rxjs như thế nào? xem | xem

ForkJoin handle errors? xem

combineLatest, forkJoin, zip, withLatestFrom? xem

distinctUntilChanged? xem

Concat vs Merge? xem

From vs Of? xem

Do/Tap? xem

mapTo dùng để ánh xạ giá trị cố định cho mối giá trị phát ra? xem

from vs of?
from([1,2,3]) // phát ra 3 lần: 1, 2 ,3
of(1,2,3) // phát ra 3 lần: 1, 2, 3

Sự khác biệt debounceTime vs throttleTime? xem

BufferCount? xem 

interval(1000).pipe(bufferCount(3));

=> phát
lần 1 [1,2,3] 

lần 2 [4,5,6]
lần 3 [7,8,9]

sequenceEqual? 
Dùng để so sánh hai observable return boolean
source1$.pipe(sequenceEqual(source2$)).subscribe()

QueryList changes? xem

Observable, Observer, subscribe, unsubscribe, pipe:(startWith, tap, of, map, filter, catch/catchError ...vv)

Không nên viết lồng gọi api trong subcribe vì callback hell observable?
Cần viết theo cách khác http.get('url').pipe(switchMap(s => http.get('url'))).subcribe(res => // Todo)

1. RxJS là một thư viện JavaScript để xử lý dữ liệu theo kiểu Reactive Programming. 

2. Reactive Programming là một mô hình lập trình tập trung vào luồng dữ liệu và sự phản ứng tự động khi có sự thay đổi trong dữ liệu. 

3. Observable và Promise đều được sử dụng để xử lý bất đồng bộ trong JavaScript. Tuy nhiên, Observable có thể phát ra nhiều giá trị trong khi Promise chỉ trả về một giá trị duy nhất. 

4. Để tạo một Observable trong RxJS, bạn có thể sử dụng constructor của nó hoặc sử dụng các hàm như  of ,  from ,  interval ,  timer . 

5. Để subscribe vào một Observable trong RxJS, bạn có thể sử dụng phương thức  subscribe  và truyền vào các hàm xử lý cho các giá trị phát ra, lỗi và hoàn thành. 

6. Để kết hợp nhiều Observables trong RxJS, bạn có thể sử dụng các toán tử kết hợp như  merge ,  concat ,  combineLatest ,  zip . 

7. Để xử lý lỗi trong RxJS, bạn có thể sử dụng toán tử  catchError ,  retry ,  retryWhen . 

8. Để huỷ đăng ký (unsubscribe) khỏi một Observable trong RxJS, bạn cần lưu trữ đối tượng Subscription được trả về từ phương thức  subscribe  và gọi phương thức  unsubscribe  trên đối tượng Subscription đó. 

9. Để sử dụng các toán tử trong RxJS, bạn cần import chúng từ thư viện RxJS và áp dụng chúng lên Observable thông qua phương thức  pipe . 

10. Để xử lý bất đồng bộ trong RxJS, bạn có thể sử dụng các toán tử như  map ,  filter ,  reduce ,  flatMap ,  switchMap . 

11. Để chia sẻ dữ liệu giữa các subscriber trong RxJS, bạn có thể sử dụng các toán tử như  share ,  shareReplay . 

12. Để xử lý backpressure trong RxJS, bạn có thể sử dụng các toán tử như  buffer ,  bufferTime ,  throttle ,  debounce . 

13. Subjects trong RxJS được sử dụng để tạo và phát ra các giá trị, cũng như làm cầu nối giữa Observable và Observer. 

14. Operators trong RxJS là các hàm mở rộng cho Observable để thực hiện các phép biến đổi, lọc, kết hợp, xử lý lỗi và nhiều tác vụ khác trên dữ liệu. 

15. Để xử lý việc đa luồng (concurrency) trong RxJS, bạn có thể sử dụng các toán tử như  mergeMap ,  concatMap ,  switchMap ,  exhaustMap . 

16. Các toán tử điều kiện trong RxJS như  filter ,  take ,  takeWhile ,  skip ,  skipWhile  được sử dụng để lọc dữ liệu dựa trên một điều kiện nào đó. 

17. Các toán tử biến đổi (transformation operators) trong RxJS như  map ,  pluck ,  scan ,  bufferCount  được sử dụng để biến đổi dữ liệu từ một dạng sang dạng khác. 

18. Để xử lý việc cache dữ liệu trong RxJS, bạn có thể sử dụng các toán tử như  shareReplay ,  publishReplay ,  cache . 

19. Các toán tử kết hợp (combination operators) trong RxJS như  combineLatest ,  zip ,  withLatestFrom ,  forkJoin  được sử dụng để kết hợp dữ liệu từ nhiều Observables. 

20. Để xử lý việc retry trong RxJS, bạn có thể sử dụng toán tử  retry ,  retryWhen  để thực hiện việc thử lại khi có lỗi xảy ra. 

21. Để tạo ra một custom operator trong RxJS, bạn có thể sử dụng phương thức  pipe  và truyền vào một hàm biến đổi dữ liệu. 

22. Các toán tử bộ lọc (filtering operators) trong RxJS như  filter ,  distinct ,  distinctUntilChanged ,  takeLast  được sử dụng để lọc dữ liệu theo các tiêu chí cụ thể. 

23. Các toán tử thời gian (time-based operators) trong RxJS như  debounceTime ,  throttleTime ,  delay ,  timeout  được sử dụng để xử lý dữ liệu dựa trên thời gian. 

24. Các toán tử chuyển đổi (conversion operators) trong RxJS như  toArray ,  toMap ,  toSet ,  toJSON  được sử dụng để chuyển đổi dữ liệu sang các dạng khác nhau. 

25. Các toán tử xử lý lỗi (error handling operators) trong RxJS như  catchError ,  retry ,  retryWhen ,  onErrorResumeNext  được sử dụng để xử lý và xác định cách xử lý lỗi trong Observable. 

26. Các toán tử số học (mathematical operators) trong RxJS như  sum ,  min ,  max ,  average  được sử dụng để thực hiện các phép tính toán trên dữ liệu số. 

27. Các toán tử thống kê (aggregate operators) trong RxJS như  count ,  reduce ,  scan ,  every ,  some  được sử dụng để thực hiện các phép thống kê trên dữ liệu. 

28. Các toán tử điều khiển luồng (flow control operators) trong RxJS như  delay ,  delayWhen ,  throttle ,  debounce ,  timeout  được sử dụng để kiểm soát luồng dữ liệu. 

29. Các toán tử biến đổi dữ liệu (data transformation operators) trong RxJS như  map ,  pluck ,  scan ,  bufferCount  được sử dụng để biến đổi dữ liệu từ một dạng sang dạng khác. 

30. Các toán tử gom nhóm (grouping operators) trong RxJS như  groupBy ,  partition ,  bufferCount ,  windowCount  được sử dụng để nhóm dữ liệu thành các nhóm con. 

Javascript + Typescript

Sự khác nhau giữa ES5 vs ES6 là gì? xem | năm phát hành | xem

Thực thi javascript sau khi page load ?
Có 3 cách: 

 - window.onload = function ...

 - document.onload = function ...

 - <body onload="script();">

Có mấy loại clone object?
Có 3 loại:  JSON.parse,  spread operator (…) ES6,   Object.assign() ES5

Có mấy loại scope trong javascript?
Có 4 loại (Global, Local, Function, Block)
Khi JavaScript biên dịch mã, nó trước tiên tìm kiếm và di chuyển tất cả các khai báo hàm lên đầu phạm vi của nó. Điều này cho phép bạn gọi hàm trước khi nó được khai báo trong mã.

Shallow copying vs Deep copying ? xem
"Shallow copy" là sao chép tham chiếu, trong khi "deep copy" là sao chép toàn bộ đối tượng. 

Mutable and immutable là như thế nào? xem | xem | xem | xem | xem

ES5 - ES2014

 es5.properties.mutators

 
ES6 - ES2015

 es6.arrowFunctions

 es6.destructuring | xem

 es6.forOf

 es6.parameters

 es6.properties.computed | xem

 es6.properties.shorthand

 es6.spec.symbols

 es6.spread

 es6.tailCall

 es6.templateLiterals

 es6.regex.sticky

 es6.regex.unicode

let and const

default paramester

rest and spread operation

Template interals

Class and interface

Promise asynchronous

Interators and generators for iterable object

Set and map for working collections

Proxy

Module

ES7 - ES2016
Array.prototype.includes()

ES8 - ES2017
Object.values()

Object.entries()

String.prototype.padStart()

String.prototype.padEnd()

async/await

ES9 - ES2018

Object.getOwnPropertyDescriptors()

Spread syntax for objects

Promise.prototype.finaly()

ES10 - ES2019

Array.prototype.flat()

Array.prototype.flatMap()
Array.prototype.sort()

String.prototype.trimStart()

String.prorotype.trimEnd()

ES11 - ES2020

BigInt

Nullish coalescing operator

Optional chaining operator

Promise.allSettled()

ES12 - ES2021
String.prototype.replaceAll()

Logical assignment operators ( ||=, &&=, ??= )

ES13 - ES2022

Array.prototype.lastIndexOff

Object.hasOwn()

at() for string and array

Top level await()

START Tips ES2020

Typescript no required field -> Partial<User>

Nullish coalescing operator (??) là gì ? xem
Dễ hiểu hơn so sánh như sau || là check truthy còn ?? là check nullish
Note: ?? Sẽ check null và undefined, còn 0 thì không check vẫn cho pass

Optional chaining (?.) là gì ? xem (xem thêm trong mục Expressions & operators)
Note: Sẽ trả về undefined không làm cho code bị lỗi
Ví dụ: post?.title => undefined

Promise.allSettled xem
Đợi tất cả các promises bất kể trạng thái của chúng là resolve hay reject
Khác với all nó sẽ bị lỗi nếu một trong các promises bị rejected

String.protype.matchAll
Sẽ trả về một iterator
"123".matchAll(/[1-3]/g)  => [...]

globalThis

Luôn tham chiếu đến biến toàn cục
  - nodejs global.console.log()
  - trình duyệt window.alert()
=> globalThis không quan tâm tới môi trường mà đều dùng được như
  - globalThis.console.log()

  - globalThis.alert()

Private methods/properties
class Demo { #value = "Hihi" say() { console.log(this.#value) } }
Thêm tiền tố # sẽ thành private

END Tips ES2020

Shorthand? xem

Mutator array (Mảng thay đổi): 

push(): Thêm một hoặc nhiều phần tử vào cuối mảng. 

pop(): Xóa phần tử cuối cùng của mảng. 

shift(): Xóa phần tử đầu tiên của mảng. 

unshift(): Thêm một hoặc nhiều phần tử vào đầu mảng. 

splice(): Xóa, thêm hoặc thay thế phần tử. 

reverse(): Đảo ngược thứ tự các phần tử trong mảng. 

sort(): Sắp xếp các phần tử trong mảng theo thứ tự được chỉ định. 

fill(): Thay thế tất cả các phần tử trong mảng bằng một giá trị được chỉ định. 

copyWithin(): Sao chép một phần của mảng và chèn vào vị trí khác trong mảng. 

Non-mutator array (Mảng không thay đổi): 

concat(): Kết hợp hai hoặc nhiều mảng thành một mảng mới. 

filter(): Tạo một mảng mới với các phần tử thỏa mãn điều kiện được chỉ định. 

map(): Tạo một mảng mới bằng cách thực hiện một hàm trên từng phần tử của mảng gốc. 

slice(): Trả về một bản sao của một phần của mảng. 

join(): Kết hợp tất cả các phần tử của mảng thành một chuỗi. 

every(): Kiểm tra xem các phần tử trong mảng có thỏa mãn một điều kiện hay không. 

some(): Kiểm tra xem có ít nhất một phần tử trong mảng thỏa mãn một điều kiện hay không. 

includes(): Kiểm tra xem một giá trị có tồn tại trong mảng hay không. 

indexOf(): Trả về chỉ số của phần tử đầu tiên trong mảng có giá trị tương ứng. 

lastIndexOf(): Trả về chỉ số của phần tử cuối cùng trong mảng có giá trị tương ứng. 

find(): Trả về giá trị của phần tử đầu tiên trong mảng thỏa mãn một điều kiện nào đó. 

findIndex(): Trả về chỉ số của phần tử đầu tiên trong mảng thỏa mãn một điều kiện nào 

forEach(): Nó không thay đổi mảng gốc

reduce()

flat()

flatMap()

Console.trace?
Ở đoạn gọi api thì đặt trace, nó sẽ cho bạn biết hàm đc gọi từ đâu

Javascript questions? xem

parseInt(string, radix)? xem

JSON.stringify(value, replacer, space)? xem

const data = JSON.stringify({

  username: "lydiahallie",

  level: 19,

  health: 90

}, ["level", "health"], "| ");

Output:

{

| "level": 19,

| "health": 90

}

Instanceof và Typeof là gì? xem | xem

Kiểm tra khóa tồn tại trong đối tượng ?
 Có 3 cách sau:
 - "key" in obj
 - obj.hasOwnProperty("key")
 - obj.key !== undefined

Event Loop và Call Stack là gì? xem | xem

Readonly object chỉ cho phép đọc? xem

Super trong constructor là gì? xem

Con trỏ this trong js là gì? xem

Ý nghĩa của các câu lệnh, điều kiện so sánh trong javascript? xem

Call, Bind, Apply là gì? xem

Closures là gì? xem

Toán tử bitwise là gì ?
// Cả hai đều làm tròn xuống
Math.floor(6.9) === 6 // true
Ngắn gọn: ~~6.9 === 6 // true

// Làm tròn lên
Math.ceil(6.3) // 7

// Làm tròn lên từ 0.5
// Làm tròn xuống từ 0.49
// parseFloat(6.789).toFixed(2) // '6.79'
// parseFloat(6.5).toFixed(0) // '7'
// parseFloat(6.4).toFixed(0) // '6'

Sự khác biệt giữa toán tử == và === trong JavaScript (Referential equality)? 

== So sánh giá trị không so sánh kiểu

=== So sánh giá trị và kiểu

let a = 5;

let b = "5";

console.log(a == b); // true

console.log(a === b); // false

So sánh object lồng nhau (Deep equality)?
JSON.stringify(object1) === JSON.stringify(object2)
- isDeepStrictEqual(object1, object2) Node built-in util module

- _.isEqual(object1, object2) lodash library.

So sánh hai giá trị giống nhau?

Object.is("hello", "hello"); // true

Object.is(window, window); // true

Object.is([], []); // false

Toán tử x++ vs ++x ?
Postfix increment

let a = 0; // 1

console.log(a++) // 0 // 1

Prefix increment

let b = 0; // 1

console.log(++b) // 1 // 2

Ví dụ: x++
let x = 1;
x++ // vì x chạy trước sau đó mới log x

console.log(x) // 2
hoặc
let x = 1;
console.log((x++, x)) // 2

Test vs Match ?

regexObject.test(String) // Kiểm tra  trả về truethy

string.match(RegExp) // Tìm kiếm trích xuất trả về [] or null

Module in Javascript ? xem

Importing and Exporting Modules in Javascript ? xem

Chế độ nghiêm ngặt trong JavaScript "use strict" ? xem

subtr vs substring ? 

console.log("abcdef".substr(0,3)); // returns "abc" <= theo index + length

console.log("abcdef".substring(1,3)); // returns "bc" <= Theo index + index

Decimal base là gì ?
for (let i = 0; i < 100000; i++) {}
Ngắn gọn:
for (let i = 0; i < 1e5; i++) {}
# giá trị các biểu thức sau đều là true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
parseFloat('1e5') => 100000;

Chú ý số thập phân khi so sánh chúng!


Một số mã hoá ..

var enc = window.btoa('Hello World'); // SGVsbG8gV29ybGQ=
var dec = window.atob(enc); // Hello World

Decode or encode a URL in JavaScript?

let uri = "employeeDetails?name=john&occupation=manager";

let encoded_uri = encodeURI(uri);

let decoded_uri = decodeURI(encoded_uri);

Type never trong typescript là gì? xem
Loại never không chứa giá trị.
Kiểu này never đại diện cho kiểu trả về của hàm luôn đưa ra lỗi hoặc hàm chứa vòng lặp không xác định.

Typescript rest parameters function (rest operator) ? xem "Chú ý có câu hỏi mẹo"

this.onDemo({ a: 3, c: 7, b: 9 }); // [{ a: 3, c: 7, b: 9 }]

this.onDemo(5,6,7); // [5,6,7]

onDemo(...arg: any) { 

let { a, b, c } = arg; 

console.log(a,b,c);

}

function fn(user, ...rest) {} // Ok!
function fn(...rest, user) {} // SyntaxError: Rest parameter must be last formal parameter

Rest parameter ?

function fun(...args){ // args [1, 2, 3, 4, 5]

    let sum = 0;

    for(let i of args){

        sum+=i;

    }

    return sum;

}

console.log(fun(1,2)); //3

console.log(fun(1,2,3)); //6

console.log(fun(1,2,3,4)); //13

console.log(fun(1,2,3,4,5)); //15

Currying function ?

const curryUnaryFunction = (a) => (b) => (c) => a + b + c;

curryUnaryFunction(1); // returns a function: b => c =>  1 + b + c

curryUnaryFunction(1)(2); // returns a function: c => 3 + c

curryUnaryFunction(1)(2)(3); // returns the number 6

IIFE là gì (Biểu thức hàm được gọi ngay lập tức) ?
(Immediately Invoked Function Expression)

(function () {

  // logic here

})();

Typescript function overloadings? xem

Typescript class và interface ? xem

Slice, Splice và Split? xem

Proxy trong javascript ? xem

Map, Set, WeakMap, WeakSet (Es6 Collection) ? xem | xem

Hiểu thế nào về var, let, const? xem



Access modifier trong typescript?

Access Modifier	Có thể truy cập trong lớp	Có thể truy cập trong lớp con	Có thể truy cập bên ngoài thông qua lớp
public (default)	Yes	Yes	Yes
protected	Yes	Yes	No
private	Yes	No	No

Câu hỏi mẹo for setTimeout?

for(var i = 0; i < 3; i++) {

    setTimeout(() => console.log(i), 1000) // 3. 3. 3

}

var a = 2;

for(var a = 0; a < 3; a++) {

    console.log(a); // 0, 1, 2

}

console.log(a); // 3

let a = 1;

for(let a = 0; a < 3; a++) {

    console.log(a); // 0, 1, 2

}

console.log(a); // 1

Vòng lặp nào nhanh nhất? xem

For vs ForEarch ? xem

For in (es1) khác for of (es6) như thế nào? xem | xem
Ở ví dụ này cần cài đặt
Node
Typescript
npm install -g typescript
tsc demo2.ts  => lệnh biên dịch ra file js
node demo2.js  => chạy file js

Format date với javascript dd/mm/yyyy?

var today = new Date();

var dd = String(today.getDate()).padStart(2, "0");

var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!

var yyyy = today.getFullYear();

today = dd + "/" + mm + "/" + yyyy;

console.log(today) // 24/05/2022

var date = new Date(Date.UTC(2019, 07, 07, 3, 0, 0));

console.log(new Intl.DateTimeFormat("en-GB").format(date)); // 07/08/2019

console.log(new Intl.DateTimeFormat("en-AU").format(date)); // 07/08/2019

Tính số ngày từ dữ liệu cho trước?

const MILLISECOND_DAY = 1000 * 60 * 60 * 24;

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / MILLISECOND_DAY);

console.log(diffDays(new Date(), new Date('2022-04-01')))

Required parameters?

const required = () => {

    throw new Error('Missing parameter');

};

const getAges = (yearOfBirth = required()) => new Date().getFullYear() - yearOfBirth;

Tạo mảng từ số đã cho có length = số đã cho xem
Array.from(Array(100).keys())
Array.from(String(420), Number)

javascript:void(0) ?

<a href="javascript:void(0)'" onclick="myFunction()">Click me</a>

javascript: là một địa chỉ URI đặc biệt.

javascript:"Hello" => Hello

javascript:void(alert("Hello")) => popup cảnh báo

javascript:void(0) => undefined (Trình duyệt dừng ở lại trang hiện tại giá trị trả không phải URL)

javascript:void("Hello") => undefined (Trình duyệt dừng ở lại trang hiện tại giá trị trả không phải URL)

Sự khác nhau giữa LocalStorage vs SessionStorage vs Cookie? xem

Session và cookie cái nào lưu vào database? xem
Session có thể lưu trên Database
Cookie thì không thể lưu trên Database
Session bảo mật hơn vì lưu trên máy chủ, nhưng yêu cầu tài nguyên máy chú nên hiệu suất kém
Cookie gửi từ máy chủ tới client và lưu trên client mỗi khi client tạo request phải kèm cookie truyền xuống cho máy chủ nhận dạng 

Arrow Function và Function thông thường có gì khác nhau? xem

Các chức năng các file cấu hình project angular như: .editorconfig, tsconfig.json ....?

Cách rút gọn đường dẫn import? xem

Async/Await ES7 vs Promises ES6 ? xem

Bắt lỗi khi dùng async/await là phải dùng try-catch!

Tham số đầu vào của function trong javascript có khai báo kiểu String, Number.. được không?
Không nhé có lỗi: Uncaught SyntaxError: Unexpected token ':'

Trong typescript truyền tham số khác kiểu có lỗi không?

Object vs object? xem

script defer vs async?

- defer tải theo thứ tự các script tải xong mới thực thi DOMContentLoaded (Phù hợp với load library cần sự logic của các file) 

- async thứ tự tải không có, script nào tải trước thì chạy trước không theo DOMContentLoaded

document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));

Trong Typesctipt làm sao đề Required Interface B?
interface A { a: string }
interface B { b: string }
interface C extends Partial<A> & Required<B> { 
     b // a không required nhưng b required, bỏ qua yếu tố sửa? trong interface

}

Hiểu thể nào về timeStamp?
new Date().getTime() // 1686743089913
Trả lời nó là time tính từ 1970 đến hiện tại

So sánh never vs void?
-  "never" được sử dụng để chỉ định rằng một hàm sẽ không bao giờ kết thúc một cách bình thường, trong khi.
- "void" chỉ đơn giản là đánh dấu rằng một hàm không trả về giá trị nào.

So sánh unknow với any?
- Unknow

let value: unknown; // Bạn không thể thực hiện bất kỳ thao tác nào trực tiếp trên giá trị unknown mà không có kiểm tra kiểu trước

if (typeof value === 'string') { // Bạn phải kiểm tra kiểu trước khi thực hiện các thao tác

  console.log(value.toLowerCase()); // Chỉ thực hiện thao tác khi kiểu là string

}

- Any

let value: any; // Bạn có thể thực hiện bất kỳ thao tác nào trực tiếp trên giá trị any mà không cần kiểm tra kiểu trước

console.log(value.toLowerCase()); // Không có lỗi

So sánh interface với type?

- type là kiểu dữ liệu tĩnh dùng dấu = để gán kiểu và sử dụng cú pháp union | hoặc intersection &

- interface kiểu định nghĩa cấu trúc của các đối tượng, có thể mở rộng extends, có thể sử dụng required hoặc không required ?.

Stateless vs Stateful,  Pure vs Impure ? xem

- Stateless là không lưu dữ liệu client trên server. Client gửi dữ liệu lên server, server thực thi xong, trả kết quả thì “quan hệ” giữa client và server bị “cắt đứt”
- Stateful Server lưu dữ liệu của client, ràng buộc giữa client và server được giữ sau mỗi request của client. Data có thể làm input parameters cho lần kế tiếp (xem thêm rest-vs-restful)

Pure function là gì ? xem

Higher-Order function là gì (HOF) ? xem | xem | xem | xem

Function Caching là gì ? xem

Lazy Function là gì ? xem

Function Currying  là gì ? xem

Function Compose là gì ?  xem | xem

Hoisting javascript là gì? xem | xem

Dãy Fibonacci là gì? xem

Đệ quy là gì (Recursion)? xem | xem

Merge sort - Sắp xếp hợp nhất xem

Insertion sort - Sắp xếp chèn

Priority queue - Hàng đợi ưu tiên

Selection sort - Sắp xếp lựa chọn

Bubble sort - Sắp xếp bong bóng

Quick sort - Sắp xếp nhanh chóng

Non-blocking và blocking? xem

thread và async? (Nên tìm hiểu để so sánh)

Bội số là gì? 
Bội số là số tự nhiên a chia hết cho số tự nhiên b. Khi đó a được gọi là bội số của b.
Trong tiếng Anh người ta thường gọi bội số là multiple.
Ví dụ: 12 chia hết cho 3 và được kết quả là 4. Vậy 12 gọi là bội số của 3.

Số nguyên là gì?
Số nguyên dương gồm: 1, 2, 3, 4, 5, 6, 7, 8,… Số nguyên âm gồm: -1, -2, -3, -4, -5, -6, -7, -8,… Các số 1; 5; 67; - 94; - 978 là các số nguyên - 26 ∈ Z ; 0 ∈ Z

Số nguyên tố là gì? xem
Số nguyên tố là số nguyên lớn hơn 1 không thể chia hết cho bất kỳ số nguyên nào khác ngoài chính nó và 1 (ví dụ: 2, 3, 5, 7, 11).

Số thập phân là gì? 
Số thập phân chính là những phân số có tử và mẫu số. Trong đó, mẫu số chính là các số có dạng 10, 100, 1000… Mẫu số chính là tích của những số 10.
Cách đọc: phần nguyên + “phẩy” + phần thập phân.
30,82: Ba mươi phẩy tám mươi hai.

Làm sao parse object nhưng vẫn giữ nguyên vị trí? xem

let jsonAjax = '{"15":{"9":"Veggie","12":"Graines","10":"Gluten"},"10":{"4":"sushi"}}'; 

Sau khi dùng JSON.parse(jsonAjax) thì nó sẽ sắp xếp theo thứ tự nhỏ đến lớn

Mong muốn phải giữ nguyên vị trí.

JS runtime cách xử lý bất đồng bộ, đồng bộ? xem

ES5 có dùng đc promise ko?
Trả lời không. Nếu muốn sử dụng thì dung thư viện ngoài Bluebird

Trước khi chưa có promise es6 thì dùng gì?

Trả lời: sử dụng các phương thức callback để xử lý các tác vụ bất đồng bộ trong JavaScript. Cách này thường gây ra hiện tượng "callback hell"

Even loop hoạt động như nào?

Bộ nhớ heap và stack hoạt động như nào?
 - Stack được sử dụng để lưu trữ các biến cục bộ và thông tin hàm (Hàm kết thúc bỏ khỏi stack)

 - Heap được sử dụng để lưu trữ các đối tượng và dữ liệu động.(Tự động thu hồi bộ nhớ)

Quản lý bộ nhớ trong heap được thực hiện bởi garbage collector để đảm bảo sử dụng hiệu quả bộ nhớ.

Call stack là gì?

Evenloop? xem

 - task queue (chạy setTimeout)

 - microtask queue (hay là job queue) (ưu tiên trước task queue) (chạy Promise(1), Fetch(2)) 

 - call stack (Ngăn xếp các cuộc gọi function theo cơ chê LIFO vào sau xuất trước)

Có bao nhiêu loại DOM? có 3 loại nhé
 - Dom cấu trúc html

 - Dom css

 - Dom event

XMLHttpRequest vs Fetch(es6)?

Cách handle sự kiện trên nhiều tab browser cùng lúc
(Ví dụ handle xoá localstorage trên nhiều tab)? xem

 - Cách 1: window.addEventListener('storage', (event) => { // if (event.key === 'tabStatus') })
 - Cách 2: const channel = new BroadcastChannel('tabChannel');

                 channel.addEventListener('message', (event) => { // event.data })
                 channel.postMessage('inactive'); // Dispatch event

Sự khác nhau giữa function declaration và expression? xem

Session và Cookie? xem

Trong js ngoài dùng try-catch thì còn cách nào khác để bắt lỗi ko?
Trả lời: Promise().catch(),  window.onerror, window.addEventListener('error', /**/), if else

Bubbling vs Capturing? xem

Kiểu dữ liệu Tuple trong typescript?
Cho phép bạn định nghĩa một mảng có kiểu dữ liệu khác nhau cho mỗi phần tử.
let variableName: [type1, type2, ...];
let person: [string, number] = ['John', 30];

Clean code javascript? xem

1. JavaScript là gì và nó được sử dụng để làm gì? 

2. Sự khác nhau giữa JavaScript và Java là gì? 

3. Giải thích cách hoạt động của closures trong JavaScript. 

4. Sự khác nhau giữa var, let và const trong JavaScript. 

5. Giải thích cách hoạt động của callback trong JavaScript. 

6. Sự khác nhau giữa '==' và '===' trong JavaScript. 

7. Giải thích cách hoạt động của async/await trong JavaScript. 

8. Giải thích sự khác nhau giữa function declaration và function expression trong JavaScript. 

9. Giải thích cách hoạt động của event bubbling và event capturing trong JavaScript. 

10. Giải thích cách sử dụng JSON trong JavaScript và cách chuyển đổi giữa JSON và JavaScript objects. 

1. JavaScript là một ngôn ngữ lập trình phía client được sử dụng để tạo ra các trang web tương tác và ứng dụng web. 

2. JavaScript khác biệt với Java về cú pháp, mục tiêu sử dụng và môi trường thực thi. 

3. Closures trong JavaScript cho phép truy cập vào biến từ một hàm bên ngoài sau khi hàm đã kết thúc.

4. var, let và const là các từ khóa để khai báo biến trong JavaScript, với sự khác nhau về phạm vi và cách thay đổi giá trị. 

5. Callback trong JavaScript là một hàm được truyền vào một hàm khác như một tham số và được gọi lại sau khi hàm gốc hoàn thành. 

6. '==' so sánh giá trị của hai biến trong JavaScript, trong khi '===' so sánh cả giá trị và kiểu dữ liệu. 

7. async/await là một cú pháp trong JavaScript để xử lý các tác vụ bất đồng bộ một cách đồng bộ và dễ đọc hơn. 

8. Function declaration là cách khai báo hàm thông qua từ khóa function, trong khi function expression là cách khai báo hàm thông qua biểu thức gán. xem

9. Event bubbling là quá trình khi một sự kiện xảy ra trên một phần tử con và lan truyền lên các phần tử cha, trong khi event capturing là quá trình ngược lại. 

10. JSON (JavaScript Object Notation) là một định dạng dữ liệu phổ biến được sử dụng để truyền dữ liệu giữa máy chủ và trình duyệt trong JavaScript.

1. JavaScript là gì và nó được sử dụng để làm gì? 

2. Sự khác biệt giữa biến let, const và var trong JavaScript là gì? 

3. Giải thích cách hoạt động của closures trong JavaScript. 

4. Điều gì là "hoisting" trong JavaScript? 

5. Giải thích sự khác biệt giữa synchronous và asynchronous trong JavaScript. 

6. Làm thế nào để xử lý lỗi trong JavaScript? Giải thích cách hoạt động của try-catch. 

7. Giải thích cách hoạt động của callback trong JavaScript. 

8. Sự khác biệt giữa arrow function và regular function trong JavaScript là gì? 

9. Giải thích cách hoạt động của Promise trong JavaScript. 

10. Làm thế nào để tránh callback hell trong JavaScript? 

1. JavaScript là ngôn ngữ lập trình và được sử dụng để tạo ra các trang web tương tác. 

2. Biến let và const có phạm vi block scope, trong khi var và function có phạm vi function scope. 

3. Closures trong JavaScript cho phép truy cập vào biến từ một hàm bên ngoài sau khi hàm đã kết thúc. 

4. Hoisting là quá trình di chuyển các khai báo biến và hàm lên đầu phạm vi của nó trước khi thực thi mã. 

5. Synchronous là khi các tác vụ thực hiện theo thứ tự, trong khi asynchronous là khi các tác vụ có thể thực hiện đồng thời và không chờ đợi nhau. 

6. Để xử lý lỗi trong JavaScript, chúng ta có thể sử dụng try-catch để bắt và xử lý các ngoại lệ. 

7. Callback trong JavaScript là một hàm được truyền vào một hàm khác như một đối số và được gọi lại sau khi hàm gốc hoàn thành. 

8. Arrow function là cú pháp viết ngắn gọn cho function và không có context riêng, trong khi regular function có context riêng. 

9. Promise trong JavaScript là một đối tượng đại diện cho kết quả của một tác vụ bất đồng bộ. 

10. Để tránh callback hell, chúng ta có thể sử dụng Promise hoặc async/await để quản lý các tác vụ bất đồng bộ một cách dễ đọc và dễ quản lý hơn.

1. Giải thích sự khác biệt giữa "undefined" và "null" trong JavaScript. 

2. Giải thích cách hoạt động của "hoisting" trong JavaScript và đưa ra ví dụ. 

3. Giải thích sự khác biệt giữa "let", "const" và "var" trong JavaScript và cách chúng xử lý phạm vi. 

4. Giải thích cách hoạt động của closures trong JavaScript và cung cấp một ví dụ. 

5. Giải thích sự khác biệt giữa "synchronous" và "asynchronous" trong JavaScript và cung cấp một ví dụ về việc sử dụng "async/await". 

6. Giải thích cách Promise hoạt động trong JavaScript và cung cấp một ví dụ về việc sử dụng Promise chaining. 

7. Giải thích cách xử lý lỗi trong JavaScript và cung cấp một ví dụ về việc sử dụng "try-catch" và "throw". 

8. Giải thích sự khác biệt giữa "shallow copy" và "deep copy" trong JavaScript và cung cấp một ví dụ. 

9. Giải thích cách hoạt động của "event delegation" trong JavaScript và cung cấp một ví dụ. 

10. Giải thích cách hoạt động của "prototypal inheritance" trong JavaScript và cung cấp một ví dụ. 

1. "undefined" và "null" khác nhau ở chỗ gì? 

   - "undefined" đại diện cho một biến chưa được gán giá trị, trong khi "null" đại diện cho một biến có giá trị rỗng hoặc không tồn tại. 

 

2. "Hoisting" hoạt động như thế nào trong JavaScript? 

   - "Hoisting" là quá trình di chuyển các khai báo biến và hàm lên đầu phạm vi của nó trước khi thực thi mã. 

 

3. Sự khác biệt giữa "let", "const" và "var" là gì? 

   - "let" và "const" có phạm vi block scope, trong khi "var" có phạm vi function scope. 

 

4. Closures hoạt động như thế nào trong JavaScript? 

   - Closures cho phép truy cập vào biến từ một hàm bên ngoài sau khi hàm đã kết thúc. 

 

5. Sự khác biệt giữa "synchronous" và "asynchronous" là gì? 

   - "Synchronous" là khi các tác vụ thực hiện theo thứ tự, trong khi "asynchronous" là khi các tác vụ có thể thực hiện đồng thời và không chờ đợi nhau. 

 

6. Promise hoạt động như thế nào trong JavaScript? 

   - Promise là một đối tượng đại diện cho kết quả của một tác vụ bất đồng bộ. 

 

7. Làm thế nào để xử lý lỗi trong JavaScript? 

   - Chúng ta có thể sử dụng try-catch để bắt và xử lý các ngoại lệ. 

 

8. Sự khác biệt giữa "shallow copy" và "deep copy" là gì? 

   - "Shallow copy" là sao chép tham chiếu, trong khi "deep copy" là sao chép toàn bộ đối tượng. 

 

9. "Event delegation" hoạt động như thế nào trong JavaScript? 

   - "Event delegation" là việc gắn sự kiện vào phần tử cha để xử lý các sự kiện từ các phần tử con. 

 

10. "Prototypal inheritance" hoạt động như thế nào trong JavaScript? 

    - "Prototypal inheritance" cho phép một đối tượng kế thừa các thuộc tính và phương thức từ một đối tượng khác thông qua prototype chain.

innerHtml vs outerHtml?

<div id="myElement">

  <h1>Hello, world!</h1>

</div>

innerHTML = "<p>Hi, there!</p>";

output: <div id="myElement">

  <p>Hi, there!</p>

</div>

outerHTML = "<span id='myElement'>Goodbye!</span>";

output: <span id="myElement">Goodbye!</span>

Tìm hiểu các mô hình MVC MVP và MVVM ? xem

Angular MVVM Architecture? xem | xem 

CICD là gì? xem

So sánh merge và rebase?

Flow Git chuẩn cho dev, test, product ntn?

Flow merge bugfix như thế nào? 

Gitlab CICD? xem

Github action? xem 

Docker angular? xem | xem

Dockerfile được sử dụng để xây dựng một hình ảnh Docker tùy chỉnh, trong khi Docker Compose được sử dụng để quản lý và chạy nhiều container liên quan đến ứng dụng.

Export vs import vs require là như thế nào?

import hay export là các tính năng mới của ES6.
Tuy nhiên trên thực tế thực hiện build ra production thì toàn bộ code sẽ chạy qua các bộ complie về dạng require và module.exports

// lib.js
const PI = 3.1415926;
function sum(...args) {
   log('sum', args);
}
function mult(...args) {}
// private function
function log(...msg) {}
export { PI, sum, mult };
 
import { sum } from './lib.js'; // Được sử dụng để load những thành phần từ file khác
import { sum, mult } from './lib.js'; // Nhiều thành phần có thể được import vào cùng một lúc
import { sum as addAll, mult as multiplyAll } from './lib.js'; // Có thể được bí danh (allias) để giải quyết vấn đề trùng tên
import * as lib from './lib.js'; // Tất cả các thành phần công khai có thể được import bằng cách cung cấp một không gian tên
 
const lib = require('./lib.js'); // Có thể được dùng để import tất cả các thành phần công khai
const { sum, mult } = require('./lib.js'); // require (thay vì import) được sử dụng để kéo module này vào một tập lệnh hoặc module 

CSS + Html

CSS cheat sheet xem

Bootstrap 4 Cheat Sheet xem

Ý nghĩa các selectors ‘+’, ‘>’ , ‘~’   xem

*tất cả các phần tử (elements)

divtất cả các thẻ div

div,ptất cả divs và paragraphs

div pparagraphs bên trong divs

div > ptất cả thẻ p, sâu một cấp trong div

div + pp cùng cấp div và đứng đầu tiên sau thẻ div

div ~ pcác thẻ p ngay sau div

.classnametất cả các phần tử với class

#idnamephần tử với ID

div.classnamedivs với classname nhất địng

div#idnamediv với ID nhất định

#idname *tất cả các phần tử bên trong #idname

Ý nghĩa các pseudo-classes ::ng-deep{} :host{} ... ? xem

a:linklink ở trạng thái bình thường

a:activelink ở trạng thái được nhấp

a:hoverlink đưa chuột qua nó

a:visitedlink đã truy cập

p::after{content:"yo";}thêm nội dung phía sau p

p::before thêm nội dung phía trước p

input:checkedchecked inputs

input:disableddisabled inputs

input:enabledenabled inputs

input:focusinput focus

input:in-rangevalue in range

input:out-of-rangeinput value out of range

input:validinput với giá trị hợp lệ

input:invalidinput với giá trị không hợp lệ

input:optionalkhông required attribute

input:requiredinput requred attribute

input:read-onlythuộc tính chỉ đọc

input:read-writekhông có qui dịnh chỉ đọc.

div:emptyphân tử không có con

p::first-letterfirst letter in p

p::first-linefirst line in p

p:first-of-typefirst of some type

p:last-of-typelast of some type

p:lang(en)p with en language attribute

:not(span)element that's not a span

p:first-childfirst child of its parent

p:last-childlast child of its parent

p:nth-child(2)second child of its parent

p:nth-child(3n+1)nth-child (an + b) formula

p:nth-last-child(2)second child from behind

p:nth-of-type(2)second p of its parent

p:nth-last-of-type(2)...from behind

p:only-of-typeunique of its parent

p:only-childonly child of its parent

:rootdocuments root element

::selectionportion selected by user

:targethighlight active anchor

Ý nghĩa của Attribute selectors? xem

a[target]links with a target attribute

a[target="_blank"]links which open in new tab

[title~="chair"]title element containing a word

[class^="chair"]class starts with chair

[class|="chair"]class starts with the chair word

[class*="chair"]class contains chair

[class$="chair"]class ends with chair

input[type="button"]specified input type

Quy ước đặt tên class trong css?
<block>__<element>--<modifier>
block: .<block-name-name...>

element: __<element-name-name...>

modifier: --<modifier-name-name...>
ví dụ: block__title--color-red

Phân biệt poseudo class vs poseudo element? xem

Ý nghĩa của :host-context(.class-name){}? xem

:host là gì? xem

/* :host chỉ cho phép css chỉ áp dụng trong component đó component child không bị ảnh hưởng */

/* :host ::ng-deep ghi đè tất cả các css nằm trong component đó kể cả component child  */
/* :host nếu không dùng mà chỉ dùng ::ng-deep thì sẽ bị ghi đè toàn bộ project! */

Cách chia grid trong css như thế nào? xem

Cách chia layout bố cục màn hình bằng float như thế nào? xem

Cách sử dụng position: absolute và relative? xem | xem

CSS3 có những gì? xem

Truy vấn media trong css? xem

Một số thẻ mới HTML5

1.  <header> : Định nghĩa phần đầu trang của trang web. 

2.  <nav> : Xác định một khu vực chứa các liên kết điều hướng. 

3.  <main> : Xác định nội dung chính của trang web. 

4.  <article> : Định nghĩa một phần độc lập, tức là một bài viết hoặc một phần nội dung có thể tái sử dụng độc lập. 

5.  <section> : Xác định một phần trong tài liệu, ví dụ: một chương, một phần, một tab, vv. 

6.  <aside> : Xác định một nội dung bên lề, thường được sử dụng cho các phần nội dung phụ hoặc quảng cáo. 

7.  <footer> : Định nghĩa phần cuối trang web, thường chứa thông tin bản quyền hoặc liên hệ. 

Sự khác nhau giữa :: và : trong css ví dự như ::after?
: là pseudo class
:: là pseudo elements

Phân biệt Padding và Margin trong css? xem

Cách tạo ellipsis dấu ba chấm bằng css? (text-overflow: ellipsis) xem

Cách sử dụng transform như thế nòa? (Dùng để quay - rotate) xem

Cách sử dụng Transition như thế nào? (Dùng điều khiển tốc dộ) xem

Cách sử dụng Animation như thế nào? xem

Cách sử dụng Grid như thế nào, ý nghĩa của các thành phần trong grid? xem

Cách sử dụng flexbox như thể nào? xem | bs4

Chú ý về cách viết css!

div.cool => match div và cool  

div .cool => match cool

Box-sizing border-box là gì? xem | xem

Set style cho <li> thứ 2 từ dưới lên làm cách nào? xem
trả lời: dùng li:nth-last-child(2) { // ToDo }

css và scss có mấy kiểu comment? 
trả lời: có 2 kiểu comment chính
/* nội dung */
// nội dung 

Position có mấy loại? xem
Có 5 loại (Relative,Absolute,Static,Fixed,Sticky)

Display có mấy loại? xem
Có 6 loại (None, Block, Inline, Inline-Block, Flex, Grid)

- Inline-Block, Inline
  - giống nhau đều nằm trên một hàng
  - khác nhau inline-block có tạo khối width height trên <span> <a>..

Sự khác biệt cách hiển thị khi dùng display inline-block ? 

<div width="100px">
    <span width="50px">a</span><span width="50px">b</span> // Sẽ nằm ngang
</div>
// vs
<div width="100px">
    <span width="50px">a</span> // Nằm theo chiều dọc
    <span width="50px">b</span>
</div>

Display: flex; hay đi kèm với thuộc tính gì?
flex-direction: xem
    - "row" (default),
    - "row-reverse",
    - "column" ,
    - "column-reverse".
justify-content: xem
    - "flex-start" (default),
    - "flex-end",
    - "center",
    - "space-between",
    - "space-around",
    - "space-evenly". 
align-items:  xem
    - "stretch" (default),
    - "flex-start",
    - "flex-end",
    - "center",
    - "baseline". 
flex-wrap: xem
    - "nowrap" (default),
    - "wrap",

    - "wrap-reverse". 
align-content:  xem

    - "stretch" (default),
    - "flex-start",
    - "flex-end",
    - "center",
    - "space-between",
    - "space-around". 

Css có bao nhiêu đơn vị đo lường ~15?
- đơn vị tương đối như: rem, em, %, vw, vh, ex, ch, vmin, vmax
- đơn vị tuyệt đối như: px, pt, cm, mm, pc, in. 

+ Nếu chiều rộng 1000px chiều cao 800px
- 1vw = 10px (1% của 1000px)

- vmax giữa width, height cái nào lớn nhất thì vmax = giá trị lớn nhất đó

- vmin giữa width, height cái nào nhỏn nhất thì vmin = giá trị nhỏ nhất đó

Sự khác nhau giữa đơn vị "em" và "rem"? xem

- rem tham chiếu với font-size root html (eg: font-size:16px thì element 1rem = 16px)

- em tham chiếu font-size container chứa nó (eg: font-size:16px thì element con 1em = 16px)

So sánh align-items và align-content?

Thẻ meta trong html5 để làm việc gì? xem

Ý nghĩa của các thẻ mặc định trong Html? xem

Sự khác nhau giữa html4 và html5? xem

Sự khác nhau giữa bootstrap3 và bootstrap4? xem

Sự khác nhau giữa SASS và LESS? xem

Sự khác nhau giữa SASS vs SCSS? xem

Sự khác nhau giữu CSS 2 và CSS3? xem

Sự khác nhau giữa @extend và @include  trong SASS? xem

Sự khác nhau giữa embed và iframe? 

Có biết về chuẩn UX/UI ko?

Mô hình phát triển một phần mềm

Agile & Waterfall

AGILE Tuyên ngôn Note: => (Hơn là) [1] - Cá nhân & sự tương tác => Quy trình & công cụ. [2] - Phần mềm chạy tốt => Đủ tài liệu. [4] - Cộng tác với khách hàng => Tài liệu đầy đủ. [4] - Phản hồi với thay đổi => Bán sát kế hoạch.

Các bước thực hiện Agile & Waterfall [1] - Lập kế hoạch [2] - Phân tích yêu cầu [3] - Thiết kế [4] - Implement [5] - Testing [6] - Bàn giao sản phẩm

Agile: - Chia nhỏ Sprint, mỗi sprint là 6 bước, bàn giao cho KH.

Waterfall: - Chia nhỏ Sprint, mỗi sprint là 1 bước, bàn giao cho KH sprint cuối.

- Khó lấy chính xác yêu cầu -> Khi requirement thay đổi, phải thực hiện lại bước thiết kế, phát triển, kiểm thử, viết tài liệu,…. Kết quả vượt quá ngân sách. Scrum:
- Scrum là Agile nhưng Agile không phải Scrum.

- Agile là triết lý, trong khi Scrum là quá trình thực hiện triết lý Agile. - Agile là phương pháp phát triển và dựa trên cách tiếp cận gia tăng và lặp lại; trong khi Scrum là một trong số nhiều khung triển khai hoặc quy trình của phương pháp nhanh. -Scrum cung cấp các mô-đun gia tăng cho khách hàng mỗi tuần hoặc hai tuần. - Scrum có 3 vai trò sau: [1] - Product Owner [2] - Scrum Master [3] - Development Team (Testers, Designers, và Ops Engineers.)

Agile scrum vs Agine kanban là gì? xem

Angular CLI

Làm sao để update version angular?
ng update @angular/cli @angular/core
or
ng update @angular/cli@9.0.0 @angular/core@9.0.0

ng build --prod?
Error: Unknown argument: prod
Fix => ng build --configuration=production

Xử lý lỗi khi publish library Ivy?
ERROR: Trying to publish a package that has been compiled by Ivy. This is not allowed. Please delete and rebuild the package, without compiling with Ivy, before attempting to publish.
npm publish --ignore-scripts

Angular tạo nhiều project trong một workspace? xem