Angular Interview Questions

Angular

1. What is Angular?

English:
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It provides a set of tools to create rich and dynamic web applications.

Chinese:
Angular 是一个平台和框架，用于使用 HTML 和 TypeScript 构建单页客户端应用程序。它提供了一组工具来创建丰富且动态的 Web 应用程序。

Code Example: 

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello, Angular!</h1>`,
})
export class AppComponent {
  title = 'AngularApp';
}

2. What are the main components of Angular?

English:
Angular consists of several key components: Modules, Components, Templates, Metadata, Services, and Dependency Injection.

Chinese:
Angular 由几个主要组件组成：模块（Modules）、组件（Components）、模板（Templates）、元数据（Metadata）、服务（Services）和依赖注入（Dependency Injection）。

Code Example: 

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

3. What is TypeScript and why is it used in Angular?

English:
TypeScript is a superset of JavaScript that adds static typing and other features. It is used in Angular because it helps catch errors during development and makes the code more maintainable.

Chinese:
TypeScript 是 JavaScript 的超集，增加了静态类型和其他功能。它在 Angular 中被使用，因为它可以在开发过程中捕获错误，并使代码更具可维护性。

Code Example: 

let age: number = 30;  // TypeScript type declaration
console.log(`Age is ${age}`);

4. Explain Angular CLI and its benefits.

English:
Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold, and maintain Angular applications. It simplifies tasks like setting up new projects, generating components, and running tests.

Chinese:
Angular CLI（命令行界面）是一个用于初始化、开发、搭建和维护 Angular 应用程序的工具。它简化了设置新项目、生成组件和运行测试等任务。

Code Example: 

# Create a new Angular project
ng new my-angular-app

# Generate a component
ng generate component my-component

5. What are Angular directives?

English:
Directives are special tokens in the markup that tell the Angular compiler to do something. There are three types: component, structural, and attribute directives.

Chinese:
指令是标记中的特殊标记，告诉 Angular 编译器执行某些操作。指令分为三类：组件指令、结构指令和属性指令。

Code Example: 

<!-- ngIf directive -->
<p *ngIf="isLoggedIn">Welcome, User!</p>

<!-- ngFor directive -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

6. What is data binding in Angular?

English:
Data binding is the process that allows the interaction between the component and the DOM. Angular supports one-way and two-way data binding.

Chinese:
数据绑定是允许组件和 DOM 之间交互的过程。Angular 支持单向和双向数据绑定。

Code Example: 

<!-- One-way data binding -->
<p>{{ title }}</p>

<!-- Two-way data binding -->
<input [(ngModel)]="username" />
export class AppComponent {
  title = 'AngularApp';
  username = '';
}

7. What are services in Angular?

English:
Services in Angular are classes that handle business logic, data processing, or any operation that needs to be shared across components. Services are typically injected into components using dependency injection.

Chinese:
Angular 中的服务是用于处理业务逻辑、数据处理或任何需要在组件之间共享的操作的类。服务通常通过依赖注入被注入到组件中。

Code Example: 

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return 'Hello from Service!';
  }
}

@Component({
  selector: 'app-root',
  template: `<p>{{ data }}</p>`,
})
export class AppComponent {
  data: string;
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

8. What is Dependency Injection in Angular?

English:
Dependency Injection (DI) is a design pattern in which a class receives its dependencies from external sources rather than creating them. Angular uses DI to manage services and other dependencies efficiently.

Chinese:
依赖注入（DI）是一种设计模式，类从外部源接收其依赖项，而不是自己创建它们。Angular 使用 DI 来高效管理服务和其他依赖项。

Code Example: 

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  isAuthenticated(): boolean {
    return true;
  }
}

@Component({
  selector: 'app-auth',
  template: `<p *ngIf="isLoggedIn">Logged In!</p>`,
})
export class AuthComponent {
  isLoggedIn: boolean;
  constructor(private authService: AuthService) {
    this.isLoggedIn = this.authService.isAuthenticated();
  }
}

9. What is the purpose of NgModule in Angular?

English:
NgModule is a decorator that defines an Angular module. It is used to group components, directives, services, and other elements that work together in an application.

Chinese:
NgModule 是用于定义 Angular 模块的装饰器。它用于将组件、指令、服务和其他在应用程序中协同工作的元素分组。

Code Example: 

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

10. What is a component in Angular?

English:
A component is the basic building block of Angular applications. It controls a part of the user interface and interacts with the data using a template.

Chinese:
组件是 Angular 应用程序的基本构建块。它控制用户界面的一个部分，并使用模板与数据交互。

Code Example: 

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, {{ name }}!</h1>`,
})
export class HelloComponent {
  name = 'Angular';
}

Here are the next 10 Angular interview questions with code examples in both English and Chinese:

11. Explain the lifecycle hooks in Angular.

English:
Angular provides several lifecycle hooks that allow you to tap into different stages of a component’s existence, such as ngOnInit(), ngOnChanges(), and ngOnDestroy().

Chinese:
Angular 提供了几个生命周期钩子，允许你进入组件存在的不同阶段，例如 ngOnInit()、ngOnChanges() 和 ngOnDestroy()。

Code Example:

@Component({
  selector: 'app-lifecycle',
  template: `<p>Lifecycle Component</p>`,
})
export class LifecycleComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component initialized');
  }

  ngOnDestroy() {
    console.log('Component destroyed');
  }
}

12. What is the difference between ngOnInit and constructor in Angular?

English:
constructor is used for basic initialization and dependency injection. ngOnInit is a lifecycle hook used for more complex initialization, which is invoked after Angular sets the component’s inputs.

Chinese:
constructor 用于基本初始化和依赖注入。ngOnInit 是一个生命周期钩子，用于更复杂的初始化，它在 Angular 设置完组件的输入之后被调用。

Code Example:

export class ExampleComponent implements OnInit {
  constructor() {
    console.log('Constructor called');
  }

  ngOnInit() {
    console.log('ngOnInit called');
  }
}

13. What is a structural directive in Angular?

English:
Structural directives alter the structure of the DOM. Examples include *ngIf, *ngFor, and *ngSwitch.

Chinese:
结构指令改变 DOM 的结构。示例包括 *ngIf、*ngFor 和 *ngSwitch。

Code Example:

<!-- ngIf Example -->
<p *ngIf="isVisible">This is visible</p>

<!-- ngFor Example -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

14. What is a service worker in Angular?

English:
A service worker is a script that runs in the background of a web application and enables features like offline capabilities, push notifications, and background synchronization.

Chinese:
服务工作者是一个在 Web 应用程序的后台运行的脚本，能够实现离线功能、推送通知和后台同步等功能。

Code Example:

// In Angular, service workers are configured using the ng add command
ng add @angular/pwa --project *project-name*

// Once configured, the service worker runs in the background

15. What is the difference between @Input and @Output in Angular?

English:
@Input is used to pass data from a parent to a child component, whereas @Output is used to emit events from a child component to a parent.

Chinese:
@Input 用于从父组件向子组件传递数据，而 @Output 用于从子组件向父组件发出事件。

Code Example:

// Parent Component
@Component({
  selector: 'app-parent',
  template: `<app-child [message]="parentMessage" (notify)="onNotify()"></app-child>`,
})
export class ParentComponent {
  parentMessage = 'Hello from Parent!';
  onNotify() {
    console.log('Notification received from child');
  }
}

// Child Component
@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p><button (click)="notifyParent()">Notify Parent</button>`,
})
export class ChildComponent {
  @Input() message: string;
  @Output() notify = new EventEmitter();
  notifyParent() {
    this.notify.emit();
  }
}

16. What are pipes in Angular?

English:
Pipes are used to transform data in Angular templates. Common pipes include date, uppercase, currency, and json.

Chinese:
管道用于在 Angular 模板中转换数据。常见的管道有 date、uppercase、currency 和 json。

Code Example:

<p>{{ birthday | date: 'fullDate' }}</p>
<p>{{ name | uppercase }}</p>
<p>{{ amount | currency: 'USD' }}</p>

17. How does Angular handle routing?

English:
Angular uses a built-in routing module to navigate between different views or pages. It defines paths, components, and other parameters in the route configuration.

Chinese:
Angular 使用内置的路由模块在不同的视图或页面之间导航。它在路由配置中定义路径、组件和其他参数。

Code Example:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

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

18. What is lazy loading in Angular?

English:
Lazy loading is the process of loading modules only when they are required, improving the performance of the application.

Chinese:
懒加载是仅在需要时加载模块的过程，从而提高应用程序的性能。

Code Example:

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

19. What is the role of ngZone in Angular?

English:
ngZone is used to manage Angular’s change detection mechanism, allowing Angular to know when to update the view.

Chinese:
ngZone 用于管理 Angular 的变更检测机制，允许 Angular 知道何时更新视图。

Code Example:

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

@Component({
  selector: 'app-zone',
  template: `<p>{{ counter }}</p>`,
})
export class ZoneComponent {
  counter = 0;

  constructor(private ngZone: NgZone) {
    this.increaseCounter();
  }

  increaseCounter() {
    this.ngZone.runOutsideAngular(() => {
      setInterval(() => {
        this.counter++;
        if (this.counter % 10 === 0) {
          this.ngZone.run(() => console.log('Counter:', this.counter));
        }
      }, 1000);
    });
  }
}

20. What is Angular Universal?

English:
Angular Universal is a server-side rendering solution for Angular applications. It allows you to render Angular applications on the server before serving them to the client.

Chinese:
Angular Universal 是一种用于 Angular 应用程序的服务端渲染解决方案。它允许你在将 Angular 应用程序提供给客户端之前在服务器上渲染它们。

Code Example:

# Generate a universal project using Angular CLI
ng add @nguniversal/express-engine

# Serve the universal project
npm run build:ssr && npm run serve:ssr

Here are the remaining 30 Angular interview questions with code examples in both English and Chinese:

21. What is Angular Ivy?

English:
Angular Ivy is the new rendering engine that Angular introduced in version 9. It improves performance, reduces bundle sizes, and makes incremental builds faster.

Chinese:
Angular Ivy 是 Angular 在版本 9 中引入的新渲染引擎。它提高了性能，减少了包的大小，并使增量构建更快。

Code Example: 

# Ivy is enabled by default in Angular 9 and above.
ng version  # Check Angular version

22. What is ng-content in Angular?

English:
ng-content is a placeholder that allows content projection in Angular components. It enables components to receive dynamic content from parent components.

Chinese:
ng-content 是一个占位符，允许在 Angular 组件中进行内容投影。它使组件能够从父组件接收动态内容。

Code Example: 

@Component({
  selector: 'app-wrapper',
  template: `<div><ng-content></ng-content></div>`,
})
export class WrapperComponent {}

23. What is RxJS in Angular?

English:
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables, which allow handling asynchronous data streams. It is widely used in Angular for managing HTTP requests and event streams.

Chinese:
RxJS（JavaScript 的响应式扩展）是一个用于响应式编程的库，使用可观察对象来处理异步数据流。它在 Angular 中广泛用于管理 HTTP 请求和事件流。

Code Example: 

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.complete();
});

observable.subscribe(value => console.log(value));

24. How does Angular handle forms?

English:
Angular provides two ways to handle forms: template-driven and reactive forms. Template-driven forms rely on directives in the template, while reactive forms use a more programmatic approach.

Chinese:
Angular 提供了两种处理表单的方法：模板驱动表单和响应式表单。模板驱动表单依赖于模板中的指令，而响应式表单则使用更编程化的方法。

Code Example (Reactive Forms): 

import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form">
      <input formControlName="name" />
    </form>
  `,
})
export class FormComponent {
  form = new FormGroup({
    name: new FormControl(''),
  });
}

25. What is the Angular Change Detection strategy?

English:
Angular’s change detection strategy determines how the framework checks for changes in component data and updates the view. The default strategy is Default, but Angular also supports OnPush for performance optimization.

Chinese:
Angular 的变更检测策略决定了框架如何检查组件数据的变化并更新视图。默认策略是 Default，但 Angular 也支持 OnPush 来优化性能。

Code Example: 

@Component({
  selector: 'app-demo',
  template: `<p>{{ value }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DemoComponent {
  value = 'Angular';
}

26. What is the async pipe in Angular?

English:
The async pipe subscribes to an observable or a promise and returns the latest value. It also automatically handles unsubscription when the component is destroyed.

Chinese:
async 管道订阅一个可观察对象或一个 promise，并返回最新的值。当组件销毁时，它也会自动取消订阅。

Code Example: 

<p>{{ data$ | async }}</p>
export class AsyncPipeComponent {
  data$ = this.http.get('/api/data');
}

27. How do you implement routing guards in Angular?

English:
Routing guards prevent access to certain routes unless certain conditions are met. Guards like CanActivate are used to control navigation.

Chinese:
路由守卫用于防止访问某些路由，除非满足特定条件。像 CanActivate 这样的守卫用于控制导航。

Code Example: 

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    return true;  // Or add your authentication logic here
  }
}

28. What is ViewEncapsulation in Angular?

English:
ViewEncapsulation defines how styles applied to components are scoped. Angular supports three types of encapsulation: Emulated, None, and ShadowDom.

Chinese:
ViewEncapsulation 定义了应用于组件的样式的作用范围。Angular 支持三种封装类型：Emulated、None 和 ShadowDom。

Code Example: 

@Component({
  selector: 'app-view',
  template: `<p>Encapsulation Demo</p>`,
  styles: ['p { color: red; }'],
  encapsulation: ViewEncapsulation.Emulated,  // Default
})
export class ViewComponent {}

29. How do you optimize Angular applications for performance?

English:
You can optimize Angular applications by lazy loading modules, using OnPush change detection strategy, reducing bundle sizes, and using tree-shaking.

Chinese:
可以通过懒加载模块、使用 OnPush 变更检测策略、减少包大小以及使用 tree-shaking 来优化 Angular 应用程序。

Code Example (Lazy Loading): 

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

30. What is the Angular Renderer2?

English:
Renderer2 is a service in Angular used to manipulate elements, attributes, and events within the DOM while maintaining compatibility across different platforms.

Chinese:
Renderer2 是 Angular 中的一个服务，用于在保持不同平台兼容性的同时操作 DOM 中的元素、属性和事件。

Code Example: 

constructor(private renderer: Renderer2, private el: ElementRef) {
  this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');
}

31. What is the difference between Angular expressions and JavaScript expressions?

English:
Angular expressions are evaluated by Angular’s framework, while JavaScript expressions are evaluated by the browser. Angular expressions do not allow conditionals or loops.

Chinese:
Angular 表达式由 Angular 框架计算，而 JavaScript 表达式由浏览器计算。Angular 表达式不允许条件或循环。

Code Example (Angular Expression): 

<p>{{ 5 + 5 }}</p>

32. How does Angular handle HTTP requests?

English:
Angular uses the HttpClient module to handle HTTP requests, which supports methods like get(), post(), put(), and delete().

Chinese:
Angular 使用 HttpClient 模块来处理 HTTP 请求，支持的方法包括 get()、post()、put() 和 delete()。

Code Example: 

constructor(private http: HttpClient) {}

getData() {
  return this.http.get('/api/data');
}

33. How do you handle errors in Angular HTTP requests?

English:
You can handle errors using RxJS’s catchError operator. This allows you to catch and handle errors in HTTP requests.

Chinese:
你可以使用 RxJS 的 catchError 操作符来处理错误。这允许你在 HTTP 请求中捕获和处理错误。

Code Example: 

getData() {
  return this.http.get('/api/data').pipe(
    catchError(err => {
      console.error('Error occurred:', err);
      return of([]);  // Return an empty array in case of error
    })
  );
}

34. What is Ahead-of-Time (AOT) compilation in Angular?

English:
AOT compilation compiles the Angular templates and components during the build process, resulting in faster rendering in the browser.

Chinese:
AOT 编译在构建过程中编译 Angular 模板和组件，从而使浏览器中的渲染速度更快。

Code Example: 

# Enable AOT Compilation
ng build --aot

35. What is trackBy in Angular?

English:
trackBy is used with ngFor to improve performance by tracking items in a list using a unique identifier, preventing re-rendering of unchanged items.

Chinese:
trackBy 与 ngFor 一起使用，通过使用唯一标识符来跟踪列表中的项目，从而防止重新渲染未更改的项目，以提高性能。

Code Example: 

<li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
trackById(index: number, item: any): number {
  return item.id;
}

36. How does Angular implement two-way data binding?

**

English:**
Angular uses [(ngModel)] for two-way data binding, which binds the data from the component to the view and from the view to the component.

Chinese:
Angular 使用 [(ngModel)] 进行双向数据绑定，它将组件的数据绑定到视图，同时也将视图的数据绑定到组件。

Code Example: 

<input [(ngModel)]="name" />
<p>{{ name }}</p>

37. What are content projection and view projection in Angular?

English:
Content projection allows a component to insert external content into its template using ng-content. View projection is how the view is dynamically rendered based on the model.

Chinese:
内容投影允许组件使用 ng-content 将外部内容插入到其模板中。视图投影是根据模型动态渲染视图的方式。

Code Example: 

@Component({
  selector: 'app-content-projection',
  template: `<ng-content></ng-content>`,
})
export class ContentProjectionComponent {}

38. What is Angular animation?

English:
Angular provides an animation system that allows you to define animations within your components. You can use Angular’s @angular/animations package for creating animations.

Chinese:
Angular 提供了一个动画系统，允许你在组件中定义动画。你可以使用 Angular 的 @angular/animations 包来创建动画。

Code Example: 

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

@Component({
  selector: 'app-animate',
  template: `<div [@fadeInOut]="'in'">Content</div>`,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [style({ opacity: 0 }), animate('600ms', style({ opacity: 1 }))]),
      transition(':leave', [animate('600ms', style({ opacity: 0 }))]),
    ]),
  ],
})
export class AnimateComponent {}

39. How do you create a singleton service in Angular?

English:
A singleton service is created by providing the service at the root level using providedIn: 'root'. This ensures that the same instance is shared across the application.

Chinese:
通过在根级别使用 providedIn: 'root' 提供服务，可以创建单例服务。这确保了整个应用程序共享同一个实例。

Code Example: 

@Injectable({
  providedIn: 'root',
})
export class SingletonService {}

40. How does Angular handle DOM sanitization?

English:
Angular automatically sanitizes untrusted values like HTML, style, or URLs to prevent cross-site scripting (XSS) attacks. It uses a service called DomSanitizer.

Chinese:
Angular 自动清理不受信任的值（如 HTML、样式或 URL），以防止跨站脚本（XSS）攻击。它使用一个名为 DomSanitizer 的服务。

Code Example: 

constructor(private sanitizer: DomSanitizer) {}

getSafeHtml(html: string) {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

41. What is the difference between ngOnChanges and ngDoCheck?

English:
ngOnChanges is called when an input property changes, while ngDoCheck allows you to run custom change detection logic for the component.

Chinese:
ngOnChanges 在输入属性发生变化时调用，而 ngDoCheck 允许你为组件运行自定义的变更检测逻辑。

Code Example: 

ngOnChanges(changes: SimpleChanges) {
  console.log('Changes detected:', changes);
}

ngDoCheck() {
  console.log('Custom change detection');
}

42. How does Angular handle CSS isolation?

English:
Angular handles CSS isolation using the ViewEncapsulation setting. By default, Angular applies scoped styles to components, which means that styles are isolated to the component.

Chinese:
Angular 使用 ViewEncapsulation 设置处理 CSS 隔离。默认情况下，Angular 将样式作用于组件，这意味着样式被隔离在组件内。

Code Example: 

@Component({
  selector: 'app-styles',
  template: `<p>Styled Component</p>`,
  styles: ['p { color: red; }'],
  encapsulation: ViewEncapsulation.Emulated,
})
export class StylesComponent {}

43. What are Angular structural directives?

English:
Structural directives modify the structure of the DOM. Examples include *ngIf, *ngFor, and *ngSwitch.

Chinese:
结构指令修改 DOM 的结构。示例包括 *ngIf、*ngFor 和 *ngSwitch。

Code Example: 

<p *ngIf="isVisible">Visible Content</p>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

44. What is Angular service provider?

English:
A service provider in Angular is responsible for creating instances of services. Providers can be registered at the component, module, or application level.

Chinese:
Angular 中的服务提供者负责创建服务实例。提供者可以在组件、模块或应用程序级别注册。

Code Example: 

@NgModule({
  providers: [MyService],
})
export class AppModule {}

45. What are Angular resolvers?

English:
Resolvers are used to retrieve data before the route is activated. It ensures that necessary data is available before rendering the component.

Chinese:
解析器用于在路由激活之前检索数据。它确保在渲染组件之前数据可用。

Code Example: 

@Injectable({
  providedIn: 'root',
})
export class DataResolver implements Resolve<any> {
  resolve(): Observable<any> {
    return this.http.get('/api/data');
  }
}

46. What is interpolation in Angular?

English:
Interpolation in Angular is a form of one-way data binding that embeds expressions in the template using double curly braces {{ }}.

Chinese:
Angular 中的插值是一种单向数据绑定形式，使用双大括号 {{ }} 在模板中嵌入表达式。

Code Example: 

<p>{{ title }}</p>

47. How do you preload modules in Angular?

English:
Angular supports preloading modules in the background using PreloadAllModules strategy to improve the performance of lazy-loaded modules.

Chinese:
Angular 支持使用 PreloadAllModules 策略在后台预加载模块，以提高延迟加载模块的性能。

Code Example: 

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

48. What are Angular schematics?

English:
Angular schematics are templates used by Angular CLI to generate code. They automate tasks such as generating components, services, and modules.

Chinese:
Angular 架构是由 Angular CLI 使用的模板，用于生成代码。它们自动化了生成组件、服务和模块等任务。

Code Example: 

ng generate component my-component

49. How do you debug Angular applications?

English:
Angular applications can be debugged using browser developer tools, Augury (an Angular-specific Chrome extension), and by enabling source maps in the Angular CLI.

Chinese:
可以使用浏览器开发工具、Augury（一个 Angular 特定的 Chrome 扩展）以及在 Angular CLI 中启用源映射来调试 Angular 应用程序。

Code Example: 

ng serve --source-map  # Enable source maps for debugging

50. What are QueryList and ViewChild in Angular?

English:
QueryList is a list of elements queried using @ViewChild or @ContentChild decorators. @ViewChild queries DOM elements inside the component template.

Chinese:
QueryList 是使用 @ViewChild 或 @ContentChild 装饰器查询的元素列表。@ViewChild 查询组件模板内的 DOM 元素。

Code Example: 

@ViewChild('inputElement') input: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

Here are 20 intermediate to advanced-level Angular interview questions:

Intermediate-Level Questions:

1. What is the difference between ViewChild and ContentChild?

English:
ViewChild is used to query and reference DOM elements or Angular components in the component’s view, while ContentChild is used to query projected content from the parent.

Chinese:
ViewChild 用于查询和引用组件视图中的 DOM 元素或 Angular 组件，而 ContentChild 用于查询从父组件投影的内容。

2. How do you implement custom pipes in Angular?

English:
Custom pipes are created by using the @Pipe decorator. They can transform data in Angular templates based on custom logic.

Chinese:
自定义管道是通过使用 @Pipe 装饰器创建的。它们可以根据自定义逻辑转换 Angular 模板中的数据。

3. What are the main differences between Reactive Forms and Template-driven Forms?

English:
Reactive Forms provide more control and are defined programmatically, while Template-driven Forms rely on directives and are easier to use but offer less control over form states.

Chinese:
响应式表单提供更多的控制权，且以编程方式定义，而模板驱动表单依赖于指令，更易于使用，但对表单状态的控制较少。

4. How does Angular handle server-side rendering (SSR)?

English:
Angular Universal allows server-side rendering (SSR), which renders the application on the server and sends the fully rendered page to the client, improving SEO and performance.

Chinese:
Angular Universal 允许服务器端渲染 (SSR)，它在服务器上渲染应用程序并将完全渲染的页面发送给客户端，提升了 SEO 和性能。

5. How do you handle dynamic components in Angular?

English:
Dynamic components are loaded at runtime using ComponentFactoryResolver and ViewContainerRef. This approach allows components to be created dynamically in the application.

Chinese:
动态组件通过使用 ComponentFactoryResolver 和 ViewContainerRef 在运行时加载。这种方法允许在应用程序中动态创建组件。

6. Explain the role of HttpInterceptor in Angular.

English:
HttpInterceptor allows you to intercept and modify HTTP requests or responses before they reach the server or the client. It is commonly used for adding authentication tokens or logging.

Chinese:
HttpInterceptor 允许你在 HTTP 请求或响应到达服务器或客户端之前拦截并修改它们。通常用于添加身份验证令牌或记录日志。

7. What is the purpose of ng-template in Angular?

English:
ng-template is a directive that defines an Angular template without rendering it. It is used with structural directives like *ngIf, *ngFor, or for creating dynamic content.

Chinese:
ng-template 是一个定义 Angular 模板但不渲染的指令。它与结构指令如 *ngIf、*ngFor 一起使用，或用于创建动态内容。

8. How do you create reusable components in Angular?

English:
Reusable components are created by defining components with inputs (@Input) and outputs (@Output), allowing them to be reused with different configurations.

Chinese:
通过定义带有输入 (@Input) 和输出 (@Output) 的组件，可以创建可复用的组件，从而允许它们以不同配置重复使用。

9. How does Angular handle lazy-loaded routes?

English:
Lazy-loaded routes in Angular are implemented using the loadChildren property in the route configuration, which loads modules only when needed.

Chinese:
在 Angular 中，使用路由配置中的 loadChildren 属性来实现懒加载路由，仅在需要时加载模块。

10. How do you manage large Angular applications with multiple modules?

English:
Large Angular applications are managed by breaking them into multiple feature modules, using shared modules for common functionality, and lazy loading modules to improve performance.

Chinese:
大型 Angular 应用程序通过将它们分解为多个功能模块进行管理，使用共享模块提供公共功能，并懒加载模块以提高性能。

Advanced-Level Questions:

11. How do you optimize Angular applications for SEO?

English:
You can optimize Angular applications for SEO using server-side rendering (SSR) with Angular Universal, implementing meta tags, and ensuring that the application is crawlable by search engines.

Chinese:
可以通过使用 Angular Universal 实现服务器端渲染 (SSR)、实现元标签以及确保应用程序可被搜索引擎抓取来优化 Angular 应用程序的 SEO。

12. Explain how to use NgRx for state management in Angular.

English:
NgRx is a state management library for Angular based on the Redux pattern. It provides a predictable state container, allowing for better handling of complex state changes.

Chinese:
NgRx 是一个基于 Redux 模式的 Angular 状态管理库。它提供了一个可预测的状态容器，从而更好地处理复杂的状态变化。

13. What is the difference between Renderer and Renderer2 in Angular?

English:
Renderer2 is the recommended API to manipulate DOM elements in Angular. It offers better support for cross-platform rendering compared to the deprecated Renderer.

Chinese:
Renderer2 是 Angular 中推荐的操作 DOM 元素的 API。与已弃用的 Renderer 相比，它提供了更好的跨平台渲染支持。

14. How do you handle memory leaks in Angular?

English:
Memory leaks in Angular can be handled by unsubscribing from observables in ngOnDestroy, removing event listeners, and using the takeUntil operator to complete subscriptions.

Chinese:
可以通过在 ngOnDestroy 中取消订阅 observables、移除事件监听器，以及使用 takeUntil 操作符完成订阅来处理 Angular 中的内存泄漏。

15. How does Angular handle animations?

English:
Angular’s animation system is based on the @angular/animations module, where animations are defined using trigger, state, transition, and animate functions.

Chinese:
Angular 的动画系统基于 @angular/animations 模块，动画通过 trigger、state、transition 和 animate 函数来定义。

16. What are Feature Modules in Angular and why are they important?

English:
Feature modules are used to encapsulate related components, services, and other elements into a module. They are essential for organizing and managing large-scale applications.

Chinese:
功能模块用于将相关组件、服务和其他元素封装到一个模块中。它们对于组织和管理大规模应用程序至关重要。

17. How does Angular handle event delegation?

English:
Angular handles event delegation using its zone.js mechanism, which allows it to listen to events globally and run change detection when necessary.

Chinese:
Angular 使用其 zone.js 机制处理事件委托，允许全局监听事件并在必要时运行变更检测。

18. How does Angular implement internationalization (i18n)?

English:
Angular provides built-in support for internationalization through the @angular/localize package, allowing you to localize content using different translation files.

Chinese:
Angular 通过 @angular/localize 包提供内置的国际化支持，允许你使用不同的翻译文件本地化内容。

19. What is a singleton service in Angular, and how do you create it?

English:
A singleton service in Angular is a service that is created once and shared across the application. You can create a singleton by providing it in the root using providedIn: 'root'.

Chinese:
Angular 中的单例服务是一个在应用程序中创建一次并共享的服务。你可以通过在 root 中使用 providedIn: 'root' 来创建单例服务。

20. How do you handle route transitions in Angular animations?

English:
Route transitions in Angular animations are handled by defining animations in the RouterOutlet and using the routerAnimations trigger to animate the transition between views.

Chinese:
在 Angular 动画中，路由过渡通过在 RouterOutlet 中定义动画并使用 routerAnimations 触发器来处理视图之间的过渡。

Here are the next 20 intermediate and advanced-level Angular interview questions with code examples in both English and Chinese:

1. What is the difference between ViewChild and ContentChild?

English:
ViewChild queries the DOM elements inside the component’s view, while ContentChild queries the content projected from the parent component.

Chinese:
ViewChild 查询组件视图中的 DOM 元素，而 ContentChild 查询从父组件投影的内容。

Code Example: 

@Component({
  selector: 'app-parent',
  template: `
    <app-child>
      <p #content>Content from parent</p>
    </app-child>
  `,
})
export class ParentComponent {}

@Component({
  selector: 'app-child',
  template: `<ng-content></ng-content>`,
})
export class ChildComponent {
  @ContentChild('content') content: ElementRef;

  ngAfterContentInit() {
    console.log(this.content.nativeElement.textContent);  // "Content from parent"
  }
}

2. How do you implement custom pipes in Angular?

English:
Custom pipes are created using the @Pipe decorator and can transform data in Angular templates.

Chinese:
自定义管道通过使用 @Pipe 装饰器创建，可以在 Angular 模板中转换数据。

Code Example: 

@Pipe({ name: 'capitalize' })
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

// Usage in template
<p>{{ 'hello' | capitalize }}</p>  <!-- Output: Hello -->

3. What are the main differences between Reactive Forms and Template-driven Forms?

English:
Reactive forms are more flexible and provide fine-grained control over form validation, while template-driven forms are simpler and rely on directives within the template.

Chinese:
响应式表单更加灵活，提供了对表单验证的精细控制，而模板驱动表单更简单，依赖于模板中的指令。

Code Example (Reactive Form): 

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

<form [formGroup]="form">
  <input formControlName="name" />
</form>

4. How does Angular handle server-side rendering (SSR)?

English:
Angular Universal handles server-side rendering, improving performance and SEO by pre-rendering Angular applications on the server before sending them to the client.

Chinese:
Angular Universal 处理服务器端渲染 (SSR)，通过在服务器上预渲染 Angular 应用程序来提高性能和 SEO。

Code Example (Setup): 

ng add @nguniversal/express-engine
npm run build:ssr && npm run serve:ssr

5. How do you handle dynamic components in Angular?

English:
Dynamic components are loaded at runtime using ComponentFactoryResolver and ViewContainerRef.

Chinese:
动态组件通过使用 ComponentFactoryResolver 和 ViewContainerRef 在运行时加载。

Code Example: 

@Component({
  selector: 'app-dynamic',
  template: `<ng-container #dynamicContainer></ng-container>`,
})
export class DynamicComponent {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadComponent(component: any) {
    const factory = this.resolver.resolveComponentFactory(component);
    this.container.clear();
    this.container.createComponent(factory);
  }
}

6. Explain the role of HttpInterceptor in Angular.

English:
HttpInterceptor is used to intercept HTTP requests and responses, enabling you to modify them (e.g., add headers, log requests, handle errors).

Chinese:
HttpInterceptor 用于拦截 HTTP 请求和响应，允许你修改它们（例如添加头信息、记录请求、处理错误）。

Code Example: 

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer token') });
    return next.handle(authReq).pipe(
      catchError((error) => {
        console.error('Error occurred:', error);
        return throwError(error);
      })
    );
  }
}

7. What is the purpose of ng-template in Angular?

English:
ng-template is a directive used to define a template that will not be rendered immediately. It is often used with structural directives like *ngIf, *ngFor, and dynamic content projection.

Chinese:
ng-template 是用于定义不会立即渲染的模板的指令。通常与结构指令（如 *ngIf、*ngFor）以及动态内容投影一起使用。

Code Example: 

<ng-template #loading>
  <p>Loading...</p>
</ng-template>

<p *ngIf="data; else loading">Data loaded</p>

8. How do you create reusable components in Angular?

English:
Reusable components are created by defining @Input and @Output properties, allowing dynamic data to be passed from parent to child components and events to be emitted back.

Chinese:
可复用组件通过定义 @Input 和 @Output 属性创建，允许动态数据从父组件传递到子组件，并从子组件发出事件。

Code Example: 

@Component({
  selector: 'app-button',
  template: `<button (click)="onClick()">{{ label }}</button>`,
})
export class ButtonComponent {
  @Input() label: string;
  @Output() clicked = new EventEmitter<void>();

  onClick() {
    this.clicked.emit();
  }
}

9. How does Angular handle lazy-loaded routes?

English:
Lazy-loaded routes are implemented using the loadChildren property in the route configuration, where modules are only loaded when the user navigates to them.

Chinese:
懒加载路由通过在路由配置中使用 loadChildren 属性实现，模块仅在用户导航到时加载。

Code Example: 

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

10. How do you manage large Angular applications with multiple modules?

English:
Large applications are managed by splitting them into feature modules and using shared modules for common functionality. Lazy loading is also used to load modules on demand.

Chinese:
大型应用程序通过将其拆分为功能模块并使用共享模块提供公共功能来进行管理。懒加载也用于按需加载模块。

Code Example (Feature Module Setup): 

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
})
export class FeatureModule {}

11. How do you optimize Angular applications for SEO?

English:
You can optimize Angular apps for SEO by using Angular Universal for server-side rendering, implementing meta tags, and ensuring crawlers can access your content.

Chinese:
可以通过使用 Angular Universal 进行服务器端渲染、实现元标签以及确保爬虫可以访问内容来优化 Angular 应用程序的 SEO。

Code Example (Meta Service): 

constructor(private meta: Meta) {
  this.meta.addTag({ name: 'description', content: 'This is an SEO description' });
}

12. Explain how to use NgRx for state management in Angular.

English:
NgRx is based on the Redux pattern and provides a predictable state container for managing the application’s state using actions, reducers, and effects.

Chinese:
NgRx 基于 Redux 模式，提供了一个可预测的状态容器，通过使用 actions、reducers 和 effects 来管理应用程序的状态。

Code Example (Action, Reducer, Effect): 

// actions.ts
export const increment = createAction('[Counter] Increment');

// reducer.ts
export const counterReducer = createReducer(0, on(increment, state => state + 1));

// effect.ts
@Injectable()
export class CounterEffects {
  loadCount$ = createEffect(() =>
    this.actions$.pipe(
      ofType(increment),
      map(() => ({ type: '[Counter API] Count Loaded' }))
    )
  );

  constructor(private actions$: Actions) {}
}

13. What is the difference between Renderer and Renderer2 in Angular?

English:
Renderer2 is the updated version of Renderer, providing a more platform-independent way to interact with the DOM. It improves support for cross-platform rendering.

Chinese:
Renderer2 是 Renderer 的更新版本，提供了一种与 DOM 交互的更平台独立的方式，并改善了对跨平台渲染的支持。

Code Example: 

constructor(private renderer: Renderer2, private el: ElementRef) {
  this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');
}

14. How do you handle memory leaks in Angular?

English:
To prevent memory leaks, you must unsubscribe from observables,

remove event listeners, and use takeUntil to manage the lifecycle of subscriptions.

Chinese:
为防止内存泄漏，必须取消订阅 observables，移除事件监听器，并使用 takeUntil 来管理订阅的生命周期。

Code Example (takeUntil Operator): 

private destroy$ = new Subject<void>();

this.someService.getData().pipe(takeUntil(this.destroy$)).subscribe();

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

15. How does Angular handle animations?

English:
Angular’s animation system is built on the @angular/animations module, where you can define trigger, state, transition, and animate to create dynamic effects.

Chinese:
Angular 的动画系统构建在 @angular/animations 模块上，你可以定义 trigger、state、transition 和 animate 来创建动态效果。

Code Example: 

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

@Component({
  selector: 'app-animate',
  template: `<div [@fadeInOut]="'in'">Content</div>`,
  animations: [
    trigger('fadeInOut', [
      state('in', style({ opacity: 1 })),
      transition(':enter', [style({ opacity: 0 }), animate(300)]),
      transition(':leave', [animate(300, style({ opacity: 0 }))]),
    ]),
  ],
})
export class AnimateComponent {}

16. What are Feature Modules in Angular and why are they important?

English:
Feature modules allow for better organization of the codebase by grouping related components, services, and other elements. They promote maintainability and scalability in large applications.

Chinese:
功能模块通过将相关组件、服务和其他元素分组来更好地组织代码库。它们促进了大型应用程序的可维护性和可扩展性。

Code Example (Feature Module): 

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
})
export class FeatureModule {}

17. How does Angular handle event delegation?

English:
Angular uses zone.js to intercept events and track changes. This mechanism allows Angular to efficiently detect changes and update the view when necessary.

Chinese:
Angular 使用 zone.js 来拦截事件并跟踪更改。这种机制允许 Angular 高效地检测更改并在必要时更新视图。

18. How does Angular implement internationalization (i18n)?

English:
Angular provides built-in support for internationalization through @angular/localize, enabling developers to localize their applications by generating translation files.

Chinese:
Angular 通过 @angular/localize 提供内置的国际化支持，使开发人员可以通过生成翻译文件来本地化应用程序。

Code Example (Setup i18n): 

ng add @angular/localize

19. What is a singleton service in Angular, and how do you create it?

English:
A singleton service is created once and shared across the entire application. It can be created by providing the service in providedIn: 'root' in the @Injectable decorator.

Chinese:
单例服务在应用程序中创建一次并共享。可以通过在 @Injectable 装饰器中使用 providedIn: 'root' 来创建单例服务。

Code Example: 

@Injectable({ providedIn: 'root' })
export class SingletonService {
  log() {
    console.log('Singleton Service');
  }
}

20. How do you handle route transitions in Angular animations?

English:
Angular allows you to animate route transitions by defining animations in the RouterOutlet. You can use the @routeAnimations trigger to create transitions between views.

Chinese:
Angular 允许你通过在 RouterOutlet 中定义动画来处理路由过渡。可以使用 @routeAnimations 触发器来创建视图之间的过渡。

Code Example: 

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { animation: 'HomePage' } },
  { path: 'about', component: AboutComponent, data: { animation: 'AboutPage' } }
];

@Component({
  template: '<router-outlet @routeAnimations></router-outlet>',
  animations: [
    trigger('routeAnimations', [
      transition('HomePage <=> AboutPage', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 })),
      ]),
    ]),
  ],
})
export class AppComponent {}