Angular Interview Questions

In Angular, there is an url property of router package to get the current route. You need to follow the below few steps,

1. Import Router from @angular/router

import { Router } from '@angular/router';

2. Inject router inside constructor

constructor(private router: Router ) {

}

3. Access url parameter

console.log(this.router.url); //  /routename

A component harness is a testing API around an Angular directive or component to make tests simpler by hiding implementation details from test suites. This can be shared between unit tests, integration tests, and end-to-end tests. The idea for component harnesses comes from the PageObject pattern commonly used for integration testing.

During compile time, Angular CLI will download and inline the fonts that your application is using. This performance update speed up the first contentful paint(FCP) and this feature is enabled by default in apps built with version 11.

Content projection is a pattern in which you insert, or project, the content you want to use inside another component.

The ng-content is used to insert the content dynamically inside the component that helps to increase component reusability.

A standalone component is a type of component which is not part of any Angular module. It provides a simplified way to build Angular applications.

Generate a standalone component using the CLI command as shown below:

ng generate component component-name --standalone

On running the command standalone component is created. Here is the list of file created.

1. component-name.component.ts
2. component-name.component.css
3. component-name.component.spec
4. component-name.component.html

Next need to update app.module.ts as shown below.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ComponentNameComponent } from './component-name/component-name.component';

@NgModule({
imports: [
BrowserModule,
ComponentNameComponent
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}

To make existing component to standalone, then add standalone: true in component-name.component.ts as shown below

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component({
standalone: true,
imports: [CommonModule],
selector: 'app-standalone-component',
templateUrl: './standalone-component.component.html',
styleUrls: ['./standalone-component.component.css'],
})
export class ComponentNameComponent implements OnInit {
constructor() {}

ngOnInit() {}
}

Next need to update app.module.ts as shown below.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ComponentNameComponent } from './component-name/component-name.component';

@NgModule({
imports: [
BrowserModule,
ComponentNameComponent
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}

Hydration is the process that restores the server side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.

To enable hydration, we have to enable server side rendering or Angular Universal. Once enabled, we can add the following piece of code in the root component.

import {
bootstrapApplication,
provideClientHydration,
} from '@angular/platform-browser';

bootstrapApplication(RootCmp, {
providers: [provideClientHydration()]
});

Alternatively we can add providers: [provideClientHydration()] in the App Module

import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
​
@NgModule({
declarations: [RootCmp],
exports: [RootCmp],
bootstrap: [RootCmp],
providers: [provideClientHydration()],
})
export class AppModule {}

A signal is a wrapper around a value that can notify interested consumers when that value changes. Signals can contain any value, from simple primitives to complex data structures.

In this example, we create a signal named count and initialize it with a value of 0. We then connect to the signal, allowing us to be notified whenever its value changes. Finally, we add a button that increments the count when clicked.

When the button is clicked, the incrementCount() method is called. This method sets the new value of the count signal to 1. Objects connected to the signal (subscribers) are then notified of the change, and the updated value is displayed in the UI.

In TypeScript file

import { Component, OnInit } from '@angular/core';
import { signal, computed } from '@angular/core'; // Import from '@angular/core'

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
count = signal(0);
doubleCount = computed(() => this.count() * 2);

constructor() {}

ngOnInit() {
// Optional logging for debugging displayedCount changes
// console.log('Displayed count changed to:', this.displayedCount());
}

incrementCount() {
this.count.set(this.count() + 1);
}

decrementCount() {
this.count.update((value) => Math.max(0, value - 1));
}
}

In HTML file

<h1>Angular Signals Example</h1>

<button (click)="incrementCount()" style="margin-right: 10px;">Increment Count</button>
<button (click)="decrementCount()">Decrement Count</button>

Route parameters are used to pass dynamic values in the URL of a route. They allow you to define variable segments in the route path, which can be accessed and used by components and services. Path parameters are represented by a colon (":") followed by the parameter name.

There are three types of route parameters in Angular:

Path parameters: Path parameters are used to define dynamic segments in the URL path. They are specified as part of the route's path and are extracted from the actual URL when navigating to that route. Path parameters are represented by a colon (":") followed by the parameter name. For example:

{ path: 'users/:id', component: UserComponent }

In this example, ":id" is the path parameter. When navigating to a URL like "/users/123", the value "123" will be extracted and can be accessed in the UserComponent.

Query parameters: Query parameters are used to pass additional information in the URL as key-value pairs. They are appended to the URL after a question mark ("?") and can be accessed by components and services. Query parameters are not part of the route path, but they provide additional data to the route. For example:

{ path: 'search', component: SearchComponent }

In this example, a URL like "/search?query=angular" contains a query parameter "query" with the value "angular". The SearchComponent can retrieve the value of the query parameter and use it for searching.

Optional parameters: Optional parameters are used when you want to make a route parameter optional. They are represented by placing a question mark ("?") after the parameter name. Optional parameters can be useful when you have routes with varying parameters. For example:

{ path: 'products/:id/:category?', component: ProductComponent }

In this example, the ":category" parameter is optional. The ProductComponent can be accessed with URLs like "/products/123" or "/products/123/electronics". If the ":category" parameter is present in the URL, it will be available in the component, otherwise, it will be undefined.

Route parameters provide a flexible way to handle dynamic data in your Angular application. They allow you to create routes that can be easily customized and provide a seamless user experience by reflecting the current state of the application in the URL.

NgRx is a framework for building reactive applications in Angular. It is a state management library that provides a Redux-inspired architecture for managing and centralizing application state. NgRx is built on top of RxJS and follows the principles of reactive programming.

The main components of NgRx include:

1. Store: A single, immutable data structure that holds the entire application state.
2. Actions: Plain objects that describe events or user interactions that can change the state.
3. Reducers: Pure functions that take the current state and an action, and return a new state.
4. Effects: Side effect handlers that listen to actions and can perform asynchronous operations like API calls.
5. Selectors: Functions used to query and derive data from the store.

NgRx helps manage complex state in large Angular applications by providing predictable state management, improved debugging capabilities, and better separation of concerns. It's particularly useful for applications with:

• Complex data flows
• Multiple components sharing the same data
• Need for time-travel debugging
• Requirements for state persistence

Here's a simple example of NgRx usage:

// Action
export const loadUsers = createAction('[User List] Load Users');

// Reducer
export const userReducer = createReducer(
initialState,
on(loadUsers, state => ({ ...state, loading: true }))
);

// Selector
export const selectUsers = (state: AppState) => state.users;

// Component
export class UserComponent {
users$ = this.store.select(selectUsers);

constructor(private store: Store<AppState>) {}

loadUsers() {
this.store.dispatch(loadUsers());
}
}