Angular Interview Questions & Answers

Ans: Reactive Extension for javascript.
zone.js

Ans: RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array methods (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

Ans: RxJs is an library to manage asynchronous streams or data.
JavaScript library that uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs.
There are Extensive list of operators so we can manage our data.

Ans: Observables as an interface to handle a variety of common asynchronous operations and handle asynchronous data.

Ans: forkJoin is a RxJS operator in Angular (and general RxJS) that lets you run multiple observables in parallel, and then wait for all of them to complete before emitting a combined result.

let final_val = forkJoin([json1, json2, json3]);

forkJoin takes a number of input observables and waits for all passed observables to complete. Once they are complete, it will then emit a group of the last values from corresponding observables.
The resulting stream emits only one time when all of the inner streams complete. It will never complete if any of the inner streams doesn't complete and will throw an error if any of the inner streams errors out.

Ans: The RegExp object is used for matching text with a pattern.
Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String.
This chapter describes JavaScript regular expressions.

Ex:

const a = 'anil goes to school';
const regex = /[aeiou]/gi;
const vowelsCount = a.match(regex);

Ans: Ngrx is for optimally storing data in the client and recalling them from all over the application, usually. If you want to take advantage of single direction data flow using Store in Angular NgRx is the solution.
NgRx stands for Angular Reactive Extensions, NgRx Store provides reactive state management for Angular apps inspired by Redux. NgRx has libraries for managing both global and local state. Isolation of side effects in order to achieve a more streamlined component architecture. Developer tooling that makes it easier for developers to construct a variety of applications.

app.module.ts:

imports: [StoreModule.forRoot({ hero: heroReducer })]

hero.actions.ts:

export const setData = createAction('[Hero] Set Data',
  props<{ data: string }>()
);
export const resetData = createAction('[Hero] Reset Data');

hero.reducer.ts:

export const initialState = '';
export const counterReducer = createReducer(
    initialState,
    on(setData, (state, { data }) => data),
    on(resetData, _ => '')
);

hero.component.ts:

addData() {
    this.store.dispatch(setData({ data: 'Test' }));
}
resetData() {
    this.store.dispatch(resetData());
}

hero.selectors.ts:

export const selectHeroState = createFeatureSelector('hero');
export const selectHeroData = createSelector(
    selectHeroState,
    (state: string) => state
);

Read Data:

hero$: Observable;
constructor(private store: Store) {
    this.hero$ = this.store.select(selectHeroData);
}

Ans: Concept of 'Encapsulation' is used to make class members public or private i.e. a class can control the visibility of its data members.
There are three types of access modifiers in TypeScript: public, private and protected.

Ans: CI and CD stand for continuous integration and continuous delivery/continuous deployment.
A continuous integration and continuous deployment (CI/CD) pipeline is a series of steps that must be performed in order to deliver a new version of software. CI/CD pipelines are a practice focused on improving software delivery throughout the software development life cycle via automation.
Ex: GitLab, Asana, Jira, Trello, Google Drive

Ans: MockAPI is a simple tool that lets you easily mock up APIs, generate custom data, and perform operations on it using RESTful interface.
MockAPI is meant to be used as a prototyping/testing/learning tool.

Ans: Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.
Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.

• git clone [url]
• git pull origin master: fetches and merges changes
• git status: Check the status of changes in your repository.
• git add [file]: adds one or more to the staging area
• git commit -a -m "[message]": snapshots the file permanently in the version history
• git push origin master: sends the committed changes
• git branch: lists all the local branches
• git branch [branch name]: creates a new branch
• git branch -d [branch name]: deletes the feature branch
• git branch -b [branch name]: creates a new branch and also switches to it
• git checkout [branch name]: switch from one branch to another
• git log: View commit history
• git reset --hard [commit]: Reset to a specific commit, discarding all changes.
• git revert [commit]: Create a new commit that undoes changes from a previous commit.
• git stash: Save uncommitted changes for later use.
• git stash apply: Apply stashed changes and remove them from the stash.

Ans: Cherry-picking in Git refers to the process of selecting specific commits from one branch and applying them to another branch.
This is useful when you want to incorporate specific changes or fixes from a different branch without merging the entire branch.
You can also cherry-pick multiple commits

git cherry-pick [log-Id]...

Ans:
Reference: Micro Frontend Architecture Guide

A Micro Frontend is a design pattern where a single frontend application is broken into smaller, independently built and deployed pieces — just like microservices on the backend.
Micro-frontend architecture is an architectural style where a front-end application is decomposed into smaller, more manageable pieces (micro-frontends), each developed and deployed independently by different teams.

npm install --save-dev @angular-architects/module-federation

angular.json:

"architect": {
  "serve": {
    "builder": "@angular-architects/module-federation:webpack-dev-server",
    "options": {
      "publicPath": "http://localhost:4200/",
      "filename": "remoteEntry.js",
      "exposes": {
        "MicroFrontend": "./src/app/micro-frontend/micro-frontend.module.ts"
      }
    }
  }
}

micro-frontend.module.ts:

import('http://localhost:4200/remoteEntry.js').then(() => {
  import('MicroFrontend').then(m => {
    // Use the module and components from the Micro Frontend
  });
});

routes in the host application's routing module:

const routes: Routes = [
  { path: 'micro-frontend', loadChildren: () => import('MicroFrontend').then(m => m.MicroFrontendModule) },
];

Ans:
Reference: Module Federation Architecture Guide

Module Federation is a Webpack 5 feature that allows JavaScript modules (including entire front-end applications) to be shared and consumed across different builds at runtime, enabling seamless integration of micro-frontends.

Host Application: This is the main application that consumes remote modules.
Remote Application: These are micro-frontends that expose their components or modules.

webpack.config.js for a host app:

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

webpack.config.js for a remote app:

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button', // Exposing a Button component
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Ans: The goal behind the Micro Frontend Architecture Angular is to enhance scalability, flexibility, and maintainability by reducing the complexity of the web application and promoting modularity.

Ans: To avoid the difficulty as when multiple teams or developers start working on the same page they may overwrite each other's changes or may face conflicts while committing code and delay the release process also multiple instances of re-testing are needed to ensure no faulty code is there within the application at the time of release.
Each team or developer can create their repo for their module/sub-domain and work independently without worrying about other developers' changes.

Ans: A) Repository Structure:
In Traditional Architecture code kept in a single Repository.
While in Micro Frontend Architecture it is not needed to keep all Code in same Repository.

B) Technology Stack:
In a Traditional Architecture code will be in same technologies
While in Micro frontend same tech is not required

Ans: A) Iframe: We can use Iframe to load data but it will becomes difficult when we need to use data communicate.

B) NGINX: It makes easy to maintain the routing of different applications if all applications are on the Same server.

C) Third-party Libraries:

• Single-SPA
• Module-federation
• FrintJS

Ans: Module Federation enables you to build scalable, flexible, and modular applications by splitting your codebase into smaller, independently deployable modules.
Module Federation can be used to create microfrontends, where different parts of your application are developed and deployed independently while sharing common code and dependencies.

Ans: Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app.
By providing a dedicated environment for testing and debugging, Storybook makes it easier to identify and fix UI components bugs.
It also allows developers to easily test each component in different scenarios, making it easier to catch issues early on in development.

Ans: Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality.

Ans: The SOLID principles are a set of design principles for writing flexible, scalable, maintainable, and reusable code.

1. S — Single Responsibility Principle: A class should have one and only one reason to change, meaning that a class should only have one job.
A class, a module, or a function should be only responsible for one actor. So, it should have one and only one reason to change.
If a Class has many responsibilities, it increases the possibility of bugs because making changes to one of its responsibilities, could affect the other ones without you knowing.

2. O — Open Closed Principle: Objects or entities should be open for extension, but closed for modification.
Changing the current behaviour of a Class will affect all the systems using that Class.
If you want the Class to perform more functions, the ideal approach is to add to the functions that already exist NOT change them.

3. L — Liskov Substitution Principle: All this is stating is that every subclass/derived class should be substitutable for their base/parent class.
The child Class should be able to process the same requests and deliver the same result as the parent Class or it could deliver a result that is of the same type.

4. I — Interface Segregation Principle: A client should never be forced to implement an interface that it doesn't use or clients shouldn't be forced to depend on methods they do not use.
When a Class is required to perform actions that are not useful, it is wasteful and may produce unexpected bugs if the Class does not have the ability to perform those actions.

5. D — Dependency Inversion Principle: Entities must depend on abstractions not on concretions. It states that the high level module must not depend on the low level module, but they should depend on abstractions.

Ans: Services are typically used to encapsulate business logic, share data, or perform other tasks that can be shared across multiple components. They are a way to organize and centralize common functionality that multiple parts of an application might need.

Ans: Dependency injection is a fundamental concept that allows you to inject dependencies (services or other objects) into components, directives, pipes, and other Angular constructs.

Ans: Angular provides a robust testing framework that makes it easy to write and execute unit tests for components, services, and other parts of your application.

ng test

This will run the tests and open a browser window with the Karma test runner.

Ans: Answer pending...

Ans:
Modules: They group related components, directives, pipes, and services into cohesive units.

Components: Each component consists of a template, class, and metadata.

Templates: They use HTML syntax enhanced with Angular directives and binding expressions.

Directives: Directives are markers on a DOM element that tell Angular to do something to a DOM element.

Services: Services are singleton objects that encapsulate business logic, data manipulation, or communication with external services.

Dependency Injection (DI): Angular has a built-in dependency injection system that allows you to inject dependencies (such as services) into components, directives, or other services.

Router: Angular Router provides navigation and URL manipulation features for single-page applications.

Forms: Forms allow you to capture and validate user input in a structured way.

HTTP Client: Angular includes a powerful HTTP client for making requests to remote servers.

Pipes: Pipes are used to transform data in templates.

Ans: Component defined using a TypeScript class with a @Component decorator. Consist of HTML, SCSS, ts Files.
Components handle the presentation logic and user interactions for a specific part of the application.

Directive allow you to extend the behavior of HTML elements or create reusable behavior.

Ans: RxJS (Reactive Extensions for JavaScript) is a library that provides support for reactive programming using Observables. The main class in RxJS is the Observable class, which is the foundation for working with asynchronous data streams.

Ans: Handling asynchronous operations and event-based programming in Angular applications.
Observables are lazy, meaning they don't start emitting data until someone subscribes to them.
Subscriptions can be canceled or unsubscribed from to stop receiving further data.
Observables can emit error notifications, and subscribers can handle errors using error callback functions.
RxJS provides set of operators that allow you to transform, filter, combine, and manipulate the data.

Ans:
Creating an Observable with new Observable():

fetchData(): Observable<any> {
  return this.http.get('https://api.example.com/data');
}

Subscribing to Observables:

this.myService.fetchData().subscribe(
  (response) => {
    this.data = response;
  },
  (error) => {
    console.error('Error fetching data:', error);
  }
);

Unsubscribing:

this.myService.fetchData().unsubscribe();

Ans: Promises are a JavaScript feature that provides a way to handle asynchronous operations in a more structured and readable manner. A promise represents the eventual completion or failure of an asynchronous operation and allows you to attach callbacks to handle the results.

Ans: Answer pending...

Ans:
Git: It allows multiple developers to collaborate on a project, track changes, and manage different versions of the codebase.

GitHub: GitHub is a web-based platform built on top of Git. It provides additional collaboration features, such as issue tracking, pull requests, and project management.

Bitbucket: Bitbucket is a Git repository hosting service by Atlassian. It supports both Git and Mercurial, and it provides features like pull requests, branching strategies, and integrations with other Atlassian products.

Ans: Answer pending...

Ans: Answer pending...

Ans: Answer pending...

Ans: Answer pending...

Ans: Answer pending...

Ans: Answer pending...

Ans: Answer pending...

Ans:

• Use HTTPS API request
• Use token for Authentication
• Use role management so authorized users can perform specific actions
• Use Cookies, localStorage for Secure Storage for Tokens
• API server to include proper CORS headers
• Proper Error Handling

Ans: Open-source web application framework, written in TypeScript.
Single-page web applications (SPAs) with a structured and modular approach.
Angular offers two-way data binding, Dependency Injection, Templates and Directives, Routing, HTTP, tools for unit testing etc.

Ans:

Feature	AngularJS	Angular
Language	JavaScript	TypeScript
Architecture	Controller	Component
Mobile	Not compliant	Mobile compliant
CLI	No CLI	CLI Works
Lazy Loading	No Lazy Loading	Lazy Loading Works
SEO	Not SEO Friendly	SEO Friendly
Server Side	No Server Side	Server Side Works

Ans: An angular application mainly consists of HTML templates, TypeScript files, unit testing and configuration file. Whenever we run over an application, the browser cannot understand the code directly hence we have to compile our code.

Ahead of Time (AOT):

• Process of compiling higher-level language or intermediate language into a native machine code, which is system dependent
• Compilation only happens once, while you build your project
• Minimize the size of your application
• During creating build compiler detects template error earlier
• Precompiled templates during build time (used in ng build --prod)

Just in Time (JIT):

• Compilation during the execution of the program at a run time before execution
• Best compiler when your application is in local development or in development mode
• Compiled templates in the browser at runtime (used in ng serve)

Note: View Engine Compiler using from Angular2-8; Angular Ivy compiler using Angular9+

Ans: NPM is a package manager which helps in installation of packages.
node_modules is a folder where all the packages are installed.

Ans: package.json is a JSON (JavaScript Object Notation) file that holds important information about the Angular project, including its metadata, dependencies, scripts, and other configuration settings.

package-lock.json contains the exact versions of all dependencies and their sub-dependencies that were installed. Also have the metadata of packages.

Ans: dependencies: Required to run the app in production
devDependencies: Required only during development/build

Ans:
JS: A dynamic, interpreted, high-level programming language. Runs natively in browsers and Node.js.

ES6: ES6 is a version of JavaScript — the 6th edition of the ECMAScript standard. It's a modern version of JavaScript.
Features: let, const, Arrow functions, Template literals, Promises, Classes and modules, Spread operators

TS: TS is a superset of JS or we can say TS is improved version of JS. It offers static typing (x: number = 10), which makes it reliable.
It shows error annotation while typing. It offers early bug detection, static reading, stable code, defined types.
Features: Static type checking, Interfaces, Enums, Generics, Access modifiers

Ans: CLI (Command Line Interface) is a powerful tool that helps developers create, build, test, and deploy Angular applications more efficiently.
CLI provides a set of commands that simplify various development tasks.

Ans: Component is where you write your binding code.
Components are the building blocks of an Angular application, which encapsulate CSS, TS, HTML files.
Components break down our application in smaller parts, we can reuse these components.
Hierarchical Structure of components make it easy to understand and manage the file system of our project.

Module logically group of components.
Modules encapsulates components, services, pipe and other related items.
Angular supports lazy Loading, so only required module is loaded when required.

Ans: Decorators are design patterns used to isolate the modification or decoration of a class without modifying the source code.
Decorators are used to store metadata about a class, property, method.
Decorators are functions that modify the behavior of classes, methods, properties, or parameters by attaching metadata to them.
Decorators are functions that allow a service, directive, or filter to be modified before it is used.
It's TypeScript feature used for passing metadata. Represented with @ symbol

Types of Angular decorators:

• Class decorators: Particular class is a component or a module || like @Component, @NgModule, @Injectable, @Directive and @Pipe
• Property decorators: Properties inside classes || like @Input, @Output, @ContentChild, @ContentChildren, @ViewChild and @ViewChildren
• Method decorators: Methods inside classes || like @HostListener
• Parameter decorators: Parameters inside class constructors || like @Inject, @Host

Ans: Template is defined as user interface.
Template describes the structure, content, and layout of the view that the component will render.

Ans: Data Binding defines the interaction between the components and the DOM.
Angular allows both One-way and Two-way Data Binding

One-way data binding: Is a simple type of data binding where you are allowed to manipulate the views through the models.

• Interpolation or String Interpolation: {{data}}
• Property binding: <img [src]="image">
• Event binding: (click)="goBack()"

Note: When you need to set element properties to non-string data values, you must use Property binding and not Interpolation.

Two-way data binding: On the other hand, allows synchronization of data in such a way that the views can be updated using the models and the models can be updated using views.
[(ngModel)]="data"

Ans:

• Templates: HTML view of Angular
• Components: Binds the DOM and modal
• Modules: Group of components
• Data Binding: Defines how DOM and component communicate
• Services, Pipes, Directives: Common logics
• Dependency Injection: Helps to inject an instance across project using constructor
• Lifecycle Hooks: Define life of component flow

Ans: Application where the main UI loaded once and then needed UI is loaded on user request, rather than loading entire new pages from the server.

Ans: Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties.
In Angular routing has two part URL and ComponentName: {path: 'home', Component: HomeComponent}

Ans: Lazy loading is on demand loading. Load only necessary part so that you have better performance. Lazy loading is the process of loading components, modules, or other assets of a website as they're required. It improves the speed of the application load time by splitting the application in several bundles.

RouterModule.forRoot() => It's used once in App's main routing module
RouterModule.forChild() => Multiple times in lazy-loaded/feature modules

Ans: Template Reference Variable in Angular is used to access all the properties of any element inside the DOM. It can also be a reference to an Angular component or directive or a web component.

<input #refer>

Ans: It builds reusable UI components and layouts.
Content projection in Angular is often used to create reusable and customizable components that can accept varying content while maintaining a consistent structure and layout. <ng-content></ng-content> tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content.

Parent:

<app-child>
  <p class="header">This is header.</p>
  <a class="link">See more...</a>
</app-child>

Child:

<div>
  <ng-content select=".header"></ng-content>
  <p>Rest data</p>
  <ng-content select=".link"></ng-content>
</div>

Ans: @ViewChild/@ViewChildren decorator provides template information in our component. It provides us with an easy and simple way to access and manipulate the properties and methods of a Child Component from a container or root component.

By using @ViewChild/@ViewChildren we can achieve the following things:

• Accessing template of same component
• Accessing the template of child component

The @ViewChild query returns the first matching element from the DOM. We must supply the query selector, which can be a string or a type as the first argument to the ViewChild

Same component:

HTML: <p #colorchange>test</p>
TS: @ViewChild("colorchange") changeTag: ElementRef;
    this.changeTag.nativeElement.style.color = "red";

Different component:

HTML-parent: <button (click)="inc()">Click</button>
           <app-child #ChildView></app-child>
TS-parent: @ViewChild('ChildView') child: ChildComponent;
           inc() { this.child.increment(); }
Child-TS: public counter: number = 0;
          increment() { this.counter++; }

The @ViewChildren query returns the List of matching element from the DOM.

HTML: <p #colorchange>test</p><span #colorchange>test</span>
TS: @ViewChildren("colorchange") changeTag: QueryList<any>;
    this.changeTag.first.nativeElement.style.color = "red";
    this.changeTag.last.nativeElement.style.color = "green";

Ans: @ContentChild/@ContentChildren decorator provides instance of a projected element in our component.

@ContentChild(SomeDirective) someDirective: SomeDirective;
@ContentChildren(SomeDirective) someDirectives: QueryList<SomeDirective>;

Ans: A component in Angular has a life-cycle, a number of different phases it goes through from birth to death. There are 8 life cycle hooks.

• constructor: The constructor is a TypeScript feature used to instantiate the TypeScript class. In most Angular projects about the only thing that should ever be done in the constructor is to inject services.
• ngOnChanges: Invoked every time there is a change in one of the input properties of the component.
• ngOnInit: This hook is only called once after the first ngOnChanges.
• ngDoCheck: Invoked when the change detector of the given component is invoked.
• ngAfterContentInit: Invoked after Angular performs any content projection into the component's view.
• ngAfterContentChecked: Invoked each time the content of the given component has been checked by the change detection mechanism of Angular.
• ngAfterViewInit: Invoked when the component's view has been fully initialized.
• ngAfterViewChecked: Invoked each time the view of the given component has been checked by the change detection mechanism of Angular.
• ngOnDestroy: This method will be invoked just before Angular destroys the component. Use this hook to unsubscribe observables and detach event handlers to avoid memory leaks.

Ans: Constructor is a default method of the class that is executed when the class is instantiated.
constructor() to set up Dependency Injection, Initialization of class fields, etc.
We use constructor() for all the initialization/declaration.

ngOnInit is a life cycle hook called by Angular to indicate that the Angular is done creating the component.
ngOnInit() is a better place to write "actual work code" that we need to execute as soon as the class is instantiated.

Ans: Server-side rendering (SSR) is an application's ability to convert HTML files on the server into a fully rendered HTML page for the client.
Angular Universal, a technology that renders Angular applications on the server.
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Ans: AuthGuard is an Angular route guard used to protect the routes from unauthenticated/unauthorized people. It is implemented using the canActivate interface which implements a canActivate function that checks whether the current user has permission to activate the requested route.
Angular Route Guard is an interface which can be implemented to decide if a route can be activated.

1. CanActivate: Controls if a route can be activated.

{path: '', component: HomeComponent, canActivate: [AuthenticationGuard]}

2. CanActivateChild: Controls if children of a route can be activated.

{path: '', component: HomeComponent, 
  canActivateChild: [AuthenticationGuard], 
  children: [
    {path: '', component: WelcomeComponent}
  ]
}

3. CanDeactivate: Controls if the user can leave a route.

{path: '', component: EditDataComponent, canDeactivate: [CanDeactivateGuard]}

4. Resolve: Ensure whether there is data available or not before navigating to any route.
5. CanLoad: Controls if a route can even be loaded.

Ans: Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application's view.
Change detection strategies: 1. Default strategy 2. OnPush strategy

In the Default strategy, whenever any data to @Input() decorated properties are changed, Angular runs the change detector to update the view.
In the OnPush strategy, Angular runs change detector only when a new reference is passed to the @Input() decorated properties.

Ans: The View Encapsulation in Angular is a strategy that determines how Angular hides (encapsulates) the styles defined in the component from bleeding over to the other parts of the application.

ViewEncapsulation.None: Used, when we do not want any encapsulation.
ViewEncapsulation.Emulated: Style does not spill out to other components when you use emulated mode
ViewEncapsulation.ShadowDOM: The browser keeps the shadow DOM separate from the main DOM. The rendering of the Shadow DOM and the main DOM happens separately.

Ans: <ng-template> is a template element that Angular uses with structural directives (*ngIf, *ngFor, [ngSwitch] and custom directives).

<ng-container> is an extremely simple directive that allows you to group elements in a template that doesn't interfere with styles or layout because Angular doesn't put it in the DOM

<ng-content> is used to project content into Angular components. You use the <ng-content></ng-content> tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content.

Ans: ngTemplateOutlet is a structural directive. We use it to insert a template (created by ngTemplate) in various sections of our DOM.

Ans: In Angular, pipes are used to transform the output in templates before they are displayed to the user. They are simple functions that take an input value, transform it, and return the transformed value, all without modifying the original data.

Built-in pipes: date, uppercase, lowercase, currency:'IND', percent, json, async

Custom pipes:

ng generate pipe customPipe

@Pipe({
  name: 'reverseString'
})
export class ReverseStringPipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

In Angular pipes are Pure and Impure Pipes:

Pure pipe: A pure pipe is a pipe that only gets executed when the input data changes. Angular calls a pure pipe only when a change is detected in the input to the pipe. It's stateless and doesn't depend on anything other than the input it receives. By default, all Angular pipes are pure pipes.

Impure Pipes: An impure pipe is a pipe that gets executed every time Angular runs change detection, regardless of whether the input data has changed or not. This means an impure pipe will be called on every change detection cycle, which can have a performance cost if used improperly.

Ans: The async pipe is a built-in pipe in Angular that automatically subscribes to an observable or promise and returns the latest value that is emitted. Once the observable or promise emits a value, the async pipe updates the template with the new value.
This pipe also takes care of unsubscribing from the observable or promise when the component is destroyed, which helps prevent memory leaks.

data$: Observable<any>;
constructor(private dataService: DataService) {
  this.data$ = this.dataService.fetchData();
}

<div *ngIf="data$ | async as data">
  <pre>{{ data | json }}</pre>
</div>

Ans: For DOM manipulation, By using Angular directives, you can change the appearance, behavior or a layout of a DOM element.

Component Directives: Component directives are used in main class. They contain the detail of how the component should be processed, instantiated and used at runtime. Basically, every Angular component is a directive define by @Component() decorator.

Attribute Directives: Directives change the appearance or behavior of any element in Angular. For instance, attribute directives can highlight specific words in the text of the application. NgSwitch, NgStyle and NgClass.
Custom attribute example:

<p [appHighlight]="color">Hover over me with dynamic color!</p>

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() highlightColor: string;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', color);
  }
}

Structural Directives: Directives change the DOM layout during the runtime by adding or removing elements. *ngIf, *ngSwitch, and *ngFor.

Ans: If you subscribe to a Subject, you won't get the current value or initial value.
Don't have to define a default value whenever you declare the subject.

subject.next(1);
const subject = new Rx.Subject();
subject.subscribe(x => console.log(x));

When you subscribe to a BehaviorSubject, you will be able to get the current value or the initial value.
Have to define a default value whenever you declare Behavior Subject based upon the data type.

subject.next(1);
const subject = new Rx.BehaviorSubject(0);
subject.subscribe(x => console.log(x));

Ans:

Feature	Promise	Observable
Execution	Eager - executes immediately on creation	Lazy - doesn't start until subscription
Values	Emit single value over a period of time	Emit multiple values over a period of time
Operators	Don't have operators	Have multiple operators like map, filter, reduce, retry for transform data
Cancellation	Cannot be cancelled	Can be cancelled using unsubscribe method

Ans: Forms are used to handle user input data. Angular supports two types of forms. They are Template driven forms and Reactive forms.

1. Template-Driven Forms:

• Defined most of the things in the HTML template. Automatically tracks form state and validation
• Uses Angular directives like [(ngModel)], #form="ngForm"
• Import FormsModule in module file

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <input type="text" name="name" [(ngModel)]="user.name" required />
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

2. Reactive Forms:

• Reactive Forms in Angular are a powerful and scalable approach to building forms, especially useful for complex forms, dynamic validation, and programmatic control. It's Fully controlled in the TypeScript code.
• Uses FormGroup, FormControl, FormArray and FormBuilder
• Import ReactiveFormsModule in module file

userForm = new FormGroup();
constructor(private fb: FormBuilder) {}
loginForm = this.fb.group({
  name: ['', Validators.required]
});

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" />
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Ans: There are several ways to share data between components:

• Binding (@Input & @Output)
• Reference (@ViewChild & @ContentChild)
• Provider (Service)
• Template Outlet
• State management (ngrx)

Ans:

<app-child [name]="'Angular Developer'"></app-child>

@Input() name!: string;

@Output() greet = new EventEmitter<string>();
this.greet.emit('Hello from child!');

<app-child (greet)="onChildGreet($event)"></app-child>

Ans: Interface is a specification that identifies a related set of properties and methods to be implemented by a class. So basically using interface you can set some basic rules for your properties and methods using class.
It defines the syntax for classes to follow, means a class which implements an interface is bound to implement all its members.

export interface Student {
  id: number;
  name: string;
}

students: Student[] = [
  {id: 1, name: "Hardik"},
  {id: 2, name: "Paresh"},
  {id: 3, name: "Rakesh"},
]

Ans: Angular Animations (@angular/animations) is a module that is part of Angular itself, and it is built based on CSS functionality.
Angular Animations provides users with a better way of controlling or arranging animations. With this module, we can define animation sequences for elements as multiple transformations that occurred over some time.

Ans: An Angular module is a deployment sub-set of your whole Angular application. It's useful for splitting up an application into smaller parts and lazy load each separately, and to create libraries of components that can be easily imported into other applications.

@NgModule: annotation is what actually defines the module.
declarations: list the components, directives, and pipes that are part of the module in the declarations array.
imports: import other modules by listing them in the imports array.
providers: list the services that are part of the module in the providers array.

Ans:

1. index.html – has root tag (<app-root>)
2. Main Entry Point: main.ts

   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));

   It bootstraps the root module
3. App.module.ts

   bootstrap: [AppComponent],

4. Angular Compiler (JIT or AOT)
5. DOM Rendering Starts
   Angular looks in your index.html for <app-root></app-root>
6. Child Component Tree Loads
   <app-header></app-header>
<router-outlet></router-outlet>

Ans: These are two different types of packages listed in package.json and package-lock.json
dependencies: Required for your app to function in production, It's depends on dependencies after deployment.
devDependencies: Used only during development and build time.

Ans: Standalone components in Angular are a way to create components, directives, and pipes that do not need to be declared in an NgModule. They are self-contained and manage their own dependencies.

@Component({
  standalone: true,
  signals: true,
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css'],
  imports: [CommonModule],
  providers: [HeroService],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.Emulated
})
export class HeroComponent {}

Ans: Answer pending...

Ans:

• Understand the Business Requirements
• Module and Component Design for specific feature
• Use State Management
• Performance Optimization
• Unit Testing
• API Integration and Error Handling
• Documentation and Code Quality
• CI/CD (CI pipelines/Continuous Deployment)

Ans:

• Use Lazy Loading
• OnPush Change Detection
• TrackBy with ngFor
• debounceTime() for Inputs
• Route Resolvers
• Route Guards to protect
• Reactive Forms for Complex validation
• Optimizing Change Detection with Observables
• Optimizing Bundle Size
• Avoid Memory Leaks
• Use Renderer2 or directives for safe DOM manipulations

Ans:

• Folder Structure and Organization
• Naming Conventions
• State management (NgRx)
• Use of RxJS and Observables
• Routing and Navigation
• Error Handling
• Testing
• Security and Performance Optimization
• Code Reviews and Collaboration
• Version Control and Branching

Ans:

• Automate Code Formatting
• Code Reviews
• Unit & End-to-End Tests passed
• CI/CD Pipeline with Automated Quality Checks

Ans: STAR Method:

1. Situation: Briefly describe the project and why it was challenging.
2. Task: What was your role?
3. Action: What actions did you take to solve it?
4. Result: What was the outcome?

Example: Recently, we had a challenging project where we had to deliver a complete proposal within just one week, which was a very tight deadline.
It was tough because of the limited time and the complexity involved, but we managed it through strong team collaboration, clear task distribution, and actively seeking help from others whenever needed.
We stayed focused, prioritized critical tasks, and kept communication open throughout the week.
Thanks to good teamwork and proper time management, we successfully delivered the project on time and the client was very happy with the result.

Ans:

1. Stay calm and assess the situation
2. Prioritize the issue (based on impact)
3. Communicate immediately with the team/stakeholders
4. Decide: fix immediately or rollback the feature
5. Test the fix carefully before deploying

Ans:

1. Own the mistake (briefly explain the situation)
2. Show how you found the issue (debugging skills)
3. Explain how you fixed it (problem-solving)
4. Mention what you learned (continuous improvement)

Example: In my Angular experience, I've faced and learned from a few common mistakes.
Early on, I missed unsubscribing from observables, which caused memory leaks. I also faced issues with change detection when mutating objects directly, so I now follow immutability practices.
With forms, I make sure to manually call updateValueAndValidity() when changing validations dynamically.
I handle API errors carefully to avoid breaking the user flow, keep components clean and focused, avoid direct DOM manipulation by using @ViewChild, and manage routing properly with Angular's router methods.

Ans:

Concept	Angular Implementation
Class	Components, Services, Models are all classes.
Object	Instances of components/services/models.
Inheritance	Base component classes / Abstract classes that are extended.
Encapsulation	Keeping logic inside services/components (private/public properties).
Abstraction	Using abstract classes or interfaces to hide details and expose only necessary parts.
Polymorphism	Methods with the same name behaving differently in different components or services (especially with interfaces/abstract classes).
Interface	Defining data shapes — especially used with TypeScript for type safety (e.g., interface User, Product, etc.).

Ans: The SOLID principles are a set of five design principles intended to make object-oriented designs more understandable, flexible, and maintainable.

1. S - Single Responsibility Principle (SRP):
A class should have only one reason to change. In other words, it should only have one job or responsibility.

2. O - Open/Closed Principle (OCP):
Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification. You should be able to add new functionality without changing existing code.

3. L - Liskov Substitution Principle (LSP):
Subtypes must be substitutable for their base types. That means objects of a superclass should be replaceable with objects of its subclasses without breaking the application.

4. I - Interface Segregation Principle (ISP):
No client should be forced to depend on methods it does not use. Split large interfaces into smaller, more specific ones so that clients only need to know about the methods that are of interest to them.

5. D - Dependency Inversion Principle (DIP):
High-level modules should not depend on low-level modules. Both should depend on abstractions. Also, abstractions should not depend on details—details should depend on abstractions.

Ans: In Agile, almost every aspect of software development and project management can be covered.

1. Requirements Gathering: Business needs
2. Planning: Product Roadmaps, Release Planning, Sprint Planning, Capacity Planning
3. Design & Architecture: Focus on simplicity and scalability
4. Development: Ensure code meets the Definition, code reviews
5. Testing: Unit, integration, e2e
6. Deployment: CI/CD
7. Iteration & Feedback: Daily Stand-ups, Sprint Reviews, Sprint Retrospectives, Gather customer/stakeholder feedback
8. Monitoring & Metrics: Tracking tools like Jira, Trello, Azure DevOps
9. Team Collaboration & Roles: Cross-functional teams. Conduct backlog grooming/refinement sessions
10. Risk Management: