Top 90+ Angular Interview Questions And Answers

   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 { }

   ng serve

   npm start

   "dependencies": {
     "express": "^4.17.1",
     "lodash": "^4.17.21"
   }

   "devDependencies": {
     "mocha": "^9.0.3",
     "nodemon": "^2.0.13"
   }

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