Top Angular Interview Questions and Answers

AngularJS was developed in JavaScript and has a different architecture from Angular and is an earlier version of Angular.

Angular (or Angular 2+) is a complete rewrite, too, and is written in TypeScript to use a more traditional component-based architecture. Angular is more efficient and adds mobile support.

AngularJS = Angular 1.x (old, JavaScript)
Angular = Angular 2+ (new, TypeScript, faster, more powerful)

Components in Angular are the essential pieces for controlling some portion of the user interface. A component consists of:

• A TypeScript Class (logic)
• An HTML template (view)
• Styles (design)
   

Data Binding is about linking the user interface (view) to the component’s data such that they are automatically managed together (in sync) in Angular. The types of Data Binding are:

• Interpolating ({{ }}) — binding from the component to the view

• Property Binding ([ ]) — sets the properties of an element

• Event Binding (( )) — listens for user events

• Two-way Binding ([( )]) — syncs the data both ways

Directives in Angular are instructions that tell the browser how to modify or change the DOM (HTML elements). There are different types of Directives:

• Component Directives — have a template (as in components)
• Structural Directives — modify the layout (by adding/removing elements - *ngIf, *ngFor)
• Attribute Directives — alter the appearance (or behaviour) of elements (e.g., ngClass, ngStyle)
   

The @NgModule decorator will define an Angular module, which is an object that can group components, directives, pipes, and services. Which helps us define and organise the app into logical units while telling Angular what to compile and load.

Dependency Injection (DI) in Angular is a way to provide components with the services or objects they require, rather than creating them in the component. Dependency Injection gives us the ability to manage and reuse code in a simple way.

Angular CLI is a command-line interface tool that allows you to create, build, and manage the project structure for Angular projects faster and easier.

Pipes are used to transform data in templates in Angular. Examples of Pipes are formatting dates, numbers, or any text before showing them in the template.

The constructor is run when the component is created (setting up the class). ngOnInit is the first hook run after initialising a component (best for running tasks when initialising a component).

ngFor is used to repeat (loop) a list and show items in the list. ngIf is used to show and hide elements based on a condition.

To build dynamic and interactive web apps easily. Angular helps to update the  UI without reloading the page (SPAs), organises the code better with components, handles data binding and user interactions, and improves reusability and maintainability. Overall, Angular simplifies and speeds up modern web development.

Metadata is a piece of additional information given to a class with decorators like @Component. Metadata tells Angular how to use the class. For example, which HTML template has to be used for a component, or what selector has to be applied? Altogether, Angular knows how to create and display your components, modules, and services.

The following metadata tells Angular how to render and use the SampleComponent.
@Component is the metadata decorator.

selector tells Angular to use the <app-sample> tag for this component.

The template defines the HTML to display.

Angular Services are classes that contain reusable logic or data, like fetching data or sharing data between components. Unlike components, they do not control the UI, they are behind the scenes. 

Angular lifecycle hooks are special methods that run at certain times in the life of a component, when it is created, updated, and destroyed. They allow you to add custom behaviour during the lifecycle.

Change Detection in Angular is about checking for data changes and automatically updating the view for you so that the UI is always in sync with that data.

Template-driven Forms are easy and are done using HTML to create a form. Reactive Forms are a lot more powerful as they let you manage the form data and its validation through code.

Observables are objects that allow you to watch for changes to data over time and react to those changes. Observables are used to handle asynchronous tasks, such as data as a result of a server request or a user event. 

Angular Routing simply means navigating to different pages in your app or view. Lazy loading refers to only loading parts of an app when you're ready to use them, to speed up the app overall.

Example: not loading the admin section until a user visits it, rather than when the app starts. 

Angular Guards are used to control access to routes. They provide a way to test conditions (like whether a user has logged in) to determine if navigation to a page is allowed.

To create a custom pipe, create a class that includes @Pipe and a transform method. Once created, the pipe can be used in templates by using | to modify the resultant data display.

Typescript

Html

Renderer2 allows developers to manipulate the DOM (like add or remove elements, change styles) in a safe and convenient way that also functions across diverse platforms.

A Promise handles a single async event and resolves a single value. An Observable can handle multiple asynchronous events over time and can be cancelled.

01. *ngIf

02. *ngIf with else

Shows "Welcome!" if isLoggedIn is true. Otherwise, shows the content inside the #guest template.

03.*ngSwitch

Checks the value of the role. If role === 'admin', shows "Admin". Otherwise, shows "Guest".

Angular modules group related parts of an app (components, services, etc.) to organise and manage the app.

This is the root module that starts the app.

1. Angular starts by loading this root module (AppModule).
2. Then registers the AppComponent as part of this module.
3. Next, imports BrowserModule, which gives essential services needed to run the app in a browser.
4. Angular creates and inserts the AppComponent into the DOM inside the <app-root> tag (the main app element).
5. Finally, runs the logic inside AppComponent and renders its template on the page.

Angular uses this module to identify which components to load, which dependencies to use, and which component to show first when the app loads.

Ahead-of-Time (AOT) Compilation in Angular is to compile the app’s TypeScript and HTML code into optimised JavaScript ahead of it being loaded by the browser. It is important because of the following,

1. Faster app initialisation
2. Smaller bundle size
3. Error checking earlier at build time

Angular Universal is a library that enables server-side rendering (SSR) for Angular apps. It runs the app on the server and sends fully rendered HTML to the browser. This means the app is served faster and is better for SEO.

You can optimise Angular Change Detection in large applications by the following methods:

1. Use the OnPush strategy - checks only when inputs change.
2. Detach the ChangeDetector for areas where the updates are unnecessary.
3. Using trackBy in *ngFor so that Angular does not fully re-render the whole list.
4. Minimise global events that trigger change detection (e.g., using NgZone.runOutsideAngular).
5. Use lazy loading modules to lower initial load times and lazy load change detection.

A Pure Pipe knows when things change, by only running when the input data gets changed (faster, and the default). An Impure Pipe knows anything changed, so it runs on every change detection cycle, even if data is unchanged (slower, but useful when data is dynamic). 

The Zone.js library tracks async activities (e.g., click events, HTTP calls, etc.) and tells Angular when it is able to trigger change detection. Zone.js is what allows Angular to automatically keep the UI up to date.

In Angular, HTTP Interceptors are used to inspect or modify HTTP requests and responses globally. Use cases include:

1. Adding authentication tokens
2. Logging requests/responses
3. Globally handling errors
4. Modifying headers or request URLs

1. Use Angular's built-in sanitisation to defend against XSS.
2. Avoid trusting user input in templates directly.
3. Use route guards to manage access.
4. Store tokens securely (don't use localStorage whenever possible).
5. Use HTTPS for all communications.
6. Validate on the backend. Never just rely on the security of client-side security.

Angular Elements are Angular components packaged as custom HTML elements (Web Components). They allow you to use Angular components in non-Angular applications like normal HTML or React. Usage is as follows.

1. Create a component
2. Turn it into an Angular Element with createCustomElement()
3. Register the new custom element with customElements.define()
4. Use it as if it were a normal HTML tag

1. Unsubscribe from Observables
   Use ngOnDestroy() to unsubscribe or use takeUntil() with a Subject.
2. Use async Pipe. This allows you to subscribe and unsubscribe automatically in your templates.
3. Clean Up Event Listeners 
   You should remove any listeners you added (e.g.window.addEventListener) in ngOnDestroy().
4. Avoid Unused DOM References
   Do not hold on to long-lasting references to DOM elements.
5. Use trackBy in *ngFor 
   This can make Angular reuse elements, reducing memory.
6. Use DevTools to Profile
   You can check for memory leaks in Chrome Developer Tools.

To create a custom structural directive in Angular, follow the steps below.

1. Use @Directive to define it.
2. Inject TemplateRef (HTML content) and ViewContainerRef (where to insert/remove content).
3. Use an @Input() setter to control rendering based on a condition.

Typescript

HTML

In this Example, the directive is called appIf, like a custom *ngIf. If the condition is true, it displays the content. If false, it removes the content from the DOM. That is, it shows "Information" only if displayInfo is true.

If we don’t supply a handler in .subscribe(), the observable still runs (if it has side effects), but you won’t receive any data, errors won’t be handled, and completion won’t be noticed. Overall, it runs silently and is not useful unless you're just triggering something.

RxJS in Angular is a library for handling asynchronous data like clicks, HTTP requests, or timers. It uses Observables to help you easily manage and react to changing data over time. Angular uses RxJS to make apps more responsive and efficient.