React VS Angular

Angular is a component-based framework used to build SPA. It has well-integrated libraries to support different features and is easy for scaling and maintaining. (emulate shadow DOM, two-way binding)

React is a JS library used to build UI components. (virtual DOM, one-way binding)

AngularJS VS Angular

AngularJS based on JS, using MVC, directives. Angular based on TypeScript, using components. Compared to AngularJS, Angular has better performance because of new architecture and algorithms (change detection mechanism)

Files Structure

four main folders: src, node_modules, assets, configuration files

• src: source code

  • index.html main.ts: entry point
  • app: components, services, modules, pipes, directives
  • assets: static files (images, fonts)
  • environments: environment variables
  • styles.css: global styles
• node_modules: dependencies
• assets: static files
• configuration files: configuration files

ngGenerate: generate components, services, modules, pipes, directives. It will be generated under app path, and auto import in the module.js

Angular CLI

ng new: create a new project ng serve: run the project on live ng build: build the project ng generate: automatically generate the basic structure of files and export them to the module. Time saving

lifecycle hooks

Lifecycle mainly includes three parts:

• init : init component class and render the view along with its child views.
• change detection: detect the changes when creates, updates, and destroys
• end: destroys the component instance and removes the rendered template from the DOM

Hooks:

• ngOnInit: initialize the component after the first ngOnChanges executed
• ngOnChanges: run after detecting the changes of the input properties
• ngDoCheck: manually detect changes that angular will not detect (onpush strategy) run after ngOnChanges and ngOnInit

Change Detection

Change Detection performs a check against two states. If a difference between the two is detected, then something has changed and Angular will update the view.

two strategies:

• CheckAlways : Default strategy. It checks the component whenever the change detection runs.
• onPush : skip unnecessary checks for this component and all it’s child components

shadow DOM

The Shadow DOM allows groups of DOM implementation to be hidden inside a single element and encapsulates styles to the element.

By encapsulating the DOM and CSS within a Shadow Tree, Shadow DOM effectively isolates styles from one component to another. create components styles that will only apply to the component and not impact the rest of our page.

Angular use emulated shadow DOM instead of native shadow DOM to support older browsers.

Text interpolation

``: wrapped with two curly brackets to display the value of a component property

Data binding

Event binding

listen and respond to user actions such as press key, move mouse, clicks. : (click)=”onSave()” method handled in ts file

Property binding

set values for properties of HTML elements or directive.

• square bracket [property] = “value”

Two-way binding

combine event binding and property binding together. It allows data to flow both ways between the component class and its template.

• <input [(ngModel)]="name"> = “value”. ngModel is a directive, bind both the value and the event together.

Two-way binding in parent & child - Emitting events

one-way binding a value from parent to child, the child only receive the value, but if the value changed in child, the parent will not receive the change. To achieve two-way binding, we need to use @Output and EventEmitter.

Create an EventEmitter with the same name as the input variable but with the word “Change” appended to it.

Form

Template-driven forms

Template form is based on template directives, it uses two-way binding to update the changes and it is easy to use compared to reactive form.

• ngForm: directive to create a form
• ngModel: directive to create a form control

Reactive forms

is model-driven, more complex to set up but powerful, it offers more control to the form. Forms are designed in components, binded to our templates, using FormGroup to define and using FormControl to control the input.

• FormGroup: create a group of form controls
• FormControl: create a form control

FormBuilder is short-hand for FormGroup and FormControl, it can create forms, define initial values, and specify validation rules.

Form validation

• template-driven validations : built-in directives, such as required, minLength, maxLength, pattern. Or use Validation State like valid, invalid

• reactive form validations : use validators specified in the formControl, or use customized validators.

To create custom validations: create a function take formControl as input and return null or error. To use it, put it in the formControl.

Pipes

Pipes are used to transform data. used in interpolation, property binding, and event binding.

• date : format date
• uppercase : convert text to uppercase
• lowercase : convert text to lowercase

Observables & subject

Observables are async data streams used in angular for handling async tasks. can emit zero or more values over time. It can be followed by pipe and subscribe functions.

Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time

• subject : A Subject is a special kind of Observable that allows values to be multicasted to many Observers. A Subject can act as both an observable and an observer. It can be treated as an array of observables. you can send to it and receive from it. Observable means you can receive from it only.

Use subject: If you want several subscribers to get the same value

Use Observable : only one observer to get the value