Top 60 Angular Interview Questions and Answers | Get Angular Interview-Ready

1
// Installation
2
npm install -g @angular/cli
3

4
// Create new project
5
ng new my-angular-app
6

7
// Development server
8
ng serve
9

10
// Generate components
11
ng generate component my-component
12

13
// Production build
14
ng build --prod
15

16
// Testing
17
ng test

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

3
@Component({
4
  selector: 'app-my-component',
5
  templateUrl: './my-component.component.html',
6
  styleUrls: ['./my-component.component.css']
7
})
8
export class MyComponent {
9
  // Component logic and data here
10
}

1
// ngFor
2
<ul>
3
  <li *ngFor="let item of items">{{ item }}</li>
4
</ul>
5

6
// ngStyle
7
<div [ngStyle]="{ 'font-size': '16px', 'color': 'blue' }">Styled Text</div>

1
// Parent component
2
<app-child [data]="parentData"></app-child>
3

4
// Child component
5
import { Component, Input } from '@angular/core';
6

7
@Component({
8
  selector: 'app-child',
9
  template: '<p>{{ data }}</p>'
10
})
11
export class ChildComponent {
12
  @Input() data: string;
13
}

1
// Parent component
2
import { Component, ViewChild, AfterViewInit } from '@angular/core';
3
import { ChildComponent } from './child.component';
4

5
@Component({
6
  selector: 'app-parent',
7
  template: '<app-child></app-child>'
8
})
9
export class ParentComponent implements AfterViewInit {
10
  @ViewChild(ChildComponent) childComponent: ChildComponent;
11

12
  ngAfterViewInit() {
13
    this.childComponent.someMethod('Data from parent');
14
  }
15
}
16

17
// Child component
18
import { Component } from '@angular/core';
19

20
@Component({
21
  selector: 'app-child',
22
  template: '<p>{{ data }}</p>'
23
})
24
export class ChildComponent {
25
  data: string;
26

27
  someMethod(dataFromParent: string) {
28
    this.data = dataFromParent;
29
  }
30
}

1
// ngIf
2
<div *ngIf="showElement">This element is shown if showElement is true.</div>
3

4
// ngFor
5
<ul>
6
  <li *ngFor="let item of items">{{ item }}</li>
7
</ul>
8

9
// ngSwitch
10
<div [ngSwitch]="choice">
11
  <p *ngSwitchCase="'A'">You selected A</p>
12
  <p *ngSwitchCase="'B'">You selected B</p>
13
  <p *ngSwitchDefault>Make a choice</p>
14
</div>

1
// Create a service
2
ng generate service my-service
3

4
// Define the service logic
5
import { Injectable } from '@angular/core';
6

7
@Injectable({
8
  providedIn: 'root' // This makes the service available application-wide
9
})
10
export class MyService {
11
  constructor() { }
12

13
  // Define methods and properties here
14
  getData(): string {
15
    return 'This is data from the service';
16
  }
17
}
18

19
// Inject the service
20
import { Component } from '@angular/core';
21
import { MyService } from './my-service.service';
22

23
@Component({
24
  selector: 'app-my-component',
25
  template: '<p>{{ serviceData }}</p>'
26
})
27
export class MyComponent {
28
  serviceData: string;
29

30
  constructor(private myService: MyService) {
31
    this.serviceData = myService.getData();
32
  }
33
}

1
// auth.guard.ts
2

3
import { Injectable } from '@angular/core';
4
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
5
import { Observable } from 'rxjs';
6

7
@Injectable({
8
  providedIn: 'root'
9
})
10
export class AuthGuard implements CanActivate {
11
  constructor(private router: Router) {}
12

13
  canActivate(
14
    route: ActivatedRouteSnapshot,
15
    state: RouterStateSnapshot
16
  ): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
17
    // Your logic to determine whether the user is authorized to access the route.
18
    const userIsAuthorized = /* Implement your authorization logic here */;
19

20
    if (userIsAuthorized) {
21
      return true;
22
    } else {
23
      // Redirect to a login page or another route if not authorized.
24
      return this.router.parseUrl('/login');
25
    }
26
  }
27
}
28

29

30
// app-routing.module.ts
31

32
import { NgModule } from '@angular/core';
33
import { RouterModule, Routes } from '@angular/router';
34
import { AuthGuard } from './auth.guard';
35

36
const routes: Routes = [
37
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] },
38
  // ... other routes
39
];
40

41
@NgModule({
42
  imports: [RouterModule.forRoot(routes)],
43
  exports: [RouterModule]
44
})
45
export class AppRoutingModule { }

1
// Importing HttpClientModule
2
import { HttpClientModule } from '@angular/common/http';
3

4
@NgModule({
5
  declarations: [
6
    // ...
7
  ],
8
  imports: [
9
    HttpClientModule,
10
    // ...
11
  ],
12
  providers: [],
13
  bootstrap: [AppComponent]
14
})
15
export class AppModule { }
16

17

18
// Making a GET request
19
import { HttpClient } from '@angular/common/http';
20

21
@Injectable({
22
  providedIn: 'root'
23
})
24
export class MyService {
25
  constructor(private http: HttpClient) {}
26

27
  fetchData() {
28
    return this.http.get('https://api.example.com/data');
29
  }
30
}

1
// switchMap
2
source$.pipe(
3
  switchMap(value => getInnerObservable(value))
4
);
5

6
// mergeMap
7
source$.pipe(
8
  mergeMap(value => getInnerObservable(value))
9
);

1
// Import necessary modules
2
import { Pipe, PipeTransform } from '@angular/core';
3

4
@Pipe({
5
  name: 'customPipeName'
6
})
7
export class CustomPipe implements PipeTransform {
8
  transform(value: any, args?: any): any {
9
    // Your custom transformation logic here
10
    return transformedValue;
11
  }
12
}

1
// Import necessary modules and components
2
import { NgModule } from '@angular/core';
3
import { CustomPipe } from './custom-pipe'; // Adjust the import path as needed
4

5
@NgModule({
6
  declarations: [
7
    // ... other components and pipes
8
    CustomPipe
9
  ],
10
  // ...
11
})
12
export class AppModule { }

1
<p>{{ someData | customPipeName: arg1: arg2 }}</p>

1
// Pure pipes
2
@Pipe({
3
  name: 'purePipe',
4
  pure: true
5
})
6

7
// Impure pipes
8
@Pipe({
9
  name: 'impurePipe',
10
  pure: false
11
})

1
// Installation
2
ng add @nguniversal/express-engine
3

4
// Create component
5
ng generate universal <app-name>
6

7
// Building
8
npm run build:ssr
9

10
// Run
11
npm run serve:ssr

1
// Import necessary modules
2
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
3
import { NgModule } from '@angular/core';
4

5
@NgModule({
6
  imports: [BrowserAnimationsModule],
7
  // ...
8
})
9
export class AppModule { }

1
// Import necessary modules and components
2
import { trigger, state, style, transition, animate } from '@angular/animations';
3
import { Component } from '@angular/core';
4

5
@Component({
6
  // ...
7
  animations: [
8
    trigger('myAnimation', [
9
      state('start', style({ opacity: 0 })),
10
      state('end', style({ opacity: 1 })),
11
      transition('start => end', animate('500ms')),
12
    ]),
13
  ],
14
})

1
<div [@myAnimation]='animationState'>...</div>

1
// Animation state variable
2
animationState = 'start';
3

4
// Function to toggle animation state
5
toggleAnimation() {
6
  this.animationState = this.animationState === 'start' ? 'end' : 'start';
7
}

1
ng build --aot

1
const routes: Routes = [
2
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) },
3
];

1
// *ngIf
2
<div *ngIf="condition; else elseBlock">
3
  Content to be shown when condition is true.
4
</div>
5
<ng-template #elseBlock>
6
  Content to be shown when condition is false.
7
</ng-template>
8

9
// ng-container
10
<ng-container *ngIf="condition">
11
  Content to be shown when condition is true.
12
</ng-container>
13
<ng-container *ngIf="!condition">
14
  Content to be shown when condition is false.
15
</ng-container>

1
// Import necessary modules and components
2
import { ComponentFixture, TestBed } from '@angular/core/testing';
3
import { MyComponent } from './my.component';
4

5
describe('MyComponent', () => {
6
  let fixture: ComponentFixture<MyComponent>;
7
  let component: MyComponent;
8

9
  beforeEach(() => {
10
    TestBed.configureTestingModule({
11
      declarations: [MyComponent],
12
    });
13

14
    fixture = TestBed.createComponent(MyComponent);
15
    component = fixture.componentInstance;
16
  });
17

18
  it('should create the component', () => {
19
    expect(component).toBeTruthy();
20
  });
21

22
  it('should have a title', () => {
23
    expect(component.title).toBe('Hello, World!');
24
  });
25

26
  // Write more test cases as needed
27
});

1
npm install karma karma-jasmine jasmine-core karma-chrome-launcher karma-coverage-istanbul-reporter --save-dev
2

3
// Karma configuration file
4
module.exports = function(config) {
5
  config.set({
6
    // Base path that will be used to resolve files and exclude
7
    basePath: '',
8

9
    // Frameworks to use
10
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
11

12
    // List of files/patterns to load in the browser
13
    files: [
14
      // Your application code and test files
15
      'src/**/*.spec.ts',
16
    ],
17

18
    // List of files to exclude
19
    exclude: [],
20

21
    // Preprocess matching files before serving them to the browser
22
    preprocessors: {
23
      'src/**/*.spec.ts': ['@angular-devkit/build-angular'],
24
    },
25

26
    // Test results reporter to use
27
    reporters: ['progress', 'kjhtml'],
28

29
    // Web server port
30
    port: 9876,
31

32
    // Enable/disable colors in the output (reporters and logs)
33
    colors: true,
34

35
    // Level of logging
36
    logLevel: config.LOG_INFO,
37

38
    // Auto-watch files and run tests whenever they change
39
    autoWatch: true,
40

41
    // Browsers to use for testing
42
    browsers: ['Chrome'],
43

44
    // Continuous Integration mode
45
    singleRun: false,
46

47
    // Concurrency level (how many browser instances to run simultaneously)
48
    concurrency: Infinity,
49

50
    // Angular-specific configuration
51
    client: {
52
      clearContext: false, // leave Jasmine Spec Runner output visible in the browser
53
    },
54
  });
55
};

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>My Angular App</title>
6
  <base href="/my-app/"> <!-- Specify the base URL -->
7
  <!-- Other head elements, such as stylesheets and scripts -->
8
</head>
9
<body>
10
  <app-root></app-root>
11
</body>
12
</html>