Front End 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>

   fetch('https://example.com/api/users/123', {
     method: 'GET'
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

   const formData = {
     name: 'John Doe',
     email: 'john@example.com',
     message: 'Hello, World!'
   };

   fetch('https://example.com/api/contact', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(formData)
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

   const newPost = {
     title: 'My New Blog Post',
     content: 'This is the content of my new blog post.'
   };

   fetch('https://example.com/api/posts', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(newPost)
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

   const updatedUser = {
     name: 'Jane Doe',
     email: 'jane@example.com'
   };

   fetch('https://example.com/api/users/123', {
     method: 'PUT',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(updatedUser)
   })
     .then(response => response.json())
     .then(data => {
       console.log(data);
     })
     .catch(error => {
       console.error('Error:', error);
     });

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

   const myEvent = new CustomEvent('myEvent', {
     detail: { key: 'value' },
     bubbles: true, // Specifies whether the event should bubble up through the DOM tree (optional)
     cancelable: true // Specifies whether the event can be canceled with preventDefault() (optional)
   });

   const element = document.getElementById('myElement');
   element.dispatchEvent(myEvent);

   const element = document.getElementById('myElement');
   element.addEventListener('myEvent', event => {
     console.log('Custom event triggered!', event.detail);
   });

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

for (variable in object) {
  // code to be executed
}

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key); // Outputs: a, b, c
  console.log(obj[key]); // Outputs: 1, 2, 3
}

for (variable of iterable) {
  // code to be executed
}

const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value); // Outputs: 1, 2, 3
}