Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Microsoft · Angular
Practice Angular questions specifically asked in Microsoft interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
19
Tagged for this company + subject
Company
Microsoft
View company-wise questions
Subject
Angular
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your Microsoft Angular round.
@Component marks a class as a component. @Directive defines a directive. @Pipe defines a pipe. @NgModule groups declarations and imports. @Input binds a property from parent to child. @Output emits events to the parent. @Injectable makes a class available to DI and can declare providedIn scope.
For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.
Child routes structure feature areas and nest views. A parent renders a shell with <router-outlet> and the children render inside it (e.g., /settings/profile and /settings/security).
{ path: 'settings', component: SettingsShellComponent, children: [
{ path: 'profile', component: ProfileComponent },
{ path: 'security', component: SecurityComponent }
]}Angular supports two types of compilation: JIT (Just-in-Time) and AOT (Ahead-of-Time). JIT compiles the app in the browser at runtime, useful during development. AOT compiles during build time before running, resulting in faster load time and smaller bundles, ideal for production.
map transforms values, filter drops values that don’t match a condition, tap is for side-effects like logging without changing the value, and finalize runs once when a stream completes or errors (e.g., to hide a loader).
this.loading = true;
this.api.getUsers().pipe(
map(users => users.filter(u => u.active)),
tap(active => console.log('Active:', active.length)),
finalize(() => this.loading = false)
).subscribe({ next: u => this.users = u, error: e => this.error = e });Two-way binding keeps the input and component field in sync. When the user types, the component updates. When the component changes the value, the input updates. Use `[(ngModel)]` from `FormsModule` for template-driven forms.
// app.component.html
<input [(ngModel)]="name" placeholder="Your name">
<p>Hello {{name}}</p>
// app.module.ts
imports: [BrowserModule, FormsModule]Create a private destroy$ subject, pipe takeUntil(this.destroy$) on long-lived streams, and next/complete it in ngOnDestroy. This prevents memory leaks and cancels active HTTP or interval streams.
private destroy$ = new Subject<void>();
ngOnInit(){
this.api.poll().pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy(){
this.destroy$.next();
this.destroy$.complete();
}Both are observables: valueChanges emits when control values change; statusChanges emits when validation status updates. Combine with operators (debounceTime, distinctUntilChanged) to implement live validation, search, or autosave.
A service holds reusable business logic or data access and is provided through Angular’s Dependency Injection (DI). Mark the class with @Injectable and provide it (preferably `providedIn: 'root'`). Consumers request it in a constructor or via `inject()` so Angular hands back a singleton instance for that injector scope.
@Injectable({ providedIn: 'root' })
export class DataService { constructor(private http: HttpClient) {} getUsers(){ return this.http.get('/api/users'); } }
@Component({...})
export class UsersComponent { constructor(private data: DataService) {} }@ViewChild gives you a reference to a child component, directive, or element in the same template. Use it for imperative access (focus an input, call a child method). It becomes available after view initialization (ngAfterViewInit). Avoid using it for data flow that can be expressed declaratively via Inputs/Outputs.
@ViewChild('inp') inp!: ElementRef<HTMLInputElement>;
ngAfterViewInit(){ this.inp.nativeElement.focus(); }Interceptors sit between your app and HttpClient. They can add auth headers, log traffic, retry requests, or centralize error handling. They’re registered as multi providers for HTTP_INTERCEPTORS.
export class TokenInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler){
const token = localStorage.getItem('token');
const auth = token ? req.clone({ setHeaders:{ Authorization:`Bearer ${token}` }}) : req;
return next.handle(auth);
}
}Typed Forms add strong typing to FormGroup, FormControl, and FormArray so `form.value` and controls are properly typed. This prevents runtime mistakes (misspelled keys, wrong types) and improves DX and refactoring safety.
type Profile = { name: string; age: number };
const form = new FormGroup<Profile>({ name: new FormControl<string>(''), age: new FormControl<number>(0) });A Resolver fetches data before a route activates so the component has what it needs on first paint (no empty flicker). If the resolver errors, you can redirect or show an error route.
@Injectable({ providedIn:'root' })
export class UserResolver implements Resolve<User> {
constructor(private api: Api) {}
resolve(route: ActivatedRouteSnapshot){
return this.api.getUser(route.paramMap.get('id')!);
}
}
{ path:'users/:id', component: UserDetailComponent, resolve:{ user: UserResolver } }Guards are services that implement interfaces like `CanActivate`, `CanDeactivate`, or `CanLoad`. They decide if a navigation is allowed. For auth, `CanActivate` checks token/session and either returns true or redirects to login. This centralizes access control.
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate(): boolean {
if (this.auth.isLoggedIn()) return true;
this.router.navigate(['/login']);
return false;
}
}Use a `CanActivate` guard. The guard checks auth state; if allowed, it returns `true`. If not, it redirects to `/login` and returns `false`. Combine with an HTTP interceptor to attach tokens and with route data to manage roles.
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate(): boolean {
if (this.auth.isLoggedIn()) return true;
this.router.navigate(['/login']);
return false;
}
}Create an attribute directive when multiple components need the same DOM behavior (e.g., highlight on hover). The directive gets the host element via ElementRef/Renderer2 and responds to HostListener events. Use @Input to pass configuration.
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
@Input() appHighlight = 'yellow';
constructor(private el: ElementRef, private r: Renderer2) {}
@HostListener('mouseenter') on() { this.r.setStyle(this.el.nativeElement,'background',this.appHighlight); }
@HostListener('mouseleave') off() { this.r.removeStyle(this.el.nativeElement,'background'); }
}Angular expressions are evaluated in the component’s scope within double curly braces {{ }} and used in templates for data binding. JavaScript expressions run in the global scope. Angular expressions cannot contain loops or assignments and are automatically escaped for security. They are safer and directly bind data to the view, unlike JavaScript which executes logic imperatively in scripts.
Angular CLI is the official command-line tool. It scaffolds projects, generates code (components, services, pipes), runs a dev server, and builds for production. It enforces best practices and consistent structure, so teams move faster with fewer mistakes. Common commands: `ng new`, `ng serve`, `ng generate`, and `ng build`.
A directive is a class that adds behavior to elements. Types: (1) Component (a directive with a template). (2) Structural directives change layout by adding/removing elements, e.g., `*ngIf`, `*ngFor`. (3) Attribute directives change look/behavior, e.g., custom hover highlight. Use `@Directive` to build your own.
import { Directive, ElementRef, Renderer2, HostListener, Input } from '@angular/core';
@Directive({ selector: '[appHoverBackground]' })
export class HoverBackgroundDirective {
@Input('appHoverBackground') hoverColor?: string;
constructor(private el: ElementRef, private r: Renderer2) {}
@HostListener('mouseenter') onIn(){ this.r.setStyle(this.el.nativeElement, 'backgroundColor', this.hoverColor || 'yellow'); }
@HostListener('mouseleave') onOut(){ this.r.removeStyle(this.el.nativeElement, 'backgroundColor'); }
}The Router maps URLs to components without reloading the page. Define routes in a `Routes` array and render them with `<router-outlet>`. Use `routerLink` for declarative links or `Router.navigate()` in code. This creates fast, app-like navigation.
const routes: Routes = [ { path: 'home', component: HomeComponent } ];
// template
<a routerLink="/home">Home</a>
<router-outlet></router-outlet>