Angular Interview Questions

Angular is a TypeScript-based open-source web application framework developed and maintained by Google. It is used to build single-page applications (SPAs) — dynamic web apps that load a single HTML page and update it as the user interacts.

• Component-based architecture
• Two-way data binding
• Dependency Injection
• Directives and Pipes
• Routing and Lazy Loading
• RxJS for reactive programming
• Ahead-of-Time (AOT) Compilation

A decorator is a function that adds metadata to classes or properties.

• @Component – Declares a component
• @NgModule – Declares a module
• @Injectable – Declares a service

@Input() – Passes data from parent to child

@Output() – Emits data from child to parent using EventEmitter

Hooks that allow you to act during different stages of a component:

• ngOnInit() – Called after component initialized
• ngOnChanges() – Called on input property changes
• ngOnDestroy() – Cleanup before component destroyed
• ngAfterViewInit() – After component’s view initialized

Angular uses an injector tree to provide services to components. Services are registered in providers (usually at the module level), and Angular automatically injects them using constructors.

constructor(private userService: UserService) {}

Angular uses RouterModule to map URL paths to components. Define routes in app-routing.module.ts.

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

Guards control access to routes:

CanActivate – Before navigating to a route

CanDeactivate – Before leaving a route

Resolve – Preload data before route loads

Lazy loading loads feature modules only when needed. Improves app performance.

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

Angular checks and updates the DOM when data changes using its change detection mechanism, usually triggered by events, observables, or zone.js.

• ngOnChanges() – Triggered on @Input() changes
• ngDoCheck() – Custom change detection logic, runs more frequently

Used to optimize rendering in large lists.

{{ item.name }}

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

Pipes transform data in the template.

{{ birthday | date:'shortDate' }}

• Pure Pipe – Executes only on input change
• Impure Pipe – Executes on every change detection cycle

• Subject – Emits values to subscribers after subscription
• BehaviorSubject – Stores last emitted value and emits it immediately on subscription

Using HttpClient and RxJS:

this.http.get(url).pipe(   
   catchError(error => {    
        console.error('Error occurred:', error);     
        return throwError(() => error);   
        }) 
); 

• Lazy loading
• OnPush change detection
• trackBy in *ngFor
• Code splitting & AOT compilation
• Avoiding memory leaks with unsubscribing