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
Angular · Question Set
Templates, Directives & Pipes interview questions for placements and exams.
Questions
14
Included in this set
Subject
Angular
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Angular.
Common pipes include DatePipe for formatting dates, CurrencyPipe for money, Decimal/PercentPipe for numbers, UpperCase/LowerCase/TitleCase for text, and Slice/Json for arrays and debug. Pipes format data in the view without changing the model.
{{ total | currency:'USD' }} · {{ createdAt | date:'medium' }} · {{ name | titlecase }}For complete preparation, combine this set with full subject-wise practice for Angular. You can also explore other subjects and sets from the links below.
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' }}@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.
Structural directives change the layout by adding or removing elements. *ngIf inserts the host element only when the condition is truthy. *ngFor repeats the host element for each item in a list. Under the hood, the asterisk is shorthand for using <ng-template> with the directive’s microsyntax.
<div *ngIf="loggedIn">Welcome!</div>
<li *ngFor="let user of users; index as i">{{ i }} — {{ user.name }}</li>Use [ngClass] to toggle CSS classes based on booleans or expressions, and [ngStyle] to set inline styles dynamically. Both keep templates clean and avoid manual DOM manipulation.
<div [ngClass]="{ active: isActive, disabled: !enabled }" [ngStyle]="{ color: danger ? 'red' : 'inherit' }">Row</div>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.
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'); }
}Renderer2 abstracts DOM operations so your code works in different platforms (browser, server, web workers) and reduces XSS risks by enforcing safe operations. It also improves testability.
constructor(private r: Renderer2, private host: ElementRef){}
ngOnInit(){ this.r.setAttribute(this.host.nativeElement,'role','button'); }Implement PipeTransform, decorate with @Pipe, and add a transform method. Default pipes are pure—Angular calls them only when input references change, which is fast. Mark a pipe impure (pure:false) only if it depends on mutable data that changes without new references; note it runs every change detection and can hurt performance.
@Pipe({ name:'search' })
export class SearchPipe implements PipeTransform {
transform(list: any[], q: string){
if(!q) return list;
const s = q.toLowerCase();
return list.filter(x => x.name.toLowerCase().includes(s));
}
}When creating the project: `ng new app --style=scss`. For an existing app, run `ng config schematics.@schematics/angular:component.styleext scss` and update angular.json styles to point to .scss files. Component styles can directly use .scss files once the builder is configured.
// angular.json (excerpt) "styles": [ "src/styles.scss" ]
Emulated (default) scopes styles to the component by adding unique attributes—good balance of isolation and compatibility. ShadowDom uses native shadow root for stronger isolation; great for design systems. None applies styles globally—use sparingly for global themes or legacy overrides.
@Component({ selector:'x', template:'…', styles:[`:host{display:block}`], encapsulation: ViewEncapsulation.Emulated })Use ngOnChanges to react to @Input changes (e.g., refresh filtered data). Use ngOnInit for one-time setup like fetching initial data or wiring subscriptions. Use ngOnDestroy to clean up: unsubscribe, remove timers, and detach listeners to avoid memory leaks.
ngOnDestroy(){ this.sub?.unsubscribe(); clearTimeout(this.tid); }At the component level, pipe the HTTP call through catchError to map or rethrow and show a friendly message. In an interceptor, centralize error handling, optionally retry(), and translate status codes to app errors. Always return an observable.
// component
this.api.get().pipe(catchError(err=>{ this.msg='Failed'; return of([]); })).subscribe();
// interceptor
return next.handle(req).pipe(catchError(err=>{ if(err.status===401){ this.auth.logout(); }
return throwError(() => err);
}));