1. Why were client-side frameworks like Angular introduced?

Before frameworks like Angular, developers used VanillaJS and jQuery to create dynamic websites.

However, as applications grew in complexity, managing state, data binding, and DOM manipulation became tedious.
(VERY TEDIOUS)

Angular introduced client-side frameworks to solve these challenges by:

• Providing better separation of concerns with components.
• Enabling efficient data binding.
• Offering structured application development.

2. How does an Angular application work?

An Angular application follows a modular architecture.

1. The angular.json file defines configurations.
2. The main.ts file bootstraps the app by loading the AppModule.
3. The app.module.ts file declares components and modules.
4. The index.html file loads the root component <app-root>, which initiates rendering.

3. What are some advantages of Angular over other frameworks?

• Built-in Features: Angular provides routing, state management, RxJS, and HTTP services.
• Declarative UI: Uses HTML templates instead of complex JavaScript code.
• Google’s Long-term Support: Ensures continuous improvements and reliability.

4. How does Angular compare with React?

5. How does Angular differ from AngularJS?

6. Understand the MVVM architecture.

Angular follows the Model-View-ViewModel (MVVM) architecture:

• Model: Represents business logic.
• View: Handles UI rendering.
• ViewModel: Binds data between Model and View.

7. What is Change Detection in Angular?

Change detection synchronizes the application state with the UI. Angular follows a unidirectional data flow, updating the UI efficiently.

8. What is Ahead-of-Time (AOT) compilation?

Angular provides two types of compilation:

• JIT (Just-in-Time): Compilation happens in the browser at runtime.
• AOT (Ahead-of-Time): Compilation happens during the build phase, improving performance.

9. What are HTTP interceptors?

HTTP interceptors allow modifying HTTP requests globally. Example:

1
2
3
4
5
6
7

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedReq = req.clone({ setHeaders: { Authorization: `Bearer token` } });
    return next.handle(clonedReq);
  }
}

10. What are Observables in Angular?

Observables (RxJS) allow handling asynchronous data streams. Unlike Promises, Observables can emit multiple values over time.

1
2
3
4
5

const myObservable = new Observable(observer => {
  observer.next('Hello');
  observer.complete();
});
myObservable.subscribe(value => console.log(value));

11. What is View Encapsulation?

View Encapsulation ensures that styles defined in a component do not leak to other components.

12. What is Angular Universal?

Angular Universal enables server-side rendering (SSR), which improves SEO and initial page load performance.

13. What are Pipes in Angular?

Pipes transform data before displaying it. Example:

1

<p>{{ today | date: 'fullDate' }}</p>

Creating a custom pipe:

1
2
3
4
5
6

@Pipe({ name: 'customPipe' })
export class CustomPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

14. What are Angular Decorators?

Decorators in Angular provide metadata configuration. Examples:

• @Component() – Defines a component.
• @NgModule() – Defines a module.
• @Injectable() – Defines a service.

15. What is the purpose of ngOnInit()?

ngOnInit() is a lifecycle hook called after component initialization:

1
2
3
4
5

export class MyComponent implements OnInit {
  ngOnInit() {
    console.log("Component initialized");
  }
}

16. How does Angular handle security vulnerabilities?

Security is a critical aspect of Angular development. Angular has built-in protections against Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and Clickjacking. Some key security measures include:

• Sanitization: Angular automatically sanitizes user input in templates to prevent XSS attacks.
• Content Security Policy (CSP): Restricts the sources from which scripts can be executed.
• HttpClient Security: Prevents CSRF by allowing developers to use HTTP interceptors for authentication tokens.
• Strict Contextual Escaping: Ensures that dynamic data is treated safely.

17. What are Angular Zones, and how do they affect change detection?

Angular Zones (via Zone.js) help track asynchronous operations to determine when change detection should run. Angular’s NgZone allows developers to optimize performance by controlling how and when change detection occurs.

Example of running code outside Angular’s zone to improve performance:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-optimized',
  template: '<button (click)="doWork()">Run Task</button>'
})
export class OptimizedComponent {
  constructor(private ngZone: NgZone) {}

  doWork() {
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        console.log('Task completed outside Angular zone');
      }, 2000);
    });
  }
}

This prevents unnecessary UI updates and improves application performance.

18. What is Server-Side Rendering (SSR) with Angular Universal?

Angular Universal enables server-side rendering (SSR), allowing Angular applications to pre-render pages on the server before sending them to the client. This improves:

• SEO (Search Engine Optimization): Since crawlers can index pre-rendered pages.
• Performance: Faster initial page load times.
• User Experience: Content is visible immediately, even before JavaScript loads.

To enable Angular Universal:

1

ng add @nguniversal/express-engine

19. What are Signals in Angular, and how do they work?

Signals are a new reactivity model introduced in Angular to improve state management and change detection. They enable fine-grained reactivity without triggering unnecessary component updates.

Example of using Signals:

1
2
3
4
5
6
7

import { signal } from '@angular/core';

const counter = signal(0);

function increment() {
  counter.set(counter() + 1);
}

20. How does Angular optimize rendering with TrackBy in ngFor?

By default, Angular re-renders all elements when an array changes. Using trackBy, Angular can track items more efficiently and update only the changed ones.

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

@Component({
  selector: 'app-list',
  template: `<div *ngFor="let item of items; trackBy: trackById">{{ item.name }}</div>`
})
export class ListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
  ];

  trackById(index: number, item: any) {
    return item.id;
  }
}

21. How do you handle memory leaks in an Angular application?

Memory leaks can cause performance issues. Strategies to avoid them include:

• Unsubscribing from Observables using takeUntil or ngOnDestroy.
• Using async pipes to automatically unsubscribe.
• Avoiding detached DOM elements holding references.

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

@Component({...})
export class ExampleComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private service: DataService) {
    this.service.getData()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => console.log(data));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

22. How do you handle error handling in an Angular application?

Error handling should be implemented globally for better maintainability. Use an HTTP interceptor to catch API errors:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError(error => {
        console.error('Error:', error);
        return throwError(() => new Error('Something went wrong!'));
      })
    );
  }
}

23. How does Angular handle state management?

For small applications, RxJS BehaviorSubject is sufficient. For larger applications, NgRx or Akita provides structured state management.

Example using BehaviorSubject:

1
2
3
4
5
6
7
8
9

@Injectable({ providedIn: 'root' })
export class StateService {
  private state = new BehaviorSubject<string>('default state');
  state$ = this.state.asObservable();

  updateState(newState: string) {
    this.state.next(newState);
  }
}

24. What is Angular Universal, and how does it impact performance?

Angular Universal enables server-side rendering (SSR), allowing Angular applications to pre-render pages on the server before sending them to the client. Benefits include:

• Improved SEO: Search engines can index pre-rendered pages more effectively.
• Faster Initial Page Load: Reduces the time it takes for content to be displayed.
• Enhanced Performance on Low-Powered Devices: Since SSR offloads rendering work from the client.

To set up Angular Universal:

1

ng add @nguniversal/express-engine

25. How does Change Detection work in Angular, and how can you optimize it?

Angular uses a Change Detection Mechanism to update the UI when data changes. The default ChangeDetectionStrategy is Default, which checks all components in a tree.

For performance improvements, use OnPush:

1
2
3
4
5
6
7
8

@Component({
  selector: 'app-optimized',
  templateUrl: './optimized.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {
  @Input() data: string;
}

This ensures change detection runs only when the @Input reference changes, reducing unnecessary updates.

26. What is the difference between Reactive Forms and Template-Driven Forms in Angular?

Example of a Reactive Form:

1
2
3
4

this.form = new FormGroup({
  name: new FormControl('', [Validators.required]),
  email: new FormControl('', [Validators.email])
});

27. What are NgModules, and how do they help in structuring an Angular application?

NgModules are containers for components, directives, pipes, and services, helping modularize an Angular application. Example of feature module:

1
2
3
4
5
6

@NgModule({
  declarations: [DashboardComponent],
  imports: [CommonModule, FormsModule],
  exports: [DashboardComponent]
})
export class DashboardModule {}

Using Lazy Loading, we can improve performance:

1
2
3

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard.module').then(m => m.DashboardModule) }
];

28. How does Angular handle security vulnerabilities?

Angular has built-in protections against Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and Clickjacking. Security measures include:

• Sanitization: Angular automatically sanitizes user input.
• CSP (Content Security Policy): Restricts sources for scripts.
• HttpClient Security: Uses interceptors for authentication tokens.

29. What is an Angular Service Worker, and how does it improve application performance?

An Angular Service Worker enables progressive web app (PWA) capabilities like offline caching, background sync, and push notifications.

To set up a service worker:

1

ng add @angular/pwa

Service Worker improves performance by caching static assets and API responses, reducing server requests.

30. How do you write unit tests for an Angular Component?

Angular uses Jasmine and Karma for testing. Example unit test:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });
});

31. What are the best practices for optimizing Angular applications?

Angular applications can suffer from performance issues as they grow. Here are some best practices to optimize your app:

• Use OnPush Change Detection: Reduce unnecessary re-renders by using ChangeDetectionStrategy.OnPush.
• Lazy Load Modules: Load feature modules only when needed using loadChildren.
• Optimize Template Rendering: Use trackBy in *ngFor to prevent unnecessary DOM manipulations.
• Use Pure Pipes: Ensure pipes are pure to prevent unnecessary recalculations.
• Minimize DOM Updates: Avoid direct DOM manipulation and use Angular’s binding mechanisms.
• Efficient RxJS Usage: Use operators like debounceTime, switchMap, and takeUntil to manage subscriptions effectively.

32. What is Route Guards in Angular?

Route Guards help control navigation within an Angular application. They restrict access to certain routes based on conditions like authentication status, permissions, or data availability.

Types of Route Guards:

• CanActivate: Prevents unauthorized users from accessing routes.
• CanDeactivate: Prevents users from leaving a route without confirmation.
• Resolve: Pre-fetches data before navigating to a route.
• CanLoad: Prevents lazy-loaded modules from being loaded if conditions aren’t met.

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

33. How do you implement state management in Angular?

State management is crucial for handling data efficiently in Angular applications. Common state management solutions include:

• RxJS and BehaviorSubject: Simple and lightweight for managing shared state.
• NgRx (Redux for Angular): Predictable state management using Actions, Reducers, and Effects.
• Akita: State management with a simple API.
• NgXS: State management similar to NgRx but with fewer boilerplate requirements.

Example using NgRx:

1
2
3
4
5
6
7
8

// Actions
export const addItem = createAction('[Items] Add', props<{ item: string }>());

// Reducer
export const itemsReducer = createReducer(
  initialState,
  on(addItem, (state, { item }) => [...state, item])
);

34. How do you test Angular applications?

Angular applications should be tested using:

• Unit Tests (Jasmine & Karma): For testing components and services.
• End-to-End (E2E) Tests (Protractor/Cypress): For testing full workflows.
• Mocking Services: Using HttpTestingController to mock API responses.

Example unit test for a component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });
});

35. How do you debug Angular applications effectively?

Debugging Angular applications requires the right tools and techniques:

• Use Augury Chrome Extension: Visualizes Angular component trees.
• Leverage Browser Developer Tools: Use console.log, breakpoints, and network monitoring.
• Debug Change Detection Issues: Use ng.profiler.timeChangeDetection() in the console.
• Check RxJS Streams: Use tap() for logging Observable values.
• Enable Strict Mode in TypeScript: Helps catch errors early.

36. What is Hybrid Rendering in Angular?

Hybrid rendering combines server-side rendering (SSR) and client-side rendering (CSR) for optimized performance.

Benefits:

• Faster initial load times.
• Better SEO for search engines.
• Reduced client-side computation for complex pages.

Example of implementing SSR using Angular Universal:

1

ng add @nguniversal/express-engine

37. What is the difference between HTTP Interceptors and Guards in Angular?

Example of an HTTP interceptor:

1
2
3
4
5
6
7

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedReq = req.clone({ setHeaders: { Authorization: `Bearer token` } });
    return next.handle(clonedReq);
  }
}

38. What is Angular CDK (Component Dev Kit)?

The Angular Component Dev Kit (CDK) provides a set of behavior-driven tools and utilities that help developers create custom UI components while following Material Design principles.

Key Features of Angular CDK:

• Drag and Drop: Enables draggable UI components.
• Overlay: Helps create floating panels like modals and dropdowns.
• Virtual Scrolling: Efficiently loads large lists.
• Accessibility (a11y): Ensures applications are usable by people with disabilities.

Example of CDK Drag and Drop:

1
2
3
4
5
6

import { DragDropModule } from '@angular/cdk/drag-drop';
@Component({
  selector: 'app-draggable-list',
  template: `<div cdkDrag>Drag me!</div>`
})
export class DraggableListComponent {}

39. What are Template-Driven Forms vs. Reactive Forms?

Angular provides two types of forms:

• Template-Driven Forms: Uses Angular directives (ngModel) to bind data.
• Reactive Forms: Uses FormGroup and FormControl to manage state programmatically.

Example of Reactive Form:

1
2
3
4

this.form = new FormGroup({
  name: new FormControl('', [Validators.required]),
  email: new FormControl('', [Validators.email])
});

40. How does Angular handle i18n (Internationalization)?

Angular provides built-in support for internationalization (i18n) to create multi-language applications.

Steps to enable i18n:

1. Add translation markers in the template:

   1	<p i18n>Hello, world!</p>

2. Extract translations:

   1	ng extract-i18n

3. Translate and build for a specific locale:

   1	ng build --localize