JOBSEEKER?

Angular Interview Questions

Practice for Angular interviews by solving TestDome questions. Our interview questions are used by more than 7,000 companies and 450,000 individual test takers.

Jobseekers: Certify Your Knowledge

Take a Certification Test

Companies: Use Our Tests for Screening

Buy a Pack Of Candidates

Need to practice your Angular skills for an upcoming job interview? Try solving these Angular interview questions that test knowledge of Angular components and expressions. We’ll provide feedback on your answers, and you can use a hint if you get stuck.

These Angular interview questions are examples of real tasks used by employers to screen candidates for front-end web development jobs that require knowledge of the Angular framework in order to create robust, scalable, and user-friendly web applications.

1. Component

Components
   
Easy  

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

(Select all acceptable answers.)

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

Components
   
Easy  

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.)

<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

Expressions
   
Easy  

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.)

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

Components Directives
   
Easy  

Finish the AddressListComponent's template so that it renders one li element per address and it correctly one-way binds each field of the AddressComponent field.

For example, if the addresses array is:

[{ street: "Third Avenue‎", city: "New York", zipCode: "10001" },
 { street: "Constitution Avenue", city: "Washington", zipCode: "20001" }]

the template should render to:

<ul>
  <li>
    <app-address>
      <p>Third Avenue</p>
      <p>New York</p>
      <p>10001</p>
    </app-address>
  </li>
  <li>
    <app-address>
      <p>Constitution Avenue</p>
      <p>Washington</p>
      <p>20001</p>
    </app-address>
  </li>
</ul>

The code for running the example case locally is provided here

Angular  
 


  •   Example case: Wrong answer
  •   One address: Wrong answer
  •   Various addresses: Wrong answer


5. Shopping Component

Components Directives One-way binding
   
Easy  

Finish the ShoppingList component. The component will receive an array of strings as the items array. It should render one li element per item in the array.

For example, if the items array is ["Bread", "Eggs", "Milk"], the rendered HTML should look like:

<ul>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
</ul>

The code for running the example case locally is provided here.

Angular  
 


  •   Example case: Wrong answer
  •   One item in the array: Wrong answer
  •   Various items in the array: Wrong answer


6. Router Module

HTTP Routing
   
Hard  

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.)

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.
   


7. Image Gallery App

Components Directives Event Binding Event handling One-way binding
   
Hard 

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div>
  <div class="image">
    <img src="https://goo.gl/kjzfbE">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://goo.gl/d2JncW">
    <button class="remove">X</button>
  </div>
</div>

Implement the ImageGallery component that accepts a links input and renders the gallery described above so that the first item in the links input is the src attribute of the first image in the gallery. It should also implement the following logic: When the button is clicked, the image that is in the same div as the button should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div>
  <div class="image">
    <img src="https://goo.gl/d2JncW">
    <button class="remove">X</button>
  </div>
</div>

The code for running the example case locally is provided here.

Angular  
 


  •   Example case: Wrong answer
  •   ImageGallery will render the correct list: Wrong answer
  •   Remove a single image: Wrong answer
  •   Remove multiple images: Wrong answer


If you feel ready, take one of our timed public Angular Interview Questions tests:
Angular

Angular Online Test (Easy / Hard)

Angular and TypeScript Online Test (Easy / Hard)

HTML/CSS

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.
Dashboard Start Trial Sign In Home Tour Tests Questions Pricing For Jobseekers