"In 2024, the economy continues to suffer from a recession, and layoffs are still happening. Many developers are searching for employment. This isn't an ideal situation; you gain experience from your first and second interviews and crack the third one. At the moment, securing an interview call is tough. You need to prepare yourself thoroughly to succeed in your first interview. In the past three months, I've had three interviews and managed to crack all of them."

To help others get ready for their Angular interviews, I’ve compiled my notes on Angular in Google Drive and shared them in an article on Medium. In the article, I’ve connected some of the questions to design patterns and included discussions on scenario-based questions.

What measures will you implement to enhance the Angular application?

• Remove unnecessary library and code
• Use trackBy in ngFor loops
• Caching the static file to improve the performance
• The `ng-container` directive is designed to apply structural directives without adding extra elements to the DOM. It serves as a grouping tool for directives such as `ngIf`, `ngFor`, and `ngSwitch`, ensuring the output remains clean and free from unnecessary HTML tags.
• Compressed the image size in application
• Incorporate lazy loading for your modules. By doing this, you ensure that only the essential components of your application are loaded as needed, which helps decrease the initial load time.
• "Implement pagination or infinite scrolling to enhance how data loads on the page."
• The OnPush change detection strategy is another technique for boosting Angular's performance. With this approach, Angular doesn't have to go through the whole component tree to spot changes in properties. Instead, we can selectively re-render the component when needed.

In how many ways can we share data between components?

1. Input/Output Binding: Parent components can send data to child components using input properties (@Input decorator) and get data back from child components using output properties (@Output decorator).
2. ViewChild/ContentChild: By utilizing ViewChild and ContentChild decorators, parent components can interact with and access the properties of their child components.
3. Services: Angular services allow for the management and access of shared data. Different components can inject and utilize the same instance of a service to share data seamlessly.
4. State Management: NgRx is useful for handling the application's state and distributing data among components through a centralized store.

"Can you use a constructor to call an API in an Angular component rather than relying on the ngOnInit lifecycle hook?"

Although you can technically call an API from the Angular constructor, it's generally not recommended. The constructor gets called when the component class is being initialized, but this happens before Angular has completed the initialization of key features such as dependency injection or input properties. As a result, making an API call at this stage could lead to unpredictable behavior or errors.

How does a standard Angular component differ from a standalone component?

• In an Angular application, standard components need to be part of an NgModule to function properly. However, standalone components bypass this requirement and can be utilized on their own without needing to be added to an NgModule.
• Standard components necessitate importing Angular or third-party functionalities into the NgModule. For example, to use the *ngFor directive, you need to import CommonModule from @angular/common in the NgModule. On the other hand, standalone components have the advantage of importing dependencies directly within their own files.

How to prevent cross-site scripting (XSS) in Angular

• Interpolation and Property Binding: Angular incorporates built-in data binding techniques like interpolation ({{ }}) and property binding ([ ]). These techniques ensure the automatic sanitization of user input, safeguarding your browser rendering. To avoid XSS vulnerabilities, consistently utilize these mechanisms when presenting dynamic content.
• Sanitize User Input: When working with dynamic content that potentially includes HTML, CSS, or JavaScript, utilize Angular’s built-in DomSanitizer service to cleanse the input prior to displaying it in the DOM.

mport { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

// Sanitize user input
sanitizedHtml = this.sanitizer.sanitize(SecurityContext.HTML, userInput);

• To safely handle Angular templates, steer clear of employing innerHTML or outerHTML for creating dynamic HTML. Opt instead for Angular's template syntax, which offers a secure method to display dynamic content.

What are Host Binding and Host Listening in Angular?

In Angular, decorators like @HostBinding and @HostListener are utilized to manage interactions with a directive or component's host element.

@HostBinding: The @HostBinding decorator connects a property directly to the host element, enabling you to assign a property on the host element that depends on a directive or component property.

import { Directive, HostBinding } from '@angular/core';

@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
  @HostBinding('style.backgroundColor') 
  backgroundColor: string = 'yellow';
}

@HostListener: The @HostListener decorator helps you monitor and respond to events that happen on the host element. With it, you can establish a method that gets triggered whenever a particular event occurs on the host element.

import { Directive, HostListener } from '@angular/core';

@Directive({
 selector: '[appClickLogger]'
})
export class ClickLoggerDirective {

 @HostListener('click', ['$event'])
 onClick(event: Event): void {
  console.log('Host element clicked!', event);
 }

}

Here are some typical questions you should get ready for before your interview.

• What is Angular, and why does Angular use TypeScript?
• What is Angular Material?
• Understanding what constitutes a directive, along with the different types that exist, is crucial.
• What are the building blocks of Angular?
• What is Dependency Injection (DI)
• What exactly is data binding, and in how many different methods can it be carried out?
• Can you go over the different types of filters available in Angular?
• What exactly is ViewEncapsulation, and in how many different ways can you apply it in Angular?
• Why prioritize TypeScript over JavaScript in Angular?
• What do you understand By RouterOutlet and RouterLink
• What occurs if the script tag is placed inside a template?
• What exactly is ViewChild, and why would you choose to use {static: false}?
• How many ways can we share data between components?
• Angular Lifecycle Hooks
• What is AOT compilation? Why should you consider AOT?
• What is “sourceMap”: true in angular
• What is RxJS?
• Promise vs Obserable
• What are Template and Reactive forms?
• What are Forroot and childroot in Angular?
• How to handle multiple http requests in Angular?
• Map vs mergeMap vs switchMap vs concatMap
• What are class decorators?
• What is the Component Decorator in Angular?
• Bundle Analysis
• When to Use Put and Patch?
• What is purpose of the Angular.json
• Angular 17 new features:
• What are the differences between a typical Angular component and a standalone component?
• What is bootstrapModule in Angular?
• Angular testing framework?
• pre-fetch your data by using Resolvers
• Guard in angular
• Host binding and Host listening
• Polyfill in Angular
• Router outlet in angular
• Can we use multiple router outlet
• Can i write a component without constructor
• Pure pipe vs Impure pipe
• Formbuilder vs Formgroup in angular
• View encapsulation in angular