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
Meta · Angular
Practice Angular questions specifically asked in Meta interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
25
Tagged for this company + subject
Company
Meta
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 Meta Angular round.
You can pass arguments to pipes using colons. Useful for formats or locales. Example: date:'dd/MM/yyyy' or currency:'EUR':'symbol':'1.2-2'.
Birthday: {{ dob | date:'dd/MM/yyyy' }} · Amount: {{ amount | currency:'EUR':'symbol' }}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.
Declare the param in the route path (e.g., 'users/:id'). In the component, read it using ActivatedRoute. Use snapshot for one-off or params/paramMap observables for reacting to changes when the same component stays mounted.
{ path: 'users/:id', component: UserDetailComponent }
constructor(private route: ActivatedRoute) {}
ngOnInit(){
const id = this.route.snapshot.paramMap.get('id');
this.route.paramMap.subscribe(p => this.load(p.get('id')));
}A component is the building block of Angular apps. It manages a section of the UI through its logic (TypeScript), view (HTML), and style (CSS). Components are declared with the @Component decorator that defines metadata like selector, template, and styleUrls. Each component controls a part of the screen.
@Component({ selector: 'app-header', templateUrl: './header.html' }) export class HeaderComponent { title = 'Header'; }The @Component decorator tells Angular that the class is a component. It provides metadata such as the selector (custom HTML tag), template (HTML structure), and styles. It connects the component’s logic to its view, enabling Angular to render and manage the component efficiently.
A service holds reusable logic like data access or business rules. Angular’s DI framework creates and provides service instances to classes that ask for them. Mark services with `@Injectable({ providedIn: 'root' })` to make a single app-wide instance. Inject them via the constructor.
@Injectable({ providedIn: 'root' })
export class DataService {
constructor(private http: HttpClient) {}
fetch(){ return this.http.get('/api/data'); }
}
// In a component
constructor(private data: DataService) {}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]Use one-way binding when the UI only displays data or emits events to the component (simpler and faster). Use two-way binding when you need immediate sync both ways, like form inputs. Keep two-way binding focused on forms to avoid accidental heavy change detection.
Lazy loading defers loading feature modules until a route needs them. This reduces the initial bundle size, speeds up first paint, and improves Core Web Vitals. Configure with `loadChildren` and split large features into dedicated modules.
const routes: Routes = [
{ path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];Use catchError to map an error to a safe value or rethrow. For transient errors (like 5xx), use retryWhen + delay/backoff. Always surface user-friendly messages and log technical details.
this.api.getData().pipe(
retryWhen(errors => errors.pipe(
scan((acc) => acc + 1, 0),
takeWhile(retryCount => retryCount < 3),
delayWhen(retryCount => timer(2 ** retryCount * 500))
)),
catchError(err => {
this.toast('Could not load data');
return of([]);
})
).subscribe(data => this.items = data);Subject: multicast without initial value (events). BehaviorSubject: stores last value (state). ReplaySubject: replays N values to new subscribers (audit logs). AsyncSubject: emits last value on completion (one-time results).
Use RxJS webSocket() to create a bidirectional stream. Manage reconnect with retryWhen/backoff. Remember to complete the socket on destroy to close the connection.
const socket$ = webSocket('wss://example.com/stream');
socket$.pipe(retryWhen(err$ => err$.pipe(delay(2000)))).subscribe(msg => this.onMsg(msg));I use `ngOnInit` for one-time setup or initial fetches, `ngOnChanges` when reacting to @Input changes, `ngAfterViewInit` to access @ViewChild DOM or child components, and `ngOnDestroy` to clean subscriptions/timers. For custom detection, `ngDoCheck` is a last resort.
The Router listens to URL changes and renders the matched component inside `<router-outlet>`. You declare `Routes` that map paths to components, and use `routerLink` for navigation. State persists in memory, so the experience feels like a native app.
const routes: Routes = [ { path: 'dashboard', component: DashboardComponent } ];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}The Router maps URLs to components and swaps them inside <router-outlet> without full page reloads. It supports parameters, guards, resolvers, lazy loading, and browser history integration to deliver SPA navigation.
<router-outlet></router-outlet>
The Angular Router lets a Single Page Application (SPA) switch views without full page reloads. It maps URLs to components, updates the address bar, and renders the correct view inside <router-outlet>. This gives users fast, app-like navigation while keeping deep links and browser history working.
Guards can return a UrlTree to redirect without side effects. Subscribe to router.events and handle NavigationError for global logging. In guards/resolvers, map server errors to a safe UrlTree (e.g., /error) to avoid half-rendered screens.
canActivate(): Observable<boolean|UrlTree> {
return this.api.isAllowed().pipe(
map(ok => ok || this.router.createUrlTree(['/forbidden'])),
catchError(() => of(this.router.createUrlTree(['/error'])))
);
}
this.router.events.subscribe(e => {
if(e instanceof NavigationError){ /* report */ }
});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;
}
}Implement CanActivate, check auth state, and return true/false, a UrlTree redirect, or an Observable/Promise of either.
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate(): boolean | UrlTree {
return this.auth.isLoggedIn() ? true : this.router.parseUrl('/login');
}
}
{ path: 'dashboard', canActivate: [AuthGuard], component: DashboardComponent }Angular templates are HTML enhanced with bindings and directives. You show values with interpolation {{ value }}, bind to element and component inputs with [prop]="expr", listen to events with (event)="handler()", and combine both with two-way binding [(ngModel)]. Structural directives like *ngIf and *ngFor reshape the DOM, while attribute directives change element appearance or behavior.
Prefer pure pipes over calling methods in bindings to avoid extra change detections. Use trackBy with *ngFor to prevent re-rendering unchanged items. Keep heavy logic in the component, not the template. Avoid deep async chains—use async pipe or resolvers. Split large templates into smaller presentational components.
Use the @Input() decorator on the child to declare an input property, then bind to it from the parent template. This keeps the data flow explicit and one-way into the child.
// child.component.ts @Input() title!: string; // parent.component.html <app-child [title]="pageTitle"></app-child>
Signals are reactive primitives that track dependencies and update views automatically without manual change detection. Prefer signals for local component state or simple shared state where you want fine-grained updates with minimal boilerplate. Use RxJS streams when you need rich async composition, multicasting, or complex event pipelines.
Observables are streams that can emit many values over time, support cancellation (unsubscribe), and come with a rich operator set (map, switchMap, retry, etc.). Promises emit exactly one value and cannot be cancelled. Use Observables for UI events, HTTP flows that may be retried/cancelled, websockets, and composition. Use Promises for simple, single-result async tasks or interop with APIs that already return Promises.
Client-side frameworks like Angular were introduced to make modern web applications more interactive and maintainable. Earlier, developers had to manually update the DOM using plain JavaScript or jQuery, which became messy for large applications. Angular introduced Single Page Applications (SPAs), data binding, and component-based architecture to keep UI and logic in sync automatically, improve reusability, and organize code effectively.
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.