# Review No. 1

By

Paul Tomoiu

●

In 

Angular, 

frontend, 

web

●

Published 2024-01-06

This page contains questions to improve/test your Angular skills.

Angular is a TypeScript-based open-source web application framework developed by Google for building dynamic, single-page web applications (SPAs).

• Two-way data binding
• Dependency injection
• Modular architecture with components
• Services
• Directives
• Templates

Two-way data binding is a synchronization mechanism between the model and the view. Changes in the model update the view, and changes in the view update the model automatically.

Dependency Injection is a design pattern in which a class's dependencies are provided from the outside. Angular uses a hierarchical injector to manage the dependency injection.

Angular CLI (Command Line Interface) is a command-line tool (written in Node.js) used for initializing, developing, and maintaining Angular applications. It helps automate various development tasks.

Node.js is a runtime environment for executing JavaScript code on the server side.

Modules in Angular are containers for components, directives, and pipes. They help in:

• organizing better the big applications
• load the modules when we need it (lazy & eager loading)

The types of modules available in Angular include:

• Root modules : used to bootstrap the application (AppModule for instance)
• Core modules : are part of the Angular core and provide essential functionality
• Routing modules : for mapping the components to URLs
• Shared modules : modules which can be used by Feature modules
• Feature modules : the modules which bring the application functionalities

A component is a basic building block of an Angular application. It represents a part of the user interface (UI) and encapsulates the logic and data for that portion of the application.

A Component teaches the browser new tags, and it is defined in a .ts file.

The ngOnInit lifecycle hook is used for initialization logic in a component.

ngOnChanges

• when an @Input property gets a new value
• access to previous values (through SimpleChanges)

ngDoCheck

• when a property (@Input or not) change its value (after ngOnInit)
• NO access to his previous value

ngOnDestroy is used to release resources that could lead to memory leaks if not properly cleaned up.

We can:

• unsubscribe from Observables
• clear Intervals and Timeouts
• detach Event Listeners

Document Object Model (DOM) defines a standard way (it is a specification) for web browsers and programming languages to represent and modify web documents (such as HTML and XML).

They are two different markup languages. HTML itself is not a subtype of XML.

Directives are instructions in the DOM (Document Object Model) that tell Angular to modify a DOM element.

In Angular, custom directives are used to extend the functionality of HTML elements. You can create custom directives to encapsulate and reuse behavior throughout your application.

In Angular we have 2 types of directives :

• structural directives : NgIf, NgFor, NgSwitch
• non-structural directives : NgClass, NgStyle, NgModel

A Service in Angular is singleton object that is used to organize and share code across the application. The services are commonly used for tasks such as manipulate data, sharing state, or performing common functionality.

Lazy Loading is a technique in Angular where modules are loaded on-demand (when they are required). This helps in reducing the initial loading time of the application.

In Angular, pipes are a way to transform and format data in the template or in the .ts file. In the ts file, we can use the transform() method.

• ng test : runs the unit tests in the project
• ng build : build the application in dist folder. We can specify the base href using --base-href option, or we can build the application using --aot (Ahead Of Time) option.
• ng upgrade : for upgrading the application
• ng serve : build and run the application. We can use the following options: --allowed_hosts, --disable-host-check, --port, --host.

We can consider angular.json (configuration file) as entry point. In this file we have the location of the main.ts file which points to the bootstrap module (which includes the bootstrap component).

In TypeScript, the export keyword is used to make a class, function, variable available for use in other files or modules. When a class is marked with export, it means that the class can be imported and used in other files.

In Angular, NgModule (NgModule stands for "Angular Module") is a decorator that is used to define and configure modules.

@NgModule({
  declarations: [AppComponent, MyComponent, MyDirective, MyPipe],
  imports: [RouterModule, HttpClientModule],
  providers: [MyService],
  bootstrap: [AppComponent],
  entryComponents: [DynamicComponent],
  exports: [MyComponent],
})

• declarations : declares the components, directives, and pipes that belong to that module. These declared elements are then available for use within the module.
• imports : import other modules to reuse their functionality.
• providers : to specify the services that are provided at the module level. This ensures that a single instance of the service is shared across the components and services within that module.
• bootstrap : to specify the main component of the module that should be bootstrapped when the application starts.
• entryComponents : to specify components that are not referenced in the templates but are created dynamically, such as through dynamic component loading or Angular's ViewContainerRef.createComponent method.
• exports : to make certain components, directives, or pipes from the module available for use in other modules that import it.

The Observables are objects which emits streams of values (a kind of producer).

• COLD observables : you receive all data when you subscribe to it
• HOT observables : you receive data from it continuously

An Observer is an object (a subscriber) which subscribes to an Observable and do something "on next", "on error" and "on complete".

A Subject is an object which is an Observable and an Observer in the same time. A Subject can see only the NEW data from the subscription time.

A BehaviourSubject is a Subject which can see the INITIAL/LAST value and the NEW data from the subscription time.

A BehaviourSubject is a Subject which can see the LAST values and the NEW data from the subscription time.

A AsyncSubject is a Subject which can see the LAST value of the stream when the stream completes.

• filter(value => value % 2 === 0) : filter the values from the stream
• tap(value => console.log(`Value: ${value}`)) : used for seeing the values in the stream
• map(value -> value+1) : used for modifying the values in the stream
• map((value,index) -> value+index) : used for modifying the values in the stream
• scan((acc, value) => acc + value, 0) : return stream values based on a logic
• skip(3) : the first 3 values are skipped
• take(3) : we take only the first 3 values from the stream
• takeWhile(val => val < 3) : when the condition is not met the stream will stop
• skipWhile : acts as filter, but its behaviour is opposite
• of(5,6,7).concatMap((val, i)) => Observable.Of(0,1,val)) => 0,1,5, 0,1,6, 0,1,7
• reduce((acc, value) => acc + value, 0) : return the last value of logic defined inside operator

import { of } from 'rxjs';
import { reduce } from 'rxjs/operators';

of(1, 2, 3, 4)
  .pipe(
    reduce((acc, value) => acc + value, 0)
  )
  .subscribe(result => console.log('Final result:', result)); // Final result: 10

import { of } from 'rxjs';
import { scan } from 'rxjs/operators';

of(1, 2, 3, 4)
  .pipe(
    scan((acc, value) => acc + value, 0)
  )
  .subscribe(result => console.log('Current value:', result));
// Output:
// Current value: 1
// Current value: 3
// Current value: 6
// Current value: 10

A Callback is a function received as parameter by another function, and it is intended to be executed at a later point in time or in response to a specific event.

Before Angular 14

export class MyComponent {
    public loadingService;
    
    constructor() {
        this.loadingService = ServiceLocator.injector.get(LoadingService)
    }

    showLoading() {
        this.loadingService.show();
    }
}

After Angular 14

export class MyComponent {
    public loadingService;
    
    constructor() {
        this.loadingService = inject(LoadingService)
    }

    showLoading() {
        this.loadingService.show();
    }
}

angular.json

• configure how Angular CLI commands like ng build, ng serve, and ng test behave.
• specify the location of main.ts

main.ts

• bootstraps the Angular application by loading the root module (AppModule)

tsconfig.json

• TypeScript configuration file that sets compiler options

package.json

• we have the application dependencies
• the scripts we can run with npm (for more flexibility)

• Provides environment-specific configurations (API URLs or feature flags)