Angular Interview Questions

Want to become an expert in cracking Angular interview questions?

Start with practicing the questions below. Whether a question involves multiple choice or live coding, we will give you hints as you go and tell you if your answers are correct or incorrect.

After that, take our timed public Angular Interview Questions Test.

To use our service for testing candidates, buy a pack of candidates.


1. Component

Angular Components Public

Which of the following statements about components in Angular are correct?

(Select all acceptable answers.)

Easy  
2min
The properties of a component's children are available in the component's constructor.
When a component depends on a service, the injector can be used to configure  dependency injection.
A component defines its input parameters with the @Input decorator.
A component is a type of directive and as such, should be defined by the Directive class decorator.
A component selector must reference the class name in lowercase hyphenated format.
A components ngOnDestroy method is called just before Angular destroys the component.
   


2. Welcome

Angular Components Public

Consider the following component:

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

@Component({
  selector: 'welcome',
  template: `<h1>Welcome to {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class WelcomeComponent  {
  @Input() name: string;
}

Select the statements about its use (in another components template or module) that are correct.

(Select all acceptable answers.)

Easy  
3min
<welcome name="TestDome"></welcome> will display: "Welcome to TestDome!".
<welcome></welcome> will display nothing.
@NgModule({ declarations: [ WelcomeComponent ] }) export class WelcomeModule {} declares that the welcome component belongs to the welcome module.
<hello name="{{ name }}"></hello> will display: "Welcome to name!".
   


3. Animal Noise

Angular Expressions Public

Consider the following component, which can be used to model an animal and the noise it makes.

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

@Component({
  selector: 'animal-noise',
  template: `
    <span>{{animal}}</span>
    <button (click)="makeNoise()">Make noise</button>
  `
})
export class AnimalNoise {
  @Input('animal') animal: string;
  @Input('noise') noise: string;

  makeNoise() {
    alert(`${this.noise}`);
  }
}

Select the statements about the AnimalNoise component that are correct.

(Select all acceptable answers.)

Easy  
5min
Component, Input and Output are all required imports for this component.
Both animal and noise inputs must be provided when including the AnimalNoise component in a template.
The 'animal' parameter of the @Input('animal') declaration does not alter the interface of the component.
When included in a components template, the AnimalNoise component creates a span containing the interpolated animals name and a button bound to makeNoise().
The AnimalNoise component can be included in another template using the <AnimalNoise> tag.
   


4. Address Template

Angular Components Public

Consider the following components:

export class Address {
  street: String;
  city: String;
  zipCode: String;
}

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {

  @Input() address: Address;
  constructor() { }

  ngOnInit() {
  }
}

@Component({
  selector: 'app-address-list',
  templateUrl: './address-list.component.html',
  styleUrls: ['./address-list.component.css']
})
export class AddressListComponent implements OnInit {

  @Input() addresses: Address[];
  constructor() { }

  ngOnInit() {
  }
}

Below is the file address-list.component.html. Fill in the blanks, so that the template renders one li element per address and it correctly one-way binds each address to the AddressComponent field.

<ul>
  <li ="let address of ">
    <app-address ="address"></app-address>
  </li>
</ul>
Easy  
7min
   


5. Router Module

Angular HTTP Routing Public

Consider the following application module:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent }        from './home.component';
import { ItemDetailComponent }  from './item-detail.component';
const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home',  component: HomeComponent },
    { path: 'detail/:id', component: ItemDetailComponent, outlet: 'route1' }
];
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

Which of the following statements about the routers behavior are correct?

(Select all acceptable answers.)

Hard  
3min
The home component can only be accessed via the root URL redirect.
The id parameter is optional when a call is made to the /detail/ URL.
Optional parameters can be passed to any component via the query parameters of the ActivatedRoute.
/detail/100 will use the <router-outlet name='route1'> to determine the position of the view.
Route that redirects to HomeComponent would activate on same routes if the pathMatch: 'full' property was removed.
   


If you feel ready, take one of our timed public Angular Interview Questions tests:
  • Angular Online Test (Easy / Hard)
  • Angular and TypeScript Online Test (Easy / Hard)
  • HTML/CSS, Angular, TypeScript, and Node.js Online Test (Easy / Hard)
  • HTML/CSS, Angular, TypeScript, Node.js, and SQL Online Test (Easy / Hard)
Not exactly what you are looking for? Go to our For Jobseekers section.