Angular Interview QnA

Question No: 1 - What's the use of Angular?

Answer: Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It's designed for developing single-page applications (SPAs) and provides:

• Component-based structure for better organization and reusability.

• Two-way data binding for dynamic UI updates.

• Dependency Injection for modular design.

• Directives to extend HTML with new attributes and elements.

• Routing for navigation within the application without page reloads.

Question No: 2 - What are directives in Angular?

Answer: Directives are classes in Angular that add behavior to elements in the DOM. They are used to:

• Manipulate the DOM (Structural Directives like ngIf, ngFor).

• Change appearance or behavior of DOM elements (Attribute Directives like ngClass, ngStyle).

• Create reusable components (Component Directives).

Question No: 3 - Explain the different types of Angular directives.

Answer:

• Component Directives: These are the most common type, used to create custom HTML elements with attached behaviors. They are directives with a template.

• Structural Directives: These directives change the DOM layout by adding or removing elements. Examples include ngIf, ngFor.

• Attribute Directives: These change the appearance or behavior of an existing element. Examples include ngClass, ngStyle.

Question No: 4 - Explain the importance of NPM and Node_Modules folder.

Answer:

• NPM (Node Package Manager): It's used to install, share, and manage dependencies for your Angular project. NPM helps in fetching and managing packages from the npm registry.

• node_modules Folder: This folder contains all the installed packages from npm. It's crucial because it:

  • Holds all dependencies required by your project.

  • Allows for local installation of packages, ensuring version consistency across environments.

Question No: 5 - Explain the importance of Package.json file in Angular.

Answer: package.json is vital in an Angular project because:

• Lists Dependencies: It specifies all the external libraries and versions needed for the project.

• Scripts: Contains commands that can be run via npm, like starting the development server or building the app.

• Metadata: Includes project metadata like name, version, and author.

• Configuration: Provides configuration options for npm and other tools.

Question No: 6 - What is TypeScript and why do we need it?

Answer: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. We need TypeScript in Angular because:

• Static Typing: It helps catch errors at compile-time rather than runtime.

• Enhanced IDE Support: Features like auto-completion, refactoring, and type checking.

• Object-Oriented Features: Classes, interfaces, modules which make code more maintainable.

• Compatibility: TypeScript compiles to JavaScript, ensuring broad browser compatibility.

Question No: 7 - Explain the importance of Angular CLI.

Answer: Angular CLI (Command Line Interface) is crucial because:

• Project Setup: Quickly scaffolds a new Angular project with all necessary configurations.

• Development Server: Provides a local development server with live reload capability.

• Build Optimization: Includes commands for building the app for production with optimizations like AOT compilation, minification, etc.

• Code Generation: Generates components, services, modules, etc., with consistent structure.

Question No: 8 - Explain the importance of Components and Modules.

Answer:

• Components: These are the basic building blocks of Angular applications. They handle a single part of the UI and its logic. They are important for:

  • Reusability: Components can be reused across different parts of the application.

  • Modularity: Encapsulating functionality and styling.

• Modules: These are containers for a cohesive block of application code dedicated to an application domain, a workflow, or a closely related set of capabilities. They are important for:

  • Organizing Code: Group related components, directives, pipes, and services.

  • Lazy Loading: Modules can be loaded on demand, improving initial load time and performance.

Question No: 9 - What is a decorator in Angular?

Answer: In Angular, a decorator is a special type of declaration that can be attached to class declarations, methods, properties, or parameters. They are used to:

• Annotate: Classes, methods, or properties to add metadata or behavior.

• Examples: @Component, @Injectable, @Input, @Output are decorators that modify or extend the behavior of classes or properties.

Question No: 10 - What are Annotations or Metadata?

Answer: Annotations or Metadata in Angular refer to the information provided to the compiler about how classes, methods, or properties should be processed. They:

• Define Behavior: Like @Component which defines that a class is a component with specific properties like selector, template, etc.

• Enable Dependency Injection: @Injectable tells Angular to provide a class as a service through dependency injection.

Question No: 11 - What is a template?

Answer: In Angular, a template is an HTML view combined with Angular directives and bindings that define how the component should be rendered. Templates:

• Use Directives: To manipulate the DOM or apply logic.

• Data Binding: Connects the component class with the view.

Question No: 12 - Explain the four types of Data bindings in Angular.

Answer:

• Interpolation: {{ expression }} - Embed expressions in HTML.

• Property Binding: [property]="expression" - Set properties of HTML elements or directives.

• Event Binding: (event)="statement" - Execute statements on user interaction.

• Two-way Binding: [(ngModel)]="expression" - Combines property and event binding for form controls.

Question No: 13 - Explain the architecture of Angular.

Answer: Angular's architecture is based on:

• Components: The basic UI building blocks.

• Modules: Logical boundaries in your application.

• Services: For business logic not tied to a specific view.

• Dependency Injection: A pattern for managing services and dependencies.

• Directives: For DOM manipulation.

• Pipes: For transforming data in templates.

• Routing: For navigation within the SPA.

Question No: 14 - What is SPA in Angular?

Answer: SPA (Single Page Application) in Angular refers to an application that loads a single HTML page and dynamically updates the content as the user interacts with the app. This approach:

• Improves User Experience: No page reloads, faster navigation.

• Better Performance: Once the initial load is done, further interactions are quicker.

Question No: 15 - How to implement SPA in Angular?

Answer: Implementing SPA in Angular involves:

• Setting up Routing: Use RouterModule to define routes in your AppModule.

• Creating Components: Each route typically has a component associated with it.

• Using Router Outlet: In your main template, use <router-outlet></router-outlet> where routed components will be rendered.

• Navigation: Use the Router service or routerLink directive for navigation.

Question No: 16 - How to implement routing in Angular?

Answer: To implement routing:

1. Install Router: It's included by default in Angular CLI projects, but ensure you have it if you're not using CLI.

2. Define Routes:

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { HomeComponent } from './home/home.component';
    import { AboutComponent } from './about/about.component';
   
    const routes: Routes = [
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent }
    ];
   
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }
   

3. Add Router Outlet:

    <router-outlet></router-outlet>
   

4. Navigate: Use routerLink directive or programmatically with Router.

Question No: 17 - Explain Lazy Loading.

Answer: Lazy Loading in Angular means loading modules on demand rather than at the application start. This:

• Reduces Initial Load Time: Only the necessary code for the initial route is loaded.

• Improves Performance: Subsequent module loading happens based on user navigation.

Question No: 18 - How to implement Lazy Loading in Angular?

Answer:

• Configure Routes: Use loadChildren in your route configuration:

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

• Create Separate Modules: Each module you want to lazy load should be in its own file.

Question No: 19 - Define Services.

Answer: Services in Angular are classes that are designed to:

• Share Code: Across components or modules.

• Handle Business Logic: Operations like data fetching, processing, or state management.

• Be Injected: Via Dependency Injection for loose coupling between classes.

Question No: 20 - What is Dependency Injection?

Answer: Dependency Injection (DI) is a design pattern where:

• Objects are given: Their dependencies instead of creating them.

• Promotes: Loose coupling, better testability, and modularity.

Question No: 21 - How to implement Dependency Injection?

Answer:

• Define a Service: Use @Injectable() decorator:

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  // Service logic here
}

• Inject in Components or Other Services:

    constructor(private userService: UserService) { }
  

Question No: 23 - What's the benefit of Dependency Injection?

Answer:

• Modularity: Easily swap or mock dependencies for testing.

• Reusability: Services can be reused across the application.

• Flexibility: Easier to change or extend behavior without altering dependent code.

Question No: 24 - Differentiate between ng serve and ng build.

Answer:

• ng serve:

  • Development: Starts a local development server with live reload.

  • Use: Ideal for development and testing.

• ng build:

  • Production Ready: Compiles the application into an output directory.

  • Optimization: By default, does not optimize unless --prod flag is used.

Question No: 25 - Explain the --prod parameter in ng build.

Answer: Using --prod with ng build:

• AOT Compilation: Ahead-of-Time for better runtime performance.

• Minification: Reduces code size.

• Tree Shaking: Removes unused code from the bundle.

• Uglification: Makes code harder to read for humans but smaller in file size.

• Optimizes: For production deployment.

Question No: 26 - Explain ViewChild and ViewChildren.

Answer:

• ViewChild: A decorator used to access a specific child element or directive within a component's view.

  • Example: Accessing a child component or native DOM element.

• ViewChildren: Similar but returns a QueryList of matched elements or directives.

@ViewChild('childComponentRef') childComponent: ChildComponent;
@ViewChildren('childComponentRefs') childComponents: QueryList<ChildComponent>;

Question No: 27 - Why do we need Template Reference Variables?

Answer: Template reference variables allow you to:

• Reference: DOM elements or components in templates for manipulation from the component's class.

• Interaction: Like setting focus, accessing form elements, or passing data.

Question No: 28 - What is ContentProjection?

Answer: Content Projection in Angular lets you:

• Insert: Content from parent components into specific spots within child components.

• Reuse: Components while customizing their content.

Question No: 29 - Explain Content Projection Slot.

Answer: A concept from Shadow DOM, in Angular, slots are used within <ng-content> tags to project content into specific places:

• Basic Slot: <ng-content></ng-content>

• Named Slots: <ng-content select="[header]"></ng-content> for targeted projection.

Question No: 30 - What is ContentChild and ContentChildren?

Answer:

• ContentChild: Accesses a single projected content child within the component's content.

• ContentChildren: Accesses all projected content children, returning a QueryList.

@ContentChild('contentChildRef') contentChild: ElementRef;
@ContentChildren('contentChildrenRefs') contentChildren: QueryList<ElementRef>;

Question No: 31 - ViewChild vs ViewChildren vs ContentChild vs ContentChildren?

Answer:

• ViewChild/ViewChildren: Access elements within the component's own template.

  • ViewChild: One element.

  • ViewChildren: Multiple elements.

• ContentChild/ContentChildren: Access content projected into the component from a parent.

  • ContentChild: One projected content.

  • ContentChildren: Multiple projected contents.

Question No: 32 - Explain the importance of Component lifecycle.

Answer: The lifecycle hooks in Angular allow developers to:

• React: To component creation, changes, and destruction.

• Manage: Resources like subscriptions or DOM elements appropriately.

Question No: 33 - Explain events and sequence of component lifecycle.

Answer:

• ngOnChanges: Called before ngOnInit and whenever one or more input properties change.

• ngOnInit: After the first ngOnChanges when inputs are initialized.

• ngDoCheck: Called during every change detection run.

• ngAfterContentInit: After Angular has fully initialized all content of the directive.

• ngAfterContentChecked: After Angular has checked all content of the directive.

• ngAfterViewInit: After Angular has fully initialized the component's view and its child views.

• ngAfterViewChecked: After Angular has checked the component's view and its child views.

• ngOnDestroy: Just before Angular destroys the directive/component.

Question No: 34 - Constructor vs ngOnInit()

Answer:

• Constructor:

  • Use: For Dependency Injection, initializing private variables.

  • When: Before any Angular lifecycle hook runs.

• ngOnInit:

  • Use: For initialization logic, after Angular has set component data-bound properties.

  • When: After first ngOnChanges and before view or content checks.

Question No: 35 - How to make HTTP calls using Angular?

Answer: Use HttpClient from @angular/common/http:

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

fetchData() {
  this.http.get('api/data').subscribe(data => {
    console.log(data);
  });
}

Question No: 36 - What is the need of Subscribe function?

Answer: subscribe is needed because:

• Observables: Are lazy; they wait for subscription to start emitting values.

• Handling Data: It's where you define what happens with the data or errors.

Question No: 37 - How to handle errors when HTTP fails?

Answer: Use the error callback in the subscribe method:

this.http.get('api/data').subscribe({
  next: data => console.log(data),
  error: error => console.error('There was an error!', error)
});

Question No: 38 - How to pass data between components?

Answer:

• Input/Output: Parent to child via @Input, child to parent via @Output.

• Services: For shared state or data across components.

• Routing: With route parameters, query parameters, or state.

Question No: 39 - Explain the importance of input, output & event emitters.

Answer:

• @Input: Allows parent components to pass data to child components.

• @Output: Enables child components to send events or data back to parent components.

• EventEmitter: Used with @Output to emit custom events.

Question No: 40 - How to pass data during routing?

Answer:

• Route Parameters: /user/:id

• Query Parameters: /user?id=123

• State: Using NavigationExtras:

    this.router.navigate(['/user'], { state: { userId: '123' } });
  

Question No: 41 - Is it a good practice to pass data using services?

Answer: Yes, when:

• Shared State: Needed across many components.

• Decoupling: You want to keep components loosely coupled.

• Centralized Logic: For operations like data caching or state management.

Question No: 42 - What is the need of Angular Pipes?

Answer: Pipes are used to:

• Transform Data: In templates without writing boilerplate code.

• Reusability: Apply the same transformation logic across different parts of the app.

Question No: 43 - Can you name some built-in Angular Pipes?

Answer:

• DatePipe

• UpperCasePipe

• LowerCasePipe

• CurrencyPipe

• DecimalPipe

• PercentPipe

• JsonPipe

• SlicePipe

• AsyncPipe

Question No: 44 - How to create Custom pipes in Angular?

Answer:

1. Generate Pipe:

   bash

    ng generate pipe my-custom-pipe
   

2. Implement Pipe:

    import { Pipe, PipeTransform } from '@angular/core';
   
    @Pipe({
      name: 'myCustomPipe'
    })
    export class MyCustomPipe implements PipeTransform {
      transform(value: any, ...args: any[]): any {
        return value + ' transformed';
      }
    }
   

3. Use in Template:

    {{ someValue | myCustomPipe }}
   

Question No: 45 - What's the full form of RxJS?

Answer: RxJS stands for Reactive Extensions for JavaScript.

Question No: 46 - What is the purpose of RxJS?

Answer: RxJS aims to:

• Handle Asynchronous Data Streams: With Observables.

• React to Changes: Over time, like user inputs or HTTP responses.

• Compose: Asynchronous and event-based programs using observable sequences.

Question No: 47 - What are observables and observers?

Answer:

• Observable: Represents a push-based collection of future values or events. It can be subscribed to, which means it can start pushing data.

• Observer: An object with methods next, error, and complete that defines how to handle data, errors, and completion signals from an observable.

Question No: 48 - Explain the use of Subscribe with sample code.

Answer:

• Subscription: Allows you to consume values from an Observable.

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

console.log('Just before subscribe');
observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});
console.log('Just after subscribe');

Question No: 49 - How to unsubscribe in RxJS?

Answer:

• Manual Unsubscribe: Use the Subscription object returned by subscribe:

const subscription = observable.subscribe(value => console.log(value));
// Later:
subscription.unsubscribe();

• Using takeUntil: Combine with an observable that signals when to unsubscribe:

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

const destroy$ = new Subject<void>();
observable.pipe(takeUntil(destroy$)).subscribe(value => console.log(value));

// When you want to unsubscribe
destroy$.next();
destroy$.complete();

Question No: 50 - Explain the concept of operators with sample code.

Answer: Operators in RxJS are functions that:

• Transform: Data streams.

• Filter: Values from streams.

• Combine: Multiple streams.

Here's an example using map and filter:

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const source = of(1, 2, 3, 4, 5);
const example = source.pipe(
  filter(num => num % 2 === 0),
  map(num => num * 2)
);

example.subscribe(val => console.log(val)); // Outputs: 4, 8

Question No: 51 - How to install RxJS?

Answer:

• If you're using Angular, RxJS is likely already included. If not, or for standalone use:

bash

npm install rxjs

Question No: 52 - Differentiate between promise and RxJS?

Answer:

• Promise:

  • Single Value: Once resolved or rejected.

  • Eager: Execution starts immediately upon creation.

  • No Cancellation: Once started, can't be stopped.

• RxJS Observable:

  • Multiple Values: Over time, can emit multiple values or no value at all.

  • Lazy: Only start processing when subscribed to.

  • Cancellable: Can unsubscribe to stop data flow.

  • Chaining: Complex transformations are easier with operators.

Question No: 53 - In Angular where have you used RxJS?

Answer: Common uses in Angular include:

• HTTP Requests: HttpClient uses Observables.

• Event Handling: Like user interactions.

• Async Pipe: In templates for data binding to asynchronous sources.

• Form Value Changes: For reactive form controls.

• Routing: For route data resolution.

Question No: 54 - Which operators have you used from RxJS?

Answer: Some common ones:

• map, filter, switchMap, mergeMap, takeUntil, debounceTime, distinctUntilChanged, tap, catchError.

Question No: 55 - What is Push/reactive vs Pull/Imperative?

Answer:

• Push/Reactive (RxJS): Data or events are pushed to subscribers as they occur. It's event-driven, where the source decides when to emit values.

• Pull/Imperative: The consumer explicitly asks for data (like with promises or traditional function calls). Control is with the consumer.

Question No: 56 - What are Interceptors in Angular?

Answer: Interceptors in Angular are used to:

• Intercept: HTTP requests or responses.

• Modify: Headers, body, or handle errors globally.

• Add Behavior: Like authentication, logging, or caching.

Question No: 57 - How to implement Interceptors?

Answer:

1. Create an Interceptor:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

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

2. Provide in your module:

import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

Question No: 58 - Give some use of Interceptors?

Answer:

• Authentication: Add tokens to requests.

• Error Handling: Centralize error management.

• Logging: Log requests and responses.

• Caching: Store responses for repeated requests.

Question No: 59 - Can we provide multiple Interceptors?

Answer: Yes, by using the multi: true option when providing them:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
]

Question No: 60 - What are two ways of doing validation in Angular?

Answer:

• Template-Driven Forms: Validation is done through directives in the template.

• Reactive Forms: Validation is handled programmatically in the component class.

Question No: 61 - Template-driven forms VS Reactive Forms?

Answer:

• Template-Driven Forms:

  • Simple: Good for quick forms, less boilerplate.

  • Directives: Use ngModel for data binding and validation.

  • Reactive: React to changes in the DOM.

• Reactive Forms:

  • Complex: Better for dynamic, programmatic form manipulation.

  • Control: More direct control over the state, validation, and model.

  • Scalable: Easier to scale for complex scenarios.

Question No: 62 - In what situations you will use what?

Answer:

• Template-Driven:

  • For smaller, simpler forms where you don't need fine-grained control over validation or form state.

  • When you want to keep logic in the template.

• Reactive Forms:

  • For complex forms with custom validation or dynamic form controls.

  • When you need to manage form state in reaction to user actions or other observables.

Question No: 63 - Explain template reference variables.

Answer: Template reference variables in Angular are used to:

• Reference: DOM elements or directives within a template.

• Manipulate: Elements or components from component logic or for passing data.

<input #myInput>
<button (click)="doSomething(myInput.value)">Submit</button>

Question No: 64 - How do we implement Template-driven forms?

Answer:

1. Import FormsModule:

    import { FormsModule } from '@angular/forms';
   

2. Add to imports in your module:

    @NgModule({
      imports: [FormsModule]
    })
   

3. In Template:

    #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
      <input name="firstName" ngModel required>
      <button type="submit">Submit</button>
    </form>
   

4. Handle in Component:

    onSubmit(form) {
      console.log(form.value);
    }
   

Question No: 65 - How to check if overall validation and specific validations are good?

Answer:

• Form Validity: myForm.valid for overall form validity.

• Control Validity: myForm.controls['firstName'].valid for individual control validation.

if (myForm.valid) {
  console.log('Form is valid');
} else {
  console.log('Form is invalid');
}

Question No: 66 - How do we implement Reactive forms?

Answer:

1. Import ReactiveFormsModule:

import { ReactiveFormsModule } from '@angular/forms';

2. Add to module imports:

@NgModule({
  imports: [ReactiveFormsModule]
})

3. In Component:

import { FormBuilder, Validators } from '@angular/forms';

export class MyComponent {
  myForm = this.fb.group({
    firstName: ['', Validators.required]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    console.log(this.myForm.value);
  }
}

4. Template:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input formControlName="firstName">
  <button type="submit">Submit</button>
</form>

Question No: 67 - How can we implement composite validations?

Answer: By creating custom validators that combine multiple validation rules:

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function compositeValidator(control: AbstractControl): ValidationErrors | null {
  const name = control.get('firstName');
  const surname = control.get('surname');

  if (name.pristine || surname.pristine) {
    return null;
  }

  if (name && surname && name.value === surname.value) {
    return { namesMatch: true };
  }
  return null;
}

// Use in form group
myForm = this.fb.group({
  firstName: ['', Validators.required],
  surname: ['', Validators.required]
}, { validators: compositeValidator });

Question No: 68 - How to create dynamic validation?

Answer: You can dynamically add or remove validators based on certain conditions:

myForm.get('password').setValidators([Validators.required, Validators.minLength(8)]);
myForm.get('password').updateValueAndValidity();

// Or to remove a validator
myForm.get('password').clearValidators();
myForm.get('password').updateValueAndValidity();

Question No: 69 - Can you talk about some inbuilt validators?

Answer:

• Validators.required - Ensures the control has a non-empty value.

• Validators.minLength(minLength: number) - Checks if the control value has the minimum length.

• Validators.maxLength(maxLength: number) - Checks if the control value does not exceed the maximum length.

• Validators.pattern(pattern: string | RegExp) - Checks if the control value matches a regex pattern.

• Validators.email - Validates email format.

• Validators.min(min: number) - Checks if the value is greater than or equal to a minimum number.

• Validators.max(max: number) - Checks if the value is less than or equal to a maximum number.

Question No: 70 - How can you create your own custom validator?

Answer:

import { AbstractControl, ValidationErrors } from '@angular/forms';

function usernameValidator(control: AbstractControl): ValidationErrors | null {
  if (!control.value.match(/^[a-zA-Z0-9]+$/)) {
    return { invalidUsername: true };
  }
  return null;
}

// Use in form group or control
myForm = this.fb.group({
  username: ['', [Validators.required, usernameValidator]]
});

Question No: 71 - Can we implement Angular validators without the FORM tag?

Answer: Yes, you can apply validation to individual controls or form groups outside of a <form> tag using reactive forms:

<div [formGroup]="myForm">
  <input formControlName="username">
</div>

myForm = this.fb.group({
  username: ['', Validators.required]
});

Question No: 72 - What is [ngModelOptions]="{standalone: true}"?

Answer: This is used in template-driven forms to:

• Enable: Two-way data binding outside of a form tag.

• Standalone: Allows use of ngModel without wrapping in a <form> tag or associating with ngForm.

<input [(ngModel)]="name" [ngModelOptions]="{standalone: true}">

Question No: 73 - What are Angular Modules?

Answer: Angular Modules (NgModule) are containers for a set of components, directives, pipes, and services that form a cohesive block of functionality. They:

• Organize Code: Group related parts of an application.

• Enable Lazy Loading: Load modules on demand.

• Dependency Injection: Define providers for services.

A module is defined using the @NgModule decorator:

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

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

Question No: 74 - Explain the difference between imports and declarations in an Angular Module.

Answer:

• declarations: Lists components, directives, and pipes that belong to this module. These are where you define what Angular should know about within this module's scope.

• imports: Lists other modules whose exported declarations are needed by components, directives, or pipes declared in this module.

Question No: 75 - What is the Angular Change Detection mechanism?

Answer: Angular's Change Detection mechanism is responsible for:

• Tracking Changes: In the application's model and updating the view accordingly.

• Strategies:

  • Default: Checks every component from root to child whenever anything changes.

  • OnPush: Only checks if input properties or events change, improving performance for certain scenarios.

Question No: 76 - How can you optimize Change Detection in Angular?

Answer:

• Use OnPush: For components where inputs are the only sources of change.

• Immutable Data: Since OnPush relies on reference changes, use immutable operations.

• Avoid Unnecessary Computations: Use trackBy in ngFor to reduce DOM manipulation.

• Manual Trigger: Use ChangeDetectorRef to manually trigger or detach from change detection.

• Zone.js Patching: Be mindful of what gets patched, potentially using runOutsideAngular for operations that don't need change detection.

Question No: 77 - What is Zone.js in Angular?

Answer: Zone.js is a library that Angular uses to:

• Patch: Asynchronous APIs (like setTimeout, XMLHttpRequest) to know when to perform change detection.

• Scopes: Create zones where asynchronous tasks are executed, allowing Angular to detect changes after these tasks complete.

Question No: 78 - Explain the use of ChangeDetectorRef.

Answer: ChangeDetectorRef in Angular allows for:

• Manual Change Detection: Triggering change detection with detectChanges().

• Detach from Change Detection: With detach() when a component's changes don't need to be tracked.

• Reattach: With reattach() when you want to start tracking changes again.

It's useful for performance optimization in complex applications or when dealing with heavy computations.

Question No: 79 - How does Angular handle state management?

Answer: Angular doesn't prescribe one specific way for state management but supports various approaches:

• Component State: For local UI state within components.

• Services: Shared state can be managed via injectable services, often with RxJS for observable state.

• Third-Party Libraries: Like NgRx for reactive state management using Redux-like patterns, or Akita for managing entity states.

Question No: 80 - What are Guards in Angular and how do they work?

Answer: Guards in Angular are interfaces that can be used to control navigation in the router. Types include:

• CanActivate: Decides if a route can be activated.

• CanActivateChild: Similar but for child routes.

• CanDeactivate: Allows checking if you can leave a route (useful for unsaved changes).

• CanLoad: Controls if a module can be loaded lazily.

• Resolve: Fetches data before route activation.

They work by returning a boolean, Observable<boolean>, or Promise<boolean> to the router, which then decides based on the returned value whether to proceed with the navigation.

Question No: 81 - How to implement a CanActivate Guard?

Answer:

1. Create the Guard:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      if (localStorage.getItem('token')) {
        return true;
      } else {
        this.router.navigate(['/login']);
        return false;
      }
  }
}

2. Use in Routing:

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AuthGuard]
  }
];

Question No: 82 - What are Angular Animations?

Answer: Angular Animations provide a way to add animations to your application:

• Trigger: Defines an animation that you can attach to an element.

• State: Defines different states of an element (e.g., 'open' or 'closed').

• Transition: Defines how to animate between states.

They're used in templates with directives like @triggerName.

Question No: 83 - How to implement Angular Animations?

Answer:

1. Import Animations Module:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. Add to imports in your AppModule:

@NgModule({
  imports: [BrowserAnimationsModule]
})

3. Define Animations in Component:

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ]
})
export class AppComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

4. Use in Template:

<div [@openClose]="isOpen ? 'open' : 'closed'" (click)="toggle()">Click me</div>

Question No: 84 - What is AOT Compilation in Angular?

Answer: AOT (Ahead-Of-Time) Compilation in Angular:

• Pre-Compiles: Templates and components into JavaScript code before the application even loads.

• Advantages:

  • Faster Bootup: No need for client-side compilation.

  • Smaller Bundle Size: Templates and styles are inlined.

  • Catch Template Errors: During build time, not runtime.

It's particularly useful for production builds.

Question No: 85 - How to enable AOT Compilation?

Answer: AOT is enabled by default when using:

ng build --prod

Or you can explicitly enable it for development:

ng build --aot

For JIT (Just-In-Time) during development:

ng build

Question No: 86 - Explain the difference between AOT and JIT compilation.

Answer:

• JIT (Just-In-Time):

  • Compilation: Happens at runtime in the browser.

  • Use Case: Development, easier for debugging and dynamic templates.

  • Performance: Slower initial load, but allows for dynamic component creation.

• AOT (Ahead-Of-Time):

  • Compilation: Done during the build process.

  • Use Case: Production builds for better performance.

  • Performance: Faster load times, smaller bundle size, but less flexible for dynamic changes.

Question No: 87 - What are Angular Schematics?

Answer: Angular Schematics are:

• Code Generators: For creating files, updating configurations, or moving files around in Angular projects.

• Customizable: Developers can write their own to automate project setup or refactoring tasks.

• CLI Integration: Used by Angular CLI for commands like ng generate component.

Question No: 88 - How to use Angular Schematics?

Answer:

• Built-in Schematics: Use Angular CLI commands:

ng generate component my-component

• Creating Custom Schematics:

  1. Install the schematics CLI:

    npm install -g @angular-devkit/schematics-cli

2. Generate a new schematic collection:

    schematics blank --name=my-schematics

3. Modify the schematics in the collection.json and create your own .ts files.

4. Use your schematics:

    schematics .:my-schematic --option=value

Question No: 89 - What are Angular Elements?

Answer: Angular Elements allow you to:

• Package Angular Components: As custom elements (Web Components) that can be used in any HTML, not just Angular applications.

• Interoperability: Use Angular components in non-Angular frameworks or vanilla JavaScript.

• Encapsulation: Each element is self-contained, including its styles and behavior.

Question No: 90 - How to create Angular Elements?

Answer:

1. Install Necessary Packages:

ng add @angular/elements

2. In your module:

import { createCustomElement } from '@angular/elements';
import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [MyComponent],
  entryComponents: [MyComponent]
})
export class AppModule { 
  constructor(private injector: Injector) {
    const myElement = createCustomElement(MyComponent, { injector: this.injector });
    customElements.define('my-element', myElement);
  }

  ngDoBootstrap() {}
}

3. Use in HTML:

<my-element></my-element>

Question No: 91 - What is the difference between ngOnInit and ngAfterViewInit?

Answer:

• ngOnInit: Called after Angular has fully initialized all data-bound properties of the directive. Ideal for initialization logic after data binding.

• ngAfterViewInit: Called after Angular has fully initialized the component's view and its child views. Useful when you need to interact with child components or use @ViewChild.

Question No: 92 - How do you handle state persistence in Angular?

Answer: State persistence can be handled by:

• LocalStorage/SessionStorage: For simple data persistence.

• IndexedDB: For more complex scenarios or larger data sets.

• Service Workers: With a library like angular-pwa for offline capabilities.

• State Management Libraries: Like NgRx with effects for handling side effects like saving to local storage or an API.

// Example with LocalStorage
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private state = {};

  loadState() {
    this.state = JSON.parse(localStorage.getItem('appState') || '{}');
  }

  saveState() {
    localStorage.setItem('appState', JSON.stringify(this.state));
  }

  get(key: string) {
    return this.state[key];
  }

  set(key: string, value: any) {
    this.state[key] = value;
    this.saveState();
  }
}

Question No: 93 - What are Angular Testing Libraries?

Answer: For testing in Angular, you typically use:

• Jasmine: The testing framework for writing tests.

• Karma: A test runner that runs tests in various browsers.

• Protractor: For end-to-end testing of Angular apps.

• Jest: Increasingly used for unit testing with its speed and features.

Question No: 94 - How to write a unit test for an Angular component?

Answer:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should display the correct title', () => {
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('My Title');
  });
});

Question No: 95 - How to mock services in Angular tests?

Answer: Use TestBed to provide mock implementations:

import { TestBed } from '@angular/core/testing';
import { MyService } from './my.service';

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

  beforeEach(async () => {
    const myServiceMock = {
      getData: () => 'mock data'
    };

    await TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      providers: [
        { provide: MyService, useValue: myServiceMock }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should use the mock service', () => {
    expect(component.data).toBe('mock data');
  });
});

Question No: 96 - What is Ivy in Angular?

Answer: Ivy is:

• New Rendering Engine: Introduced in Angular 9 as the default compiler and runtime.

• Advantages:

  • Smaller Bundle Sizes: Due to better tree-shaking.

  • Faster Rebuild Times: Only what's changed gets rebuilt.

  • Better Template Type Checking: Improves development experience.

  • Backwards Compatible: With View Engine.

Question No: 97 - How does Ivy impact development?

Answer: Ivy impacts development by:

• Performance: Faster initial load and runtime performance.

• Debugging: Improved error messages and stack traces.

• Development: Easier to update and maintain applications due to smaller, more focused change detection.

• Template Expressions: More comprehensive type checking.

Question No: 98 - What are Angular Universal and Server-Side Rendering (SSR)?

Answer: Angular Universal is:

• SSR Framework: Allows rendering Angular applications on the server before sending them to the client.

• Benefits:

  • SEO: Improved search engine visibility as content is available in HTML.

  • Performance: Faster initial page load since the server sends a pre-rendered page.

  • Social Media Sharing: Better previews when sharing links because initial content is server-rendered.

Question No: 99 - How to set up Angular Universal?

Answer:

1. Install Universal:

ng add @nguniversal/express-engine --clientProject [your-project-name]

2. Build for SSR:

npm run build:ssr && npm run serve:ssr

3. Modify main.ts or create an app.server.module.ts:

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

4. Server configuration in server.ts:

// server.ts
import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/browser');
  const indexHtml = join(distFolder, 'index.html');

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, res });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The following code is to ensure that this file is compiled by webpack for use in the server
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

Question No: 100 - How do you configure routing for SEO in Angular Universal?

Answer:

• Static Routes: Ensure all routes are known at build time for better SEO.

• Prerendering: Use angular-prerender for static site generation if applicable.

• Use ng g universal: This will set up Universal for you, including routing configuration.

// In your routing module or where you define routes
pathMatch: 'full',
data: {
  meta: {
    title: 'Page Title',
    description: 'Page Description',
    keywords: 'keywords, for, SEO'
  }
}

And in your app.server.module.ts or similar:

import { TransferState, makeStateKey } from '@angular/platform-browser';

export const META = makeStateKey('meta');

@NgModule({
  ...
})
export class AppServerModule {
  constructor(private transferState: TransferState) {}

  ngOnBootstrap() {
    this.transferState.set(META, {
      title: 'App Title',
      description: 'App Description',
      keywords: 'angular, universal'
    });
  }
}

This setup ensures that SEO data is transferred from server to client for better indexing by search engines.