Angular Interview questions and answers

how to implement Observables, Promises, Lazy Loading, and Eager Loading in Angular:

1. Observable in Angular

Definition: An Observable is used for handling asynchronous data streams where multiple values can be emitted over time.

Implementation:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-observable-demo',
  template: `<div>{{ data | async }}</div>`,
})
export class ObservableDemoComponent implements OnInit {
  data: Observable<string>;

  ngOnInit() {
    this.data = new Observable((observer) => {
      setTimeout(() => observer.next('Observable Data 1'), 1000);
      setTimeout(() => observer.next('Observable Data 2'), 2000);
      setTimeout(() => observer.complete(), 3000);
    });
  }
}

In this example, the data observable emits values over time, and the | async pipe in the template automatically subscribes to the observable.

2. Promise in Angular

Definition: A Promise handles asynchronous operations but resolves only once, providing either a success value or an error.

Implementation:

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

@Component({
  selector: 'app-promise-demo',
  template: `<div>{{ message }}</div>`,
})
export class PromiseDemoComponent implements OnInit {
  message: string;

  ngOnInit() {
    this.getData().then((res) => {
      this.message = res;
    }).catch((err) => {
      this.message = err;
    });
  }

  getData(): Promise<string> {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve('Promise Data Resolved'), 2000);
    });
  }
}

In this example, the getData() method returns a promise that resolves after 2 seconds.


3. Lazy Loading in Angular

Definition: Lazy loading is the technique of loading feature modules only when they are needed (usually upon navigation).

Steps to Implement Lazy Loading:

1. Create a feature module (e.g., feature.module.ts).


2. Configure routes with loadChildren.



Example:

// app-routing.module.ts
const routes: Routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the feature.module.ts:


@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule, RouterModule.forChild([{ path: '', component: FeatureComponent }])]
})
export class FeatureModule { }

Here, the FeatureModule is loaded only when the user navigates to /feature.




4. Eager Loading in Angular

Definition: Eager loading is the default loading strategy where modules are loaded as soon as the application starts.

Steps to Implement Eager Loading:

Simply declare the module in the app.module.ts imports array, without the loadChildren property.


Example:

// app.module.ts
import { FeatureModule } from './feature/feature.module';

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

Here, the FeatureModule is eagerly loaded when the application starts.


Key Differences Between Lazy Loading and Eager Loading

1. Lazy Loading: Modules are loaded when they are required, reducing the initial load time of the application.


2. Eager Loading: Modules are loaded at the application startup, increasing the initial load time but making the module instantly available.

#dotnettechpro #dotnet #csharp #angular

These examples cover how to implement observables, promises, lazy loading, and eager loading in Angular. Let me know if you need further clarification!

Comments

Post a Comment

Popular posts from this blog

Finding 2nd and 3rd Highest and Lowest Salaries Using LINQ

Finding 2nd and 3rd Highest and Lowest Salaries Using LINQ 1. 2nd Highest Salary: var secondHighestSalary = employees     .OrderByDescending(e => e.Salary)     .Select(e => e.Salary)     .Distinct()     .Skip(1)     .FirstOrDefault(); 2. 3rd Highest Salary: var thirdHighestSalary = employees     .OrderByDescending(e => e.Salary)     .Select(e => e.Salary)     .Distinct()     .Skip(2)     .FirstOrDefault(); 3. 2nd Lowest Salary: var secondLowestSalary = employees     .OrderBy(e => e.Salary)     .Select(e => e.Salary)     .Distinct()     .Skip(1)     .FirstOrDefault(); 4. 3rd Lowest Salary: var thirdLowestSalary = employees     .OrderBy(e => e.Salary)     .Select(e => e.Salary)     .Distinct()     .Skip(2)     .FirstOrDefault();
Read more

Sonar qube for code scan

🚀 Ensure Code Quality with SonarQube! 🚀 As developers, maintaining high-quality code is crucial to delivering robust and maintainable software. 💻✨ One powerful tool I use to ensure code quality and eliminate code smells is SonarQube. SonarQube is an open-source platform that performs static code analysis to detect: 🔸 Code Smells 🔸 Bugs 🔸 Security Vulnerabilities 🔸 Technical Debt Here's how you can integrate SonarQube into your .NET projects: 1. Install SonarQube locally or use it on the cloud. 2. Analyze your codebase by integrating SonarQube with your CI/CD pipeline (Azure DevOps, GitHub Actions, Jenkins, etc.). 3. Get insights into code smells, security issues, and improvements with detailed reports. Using SonarQube has helped me catch early bugs and write cleaner code, which ultimately results in more efficient and maintainable applications. 🛠️ Takeaway: Embrace tools like SonarQube for better code quality and seamless delivery! #DotNetTechPro #SonarQube #CodeQuality #Cl...
Read more

Generate 100 records using linq c#

using System; using System.Collections.Generic; using System.Linq; class Program {     static void Main()     {         // Generate a 100 records using linq c#         List<Employee> employees = Enumerable.Range(1, 100).Select(i => new Employee         {             Id = i,             Name = "Employee " + i,             Age = new Random().Next(22, 60),             Department = i % 2 == 0 ? "IT" : "HR",             Salary = new Random().Next(30000, 100000)         }).ToList();         // Query 1: Get employees from IT department with salary > 50,000         var highSalaryITEmployees = employees             .Where(e => e.Department == "IT" && e.Salary...
Read more