Angular Developer Interview Questions for Freshers

   ng serve

   npm start

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

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

   const routes: Routes = [
     { path: 'dashboard', component: DashboardComponent },
     { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
     // other routes...
   ];
 

   const routes: Routes = [
     { path: '', component: ProductListComponent },
     { path: 'details/:id', component: ProductDetailsComponent },
     // other routes specific to the feature module...
   ];

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

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

@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  sharedData: string = 'Hello from parent!';
}

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

@Component({
  selector: 'app-child',
  template: `
    
{{ data }}
  `
})
export class ChildComponent {
  @Input() data: string;
}

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

@Component({
  selector: 'app-child',
  template: `
    Send Data
  `
})
export class ChildComponent {
  @Output() dataEvent = new EventEmitter();

  sendData() {
    const data = 'Hello from child!';
    this.dataEvent.emit(data);
  }
}

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

@Component({
  selector: 'app-parent',
  template: `
    
    
{{ receivedData }}
  `
})
export class ParentComponent {
  receivedData: string;

  receiveData(data: string) {
    this.receivedData = data;
  }
}

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

@Injectable()
export class DataService {
  sharedData: string = 'Hello from service!';
}

import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-component-a',
  template: `
    
{{ dataService.sharedData }}
  `
})
export class ComponentA {
  constructor(public dataService: DataService) {}
}

import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-component-b',
  template: `
    Update Data
  `
})
export class ComponentB {
  constructor(public dataService: DataService) {}

  updateData() {
    this.dataService.sharedData = 'New data!';
  }
}

Don't:

export const couterReducer = (state, action: Action) => {
  // ...
}

Do:

export function counterReducer(state, action: Action) {
  // ...
}

Don't:

export default class AppComponent {};

Do:

export class AppComponent {};

-> form-control

Use this.helloForm.controls["greetingMessage"] to retrieve form control is fine.

Don't:

{{helloForm.controls["greetingMessage"].errors?.minlength}}

Do:

{{helloForm.controls["greetingMessage"].hasError("minlength")}}

Don't:

function random() {
  return [{
    path: "",
    component: AppViewComponent
  }];
}
const SAMPLE_APP_ROUTES: Routes = random();

Do:

const SAMPLE_APP_ROUTES: Routes = [{
  path: "",
  component: AppViewComponent
}];

"dependencies": {
  "express": "^3.9.2"
}

"dependencies": {
  "express": "~3.9.2"
}