Angular Q&A

Marsh 05-25-2021

-> Angular 10 - New Features

Warnings on CommonJS Imports
A dependency packed with CommonJS in your projects can affect the speed of app loading and lead to slower functionality. However, with the Angular 10, developers have got warnings regarding using dependencies packed with CommonJS.

Optional Stricter Settings
Angular 10 provides a stricter project setup for making a new workspace using ng new.
ng new –strict
After allowing this flag, it starts with the new project using some new settings that enhances maintainability, allows the CLI for performing advanced optimizations on the app, and helps catch bugs properly beforehand. Permitting this flag helps app configuration as side-effect free to make sure more developed tree-shaking.

New Date Range Picker
Angular 10 has come with the all-new date range picker. To use it, you can utilize elements of both mat date range picker and mat date range input.

-> Angular 11 - Features & Updates

One of the main differences between angular 10 vs Angular 11 is that in the earlier versions while using RouteReuseStrategy #shouldReuseRoutemethod, there was a concern regarding future and next routes being traded for child routes. This issue is fixed in angular version 11 however you need to adjust your code if you are using it in your code already.

Roadmap: The roadmap has been updated as one of the new features of Angular 11 on in-progress projects.
Pipes: Angular recent version has fixed the typing for date and number pipe which earlier used to take any type as input. In the datetime, datepipe will round off the millisecond part to the nearest millisecond provided.
Browser Support/cleaning: The support for IE 9, 10, and IE mobile in angular 11 is removed.
viewEncapsulation: Angular 11 removes the ViewEncapsulation.Native. Instead, in this new release, you can use ViewEncapsulation.ShadowDom.

-> How do you manage state in angular?

State Management is a term that defines a way we can store data, modify it, and react to its changes.

Use only service

Add state management libraries(e.g NGRX/NGXS).
Benefits: 1.Largeteam:You can split development tasks between people easily if you have chosen CQRS architecture. Your top people can work on domain logic leaving regular stuff to less skilled developers. 2.Difficult business logic: CQRS forces you to avoid mixing domain logic and infrastructural operations. 3.Scalability matters: With CQRS you can achieve great read and write performance, command handling can be scaled out on multiple nodes and as queries are read-only operations they can be optimized to do fast read operations.

-> What is NgRx?

NgRx is a framework for building reactive application in Angular. NgRx provides libraries for:

Managing global and local state.

Isolation of side effects to promote a cleaner component architecture.

Entity collection management.

Integration with the Angular Router.

Developer tooling that enhances developer experience when building many different types of applications.

NgRx packages are divided into a few main categories

State

Store - RxJS powered global state management for Angular apps, inspired by Redux.
Effects - Side effect model for @ngrx/store.
Router Store - Bindings to connect the Angular Router to @ngrx/store.
Entity - Entity State adapter for managing record collections.
ComponentStore - Standalone library for managing local/component state.

Data

Data - Extension for simplified entity data management.

View

Component - Extension for fully reactive Angular applications.

Developer Tooling

Store Devtools - Instrumentation for @ngrx/store that enables visual tracking of state and time-travel debugging.
Schematics - Scaffolding library for Angular applications using NgRx libraries.

-> benefits of centralized state in angular

Data flow is explicit and predictable as it's always coming from one source.
1.Easily control the change detection that significantly boosts the performance in applications.
2.The selectors solve one of the problems of the Observable Data Services approach (custom state management) — combining of different separate states. A Selector also can pass and group together different slices of the State in order to create the data that a specific component needs.
3.Moreover, we have effects, which also give us a third benefit and solves the issue within sequential requests that custom state management approach doesn’t in a proper way. An Effect listens to an Action and after processing on the side dispatches one or more Actions, which are also listened by another Effect(s) that fires up another Action(s), which are then again and again processed by the reducers. Such chaining might be as long as you need.

The fourth but a not less important benefit of Redux methodology is that we are separating the business logic from rendering, that allows testing two parts independently.

-> The Angular performance tuning steps

Apps will start to become slow as they grow if you are not aware of how to develop performant Angular apps.
1.OnPush change detection:The default change detection behavior for components is to re-render every time an asynchronous event has happened in the app such as click, XMLHttpRequest, setTimout. This can become a problem because this will cause many unnecessary renderings of the templates, that may not have been changed.

OnPush change detection fixes this by only re-rendering a template if either:
1)One of its input properties has gotten a new reference
2)An event from the component or one of its children eg. click on a button in the component
3)Explicit run of change detection
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoListComponent implements OnInit {

2.Lazy loading modules:
Lazy loading routes will make sure that a feature will be bundled in its own bundle and that this bundle can be loaded when it is needed.

To set up lazy loading we simply create a child route file like this in a feature:

3.Improve page load with Angular PWA:
Caching the static content in the browser will also improve the app performance. This is easily done using Angular PWA which will use service workers to cache the static content, that is the js, css bundles, images and static served files, and present them without making a call to the server.

I have already created a guide to how to setup caching with Angular PWA you can read here.

4.Using trackBy in ngFor:
When using ngFor and updating the list, Angular will by default remove the whole list from the DOM and create it again, because it has no way, by default, to know which item has been added or removed from the list.
The trackBy function is solving this by allowing you to provide Angular with a function used for evaluating, which item has been updated or removed from the ngFor list, and then only rerender that.

5.Pure pipes instead of methods (including async):
Methods in a template will get triggered every time a component gets rerendered. Using a pure pipe, then you are only recomputing when the input to the pipe changes.
An easy way to do this is to use Lodash memorize method.

6.Cache values from pipes and pure functions:
Even when using pure pipes, we can optimize this further by remembering/caching previous values, so we don’t need to recompute if we already run the pipe with the same input in the past.

7.Cache HTTP requests better:
With Angular PWA you can easily set up caching rules for HTTP calls to give a faster user experience without cluttering your app with a lot of caching code. Either you can optimize for **freshness **or **performance, **that is, you can either choose to only read the cache if the HTTP call times out or first check the cache and then only call the API then the cache expires.

I have a guide with a video showing you how to do this here.

8.Detach/manual change detection:
In extreme cases, you would want to only trigger change detection manually for some components. That is if a component is instantiated 100’s of times on the same page and rerendering every one of them is expensive you can turn off automatic change detection completely for the component and only trigger changes manually in the places it is necessary.

9.Sever-side rendering with Angular Universal:
For Angular apps that are containing indexed pages, it is recommended to server-side render the app. This will make sure the pages are being fully rendered by the server before shown to the browser which will give a faster page load. This will require that the app is not dependent on any native DOM elements, and you should instead inject eg. document from the Angular providers.

Read more about how to setup Angular Universal in an app here.

-> web workers angular

Web workers allow you to run CPU-intensive computations in a background thread, freeing the main thread to update the user interface. If you find your application performs a lot of computations, such as generating CAD drawings or doing heavy geometrical calculations, using web workers can help increase your application's performance.
ng generate web-worker app

-> what happens when ng build

It will compiles the Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
The ng build command is intentionally for building the apps and deploying the build artifacts.

What is the difference between ng build and Ng build prod?

They are both commands that used to build an application.

how to deploy dist folder angular?

After ng build, it just needs a server to execute it, instead of ng serve you can install an http-server from your terminal npm i -g http-server --save then execute your project from the dist folder using the command (y) :

http-server ./dist

how many angular modules are there in your project?

Every Angular application has at least one module, the root module. You bootstrap that module to launch the application.

Some basic Modules:
// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule} from "@angular/common/http";
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

// @NgModule decorator with its metadata
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
NgModule: which, like the root module, lets you use the @[NgModule](https://angular.io/api/core/NgModule) decorator;
CommonModule:which contributes many common directives such as ngIf and ngFor.
BrowserModule configures the Angular application for the browser which needs to be done only once.

use of declaration in module angular

declarations :

Declarations are used to declare components, directives, pipes that belongs to the current module.

Everything inside declarations knows each other.

Declarations are used to make directives (including components and pipes) from the current module available to other directives in the current module.

Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.

providers :

Providers are used to make services and values known to dependency injection.

They are added to the root scope and they are injected to other services or directives that have them as dependency.

// imports for the application
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
// declarations for the application
import { AppComponent } from './app.component';
// providers for the application
import { UserService } from './user.service';

@NgModule({
declarations: [
    AppComponent,
],
imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }

Share one component of two modules

Usually, what I do is to create a shared module and create this component inside the module.
Then Declare and export the ShareComponent.

shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedComponent } from './shared';

 @NgModule({
   declarations: [
     SharedComponent
   ],
   imports: [
     CommonModule
   ],
   exports: [
     SharedComponent
   ],
   providers: [

   ]
 })
 export class SharedModule { }
Import SharedModule in AppModule and any other Modules.

app.module.ts

  import { SharedModule } from './shared.module';
  @NgModule({
    imports: [
      SharedModule
    ]
  })

What is entry component in angular?

how does the authentication works in angular application

OpenID Connect

OpenID Connect is the go to protocol for modern authentication, especially when using Single Page Applications, or client-side applications in general.
Usually, we use it together with oidc-client library to handle the SPA Authentication.

how does inheritance work in javascript?

In ES5, there are 3 steps we need to do:

1.In Child function, we need to write Parent.call(this), to simulate super()
2.Change Child prototype by Child.prototype = Object.create(Parent.prototype)
3.Change Child prototype constructor back to Child.

function Person(firstName, lastName) {
    this.FirstName = firstName || "unknown";
    this.LastName = lastName || "unknown";            
}

Person.prototype.getFullName = function () {
    return this.FirstName + " " + this.LastName;
}
function Student(firstName, lastName, schoolName, grade)
{
    Person.call(this, firstName, lastName);

    this.SchoolName = schoolName || "unknown";
    this.Grade = grade || 0;
}
//Student.prototype = Person.prototype;
Student.prototype = new Person();
Student.prototype.constructor = Student;

var std = new Student("James","Bond", "XYZ", 10);
            
alert(std.getFullName()); // James Bond
alert(std instanceof Student); // true
alert(std instanceof Person); // true

In ES6, we can directly use extends keyword to do inheritance. And call super() if we have a constructor function.

T-mobile 05-14-2021

T-Mobile 05/14/2021
-> quick introduction
-> what is your workflow
-> use of components?

A component controls a patch of screen called a view.

-> what is module?

It is a collection of components, services providers, and other code files. They can import functionalities exported from other Modules.

-> different types of modules in angular

We have 3 types of modules:
Feature modules: Depending on the size of your application, you may have A LOT of Feature Modules. Breaking things up into domain-specific areas can help in the long run for development.
One of the main reasons to break your features up into different modules is lazy loading.

Core Module: The Core Module is where we want to put our shared singleton services. So the services that we want only one instance of while having them shared among multiple modules should live here.
Shared Module: Shared module is there to keep components,directives etc which are required by many modules like Header(Navbar),footer,sidebar etc.

-> what is the difference between angular expression and javascript expression

JS expression: A unit of code that can be evaluated to a value is an expression. There are Arithmetic Expressions(10), String Expression('Hello'), Logical Expression(10>9), Primary Expressions, Left-hand-side Expressions(i=10), Assignment Expressions
Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{ expression }}

The key difference between the JavaScript expressions and Angular expressions:

Context : In Angular, the expressions are evaluated against a scope object, while the Javascript expressions are evaluated against the global window
Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in Javascript undefined properties generates TypeError or ReferenceError
No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an angular expression

-> architecture of your project
-> disadvantages of use dependency injection angular
-> advantages of using singleton design pattern

Campgemini

-> Brief introduction about the recent project
-> application architecture of the project(client server architecture)
-> what is the middle layer
-> what is the benefit of angular
-> What are the types of binding in angular?
-> what is single page application in angular
-> how the angular framework works
-> how to do bootstrap app module in angular

install both bootstrap and angular
update your angular.json file

"styles": [
  "styles.css",
 "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],

-> difference between component and module angular?

Both modules and components are a part of the functionality of the whole application.

The module can be considered as a collection of components, directives, services, pipes, helpers, etc. It is one of the first basic structures in an Angular App and every Angular app has a root module, named AppModule, which provides the mechanism that launches the application.

The component controls a patch of the screen called view. Each component can use other components. If they are not in the same module, all you need to do is to export those components and import that module into the module where we need the functionality.

-> How do you use one component in multiple modules?

Create a shared module and import the component.
Then, import the shared module to where you need it.

-> how to create a shared component in angular
-> Import module A into module B
-> Use of provider in angular

A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.

-> why services used in provider angular

Angular distinguishes components from services to increase modularity and reusability. By separating a component's view-related functionality from other kinds of processing, you can make your component classes clean and efficient.
By defining such processing tasks in an injectable service class, you make those tasks available to any component.
You can also make your application more adaptable by injecting different providers of the same kind of service, as appropriate in different circumstances.

-> What is service provider in angular?

In Angular, a service can be anything from a simple value, a function, or a feature that your application needs. In most cases, however, services in Angular are classes that perform some specific function. To be able to use a service via dependency injection you must register it with at least one provider.

A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.

-> How do I add a provider to my components?

@Component({
/* . . . */
  providers: [UserService]
})

-> what is the difference between add service provider in module and component

Scope:
Generally, provide services the whole application needs in the root module and scope services by providing them in lazy loaded modules.

The router works at the root level so if you put providers in a component, even AppComponent, lazy loaded modules, which rely on the router, can’t see them. Providing a service in the component limits the service only to that component and its descendants. Other components in the same module can’t access it.

Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components.

->Dependency injection in angular

Dependency Injection is a design pattern.
Dependencies are services or objects that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.

-> angular ivy performance

Ivy is the code name for Angular's next generation compilation and rendering pipeline
for new Angular CLI projects, you can just use the --enableIvy flag when running your ng new script.

Smaller bundle size. We can see that our bundle shrunk in 77KB which is 15% of the bundle size, that means our website’s loading time will be 15% faster.

In Ivy that becomes much more simpler, every component now references child components or directives though much more cleaner public API. The meaning is when we change something, e.g: the implementation of our NgIf, we won’t need to recompile everything, we can just recompile the NgIf and not the AppComponent class.

-> What is the difference between the JIT compiler and the AOT compiler?

JIT--Just In Time, AOT--Ahead Of Time
JIT - Compile TypeScript at run time

Compiled in the browser.

Each file compiled separately.

No need to build after changing your code and before reloading the browser page.

Suitable for local development.

AOT - Compile TypeScript during build time.

Compiled by the machine itself, via the command line (Faster).

All code compiled together, inlining HTML/CSS in the scripts.

No need to deploy the compiler (Half of Angular size).

More secure, original source not disclosed.

Suitable for production builds.

-> lifecycle hooks

Type	Target
ngOnChanges()	Called after bound input property changes.
ngOnInit()	Called when the component is initialized.
ngDoCheck()	Called during every change detection run.
ngAfterConentInit()	Called after ng-content has been projected into view.
ngAfterContentChecked()	Called after every time the projected content has been checked.
ngAfterViewInit()	Called after the component's view and child view have been initialized.
ngAfterViewCheked()	Called every time the view and child view has been checked.
ngOnDestroy()	Called before Angular destroys the directive or components. Unsubscribe Observables and detach event handlers to avoid memory leaks.

-> method can use in ngoninit but not afterviewinit?

Methods that are used to set the initial values of the view.

-> What is observable and RxJS in angular?

Observer is a design pattern, in which an object maintain the observers, and notifies them automatically of state changes.
In Angular, the** Observables** provide support for passing message between parts of your application.

Observables are used for:
1.event handling,
2.asynchronous programming
3.handling multiple values
It won't be executed until the user subscribe it.

RxJS is a library provides the implementation of the observable type.

-> What is the difference between observable and promise?

Both observables and promises help us work with asynchronous functionality in JavaScript. Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time.

-> How do I cancel observable RxJS?

Use the unsubscribe() method

EPAM System

-> Software Development Life Cycle(SDLC)
-> What are the phases in SDLC?
-> The maintenance phase of the SDLC
-> Continuous Integration - CI , Continuous Delivery - CD
-> Agile methodology for project management
-> The waterfall model
-> Scrum Artifacts, Scrum Events
-> What are the different roles in Scrum?
-> Product Owner in the Scrum Framework
-> Estimation Techniques in scrum and Types of Estimation Techniques
-> T-shirt sizes (Estimation units)
-> aggregation design pattern
-> What are the types of software design patterns?
-> What is dry, kiss and Yagni?(yagni and kiss principle agile)
-> MVC (Model — View — Controller), MVP (Model — View — Presenter), and MVVM (Model — View — ViewModel)

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application.

Model: The Model component corresponds to all the data-related logic that the user works with. For example, a Customer object will retrieve the customer information from the database, manipulate it and update it data back to the database or use it to render data.

View: The View component is used for all the UI logic of the application. For example, the Customer view will include all the UI components such as text boxes, dropdowns, etc. that the final user interacts with.

Controllers: Controllers act as an interface between Model and View components to process all the business logic and incoming requests, manipulate data using the Model component and interact with the Views to render the final output. For example, the Customer controller will handle all the interactions and inputs from the Customer View and update the database using the Customer Model. The same controller will be used to view the Customer data.

-> How to manage code quality?
-> What are four ways you can improve the quality of your code?
-> SonarQube
-> What is Web page parsing?
-> The CSS Box Model
-> What unit of measurement does CSS use for size?
-> css rem
-> how to achieve responsive web design?
-> Grid and flexbox
-> what is JavaScript
-> asynchronous javascript
-> How do JavaScript promises work? (resolve , reject)
-> Tips for Improving JavaScript Performance
-> JavaScript primitive data types
-> Javascript function vs object
-> Differences Between Arrow and Regular Functions
-> ES6 new features
-> what methodology was used in your angular project
-> challange in angular project
-> code complexity and time complexity

const employees = [
    {id: 100, name: 'Jose', managerId: 100},
    {id: 200, name: 'Viktar', managerId: 100},
    {id: 300, name: 'Pavel', managerId: 200},
    {id: 400, name: 'Mary', managerId: 200},
    ...
    ];
    
// getManagers(employees, id) => [...]
// e.g. getManagers(employees, 400) => [200, 100]
--------------------------------------------------------

const employees = [
    { id: 100, name: 'Jose', managerId: 100 },
    { id: 200, name: 'Viktar', managerId: 100 },
    { id: 300, name: 'Pavel', managerId: 200 },
    { id: 400, name: 'Mary', managerId: 200 }
];
let theAnswer = []
function getManagers(employees, id) {
    for (let i = 0; i < employees.length; i++) {
        if (employees[i].id == id) {
            if (employees[i].id != employees[i].managerId) {
                id = employees[i].managerId
                theAnswer.push(employees[i].managerId)
                return getManagers(employees, id)
            } else {
                return theAnswer
            }
        }
    }
}
 
console.log(getManagers(employees, 400));

Interview Questions –

Angular 10 features

IVY

New Date Range Picker

Ecosystem Updates: (The TypeScript version was updated to TypeScript version 3.9
The TSLib version has also been updated to TSLib version 2.0
TSLint has been updated to version 6.0)

Some older browsers are no longer supported by default.

Why should we consider angular instead of React?

Actually, both React and Angular are great for front-end development. And they do equally well when it comes to building large-scale apps.

But there is one big difference between Angular and React: React.js uses virtual DOM(Document Object Model – allows accessing and changing document contents, layout, and even structure). While Angular2+ operates over real DOM.
Real DOM: will update the entire tree structure of HTML tables until it reaches the needed data.
Virtual DOM: allows us to update the changes without rewriting the entire HTML doc virtually. This renders much faster and ensures fast performance.

Data Binding: React uses one-way binding, Anguar2 uses both one-and two-data binding.

Component Architecture: React will need multiple supporting tools like Redux, Bable, Webpack. While Angular comes with many out-of-box features like RxJS, Angular CLI, Angular Universal.

What is data binding in Angular?
Interpolation in angular
Event binding in angular
Lazy loading and eager loading in angular

It is a feature that loads NgModules as needed. Lazy loading helps keep the initial bundle size smaller, which in turn helps decrease load times.
To lazy-load Angular modules, use loadchildren in your AppRoutingModule routes configuration.

How you create services in angular
Angular 8 vs Angular 9 vs Angular 10.
Input and output decorator in angular
Rxjs observables in angular
knowledge on the backend (REST service layer) -
Understanding of the angular framework, able to explain different key
characteristics -
Areas on angular core features (related to rxJs) -
Application state management (using ngRx) -
TypeScript/Javascript, HTML5, CSS3 knowledge
Application authentication (using JWT token) -
Scrum methodology in Agile