Angular Developer Interview Questions For 3 Years Of Experience

   ng add @angular/material

   npm install lodash

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

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

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  ngOnDestroy() {
    this.renderer.removeStyle(this.el.nativeElement, 'background-color');
  }
}

  <p apphighlight>
  This text will have a new yellow background.
 </p>

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable | Promise | boolean {
    // Check if the user is authenticated
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      // If the user is not authenticated, redirect to the login page
      this.router.navigate(['/login']);
      return false;
    }
  }
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { ReplaySubject } from 'rxjs';

// Create a ReplaySubject with a buffer size of 3
const subject = new ReplaySubject(3);

// Emit values to the ReplaySubject
subject.next('Value 1');
subject.next('Value 2');
subject.next('Value 3');

// Subscribe to the ReplaySubject
subject.subscribe(value => console.log('Received:', value));

// Output: Received: Value 1, Received: Value 2, Received: Value 3

// Emit another value
subject.next('Value 4');

// Output: Received: Value 4 (new subscriber receives the latest value)

// Subscribe again after some time
setTimeout(() => {
  subject.subscribe(value => console.log('Received later:', value));
}, 2000);

// Output: Received later: Value 2, Received later: Value 3, Received later: Value 4

import { Observable } from 'rxjs';

const coldObservable = new Observable(observer => {
  console.log('Observable logic');
  observer.next(1);
  observer.next(2);
  observer.next(3);
});

coldObservable.subscribe(value => console.log('Subscriber 1:', value));
coldObservable.subscribe(value => console.log('Subscriber 2:', value));

Observable logic
Subscriber 1: 1
Subscriber 1: 2
Subscriber 1: 3
Observable logic
Subscriber 2: 1
Subscriber 2: 2
Subscriber 2: 3

import { Subject } from 'rxjs';

const hotObservable = new Subject<number>();

hotObservable.next(1);
hotObservable.next(2);
hotObservable.next(3);

hotObservable.subscribe(value => console.log('Subscriber 1:', value));

hotObservable.next(4);
hotObservable.next(5);

hotObservable.subscribe(value => console.log('Subscriber 2:', value));

hotObservable.next(6);
hotObservable.next(7);
</number>

Subscriber 1: 4
Subscriber 1: 5
Subscriber 1: 6
Subscriber 1: 7
Subscriber 2: 6
Subscriber 2: 7

ng generate component --skipTests=true component-name

{ 
  "projects": {
    "{PROJECT_NAME}": {
      "schematics": {
        "@schematics/angular:component": {
          "skipTests": true
        }
      }
    }
  }
}

{ 
  "schematics": {
    "@schematics/angular:component": {
      "skipTests": true
    }
  }
}

ng config schematics.@schematics/angular:component.skipTests true

{
   ...
   "defaults" : {
       ...
       "spec": {
           ...
           "component": false
       }
   }
}

ng generate component --spec=false component-name

  const { Observable } = require('rxjs');

  const source$ = new Observable(subscriber => {
  let count = 0;
  const intervalId = setInterval(() => {
    subscriber.next(count);
    count++;
  }, 1000);
  
  return () => clearInterval(intervalId);
  });

 const filtered$ = source$.pipe(
  filter(num => num % 2 !== 0)
  );

 const subscription = filtered$.subscribe(
  num => console.log(num),
  err => console.error(err),
  () => console.log('Complete')
  );

  setTimeout(() => {
  subscription.unsubscribe();
  }, 5000);

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  // ...
})
export class AppModule { }

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

@Injectable()
export class MyService {
  constructor(private http: HttpClient) {
  }

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

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

@Component({
  selector: 'app-my-component',
  template: '
Hello, Angular!
'
})
export class MyComponent {
  // No explicit constructor defined
}

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  template: '
Hello, Angular!
'
})
export class MyComponent {
  constructor(private myService: MyService) {
    // Perform initialization or other logic here
  }
}