Angular Interview Questions & Answers

    <div *ngIf="isVisible">Content</div>
    

    <p [ngClass]="'highlight'">Text</p>
    

<p>Original date: {{ todayDate }}</p>
<p>Formatted date: {{ todayDate | date:'shortDate' }}</p>
<p>Price: {{ productPrice | currency:'USD':'symbol':'1.2-2' }}</p>

    // Child component
    @Input() dataFromParent: string;
    

    // Child component
    @Output() dataToParent = new EventEmitter<string>();
    emitData() { this.dataToParent.emit('Hello Parent!'); }
    

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get<any[]>('https://api.example.com/users');
  }
}

import { of } from 'rxjs';

const myObservable = of(1, 2, 3);

myObservable.subscribe({
  next: value => console.log(value),
  error: err => console.error(err),
  complete: () => console.log('Completed!')
});

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

@Component({
  selector: 'app-my-component',
  template: '...', stylesheets: ['...'],
  encapsulation: ViewEncapsulation.Emulated // Default
})
export class MyComponent { }

import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @Input() appHighlight = 'yellow'; // Default color

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', this.appHighlight);
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', null);
  }
}

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = localStorage.getItem('token'); // Get token
    const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${authToken}` } });
    return next.handle(authReq);
  }
}

import { throwError, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

// In a service method calling HttpClient:
getUsers(): Observable<any[]> {
  return this.http.get<any[]>('/api/users').pipe(
    catchError(error => {
      console.error('An error occurred:', error);
      // Optionally, send error to a logging service
      return throwError(() => new Error('Something went wrong; please try again later.'));
    })
  );
}

// app-routing.module.ts
const routes: Routes = [
  { 
    path: 'admin', 
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) 
  }
];

<!-- Parent component template -->
<app-card>
  <h2>Card Title</h2>
  <p>Some card content.</p>
</app-card>

<!-- Child (app-card) component template -->
<div class="card">
  <ng-content></ng-content>
</div>

// Component class
items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];
trackByItemId(index: number, item: any): number { return item.id; }

// Template
<div *ngFor="let item of items; trackBy: trackByItemId">
  {{ item.name }}
</div>

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { MyDynamicComponent } from './my-dynamic.component';

@Component({ /* ... */ })
export class HostComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  loadComponent() {
    const factory = this.resolver.resolveComponentFactory(MyDynamicComponent);
    this.container.clear(); // Clear previous components
    const componentRef = this.container.createComponent(factory);
    // You can interact with componentRef.instance here
  }
}

// In a component/service
const worker = new Worker(new URL('./my-worker.worker', import.meta.url));
worker.onmessage = ({ data }) => {
  console.log('Worker response:', data);
};
worker.postMessage({ type: 'calculate', payload: 1000000 });

    // Example: service unit test
    describe('UserService', () => {
      let service: UserService;
      beforeEach(() => { TestBed.configureTestingModule({}); service = TestBed.inject(UserService); });
      it('should be created', () => { expect(service).toBeTruthy(); });
    });
    

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({ /* ... */ })
export class MyComponent {
  @ViewChild('myDiv') myDiv: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.renderer.setStyle(this.myDiv.nativeElement, 'background-color', 'blue');
    this.renderer.addClass(this.myDiv.nativeElement, 'highlight');
  }
}

    import { createCustomElement } from '@angular/elements';
    import { Injector } from '@angular/core';

    // In AppModule's ngDoBootstrap
    const el = createCustomElement(MyAngularComponent, { injector: this.injector });
    customElements.define('my-angular-element', el);