Interview questions for Junior Angular developer

See the list of interview questions and answers for a junior Angular developer position. The questions cover Angular basics topics.

December 27, 2022 angular

Who is Junior Angular developer?

A junior Angular developer is typically someone who is new to the field of web development and may have limited experience working with Angular. It may have recently graduated from a coding Bootcamp or have completed a self-study program in web development. As a result, they may have a basic understanding of Angular and the principles of web development but may need guidance and support in order to complete tasks and projects.

Remember to be yourself and be honest during the interview. The interviewer wants to get to know you and see how you think, so try to relax and show off your personality and passion for programming.

What are modules in Angular?

In Angular, a module is a container for a group of related components, directives, pipes, and services. It helps to organize the code and keep related things together, making it easier to maintain and reuse the code.

An Angular module is defined by a class decorated with @NgModule(). The @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows:

Can you give an example of a module that you have used?

List of examples modules with descriptions:

What are directives in Angular?

A class with a @Directive decorator that adds new behavior to an existing DOM element. Thanks to directives we can add/remove classes to elements, show/hide elements, etc.

What *ngIf is and what does? Give an example of usage.

The ngIf is a directive that adds or removes an element from the DOM based on a boolean condition. As an example, *ngIf can be used to hide a button if a logged-in user does not have permission to perform an action.

<section *ngIf="user !== null">
  <!-- ... -->

What *ngFor is and what does? Give an example of usage.

The *ngFor is a directive that renders a list of items based on an array and template. It is very similar to a for loop in javascript. As an example, ngFor can be used to display a list of items fetched from a server via HTTP.

  <li *ngFor="let user of users">{{ }}</li>

Have you written your own directive? What did it do?

There are no bad answers. Describe your experience with creating custom directives. If you have never created a directive, tell it.

import { Directive, ElementRef, OnInit, HostListener } from "@angular/core";
import { Clipboard } from "@angular/cdk/clipboard";

// Example directive in Angular to copy text on click
  selector: "[appCopyOnClick]",
export class CopyOnClickDirective {
    private elementRef: ElementRef<HTMLElement>,
    private clipboard: Clipboard,
  ) {}

  copyToClipboard() {

What are pipes in Angular?

A class that implements PipeTransform which is preceded by the @Pipe decorator and which defines a function that transforms input values to output values for display in a view. To apply a pipe, use the pipe (|) character within a template expression.

import { Pipe, PipeTransform } from "@angular/core";

// Example pipe in Angular to trim long text
  name: "trim",
export class TrimPipe implements PipeTransform {
  transform(value: string, maxLength = 255): string {
    if (value.length < maxLength) {
      return value;

    return value.substring(0, maxLength - 3) + "...";

Give an example of build-in pipes

List of example pipes in Angular:

The listed pipes are just an example. You can describe your own list of pipes. To see more you can visit Angular documentation about build-in pipes.

Have you written your own pipe? What did it do?

There is no bad answer. Describe your experience with creating custom pipes in Angular. If you have never created a pipe, tell it. An example pipe you can see above.

How to communicate components between themselves in parent-child relations?

To communicate components use @Input and @Output decorators. @Input is used to pass data from a parent to a child. @Output is used to pass data up (from a child to a parent).

Of course, there are more options to communicate components:

But for a junior Angular developer answer with @Input and @Output is enough.

What lifecycle of components do you know and what do they do?

To read more you can open Angular guide about lifecycle. I just listed the most important lifecycle events. It is enough to know for an Angular junior developer.

How to create a form in Angular?

The are two ways to create a form in Angular:

Template-driven forms

To use this approach import FormsModule. To connect a variable to a template use [(ngModel)].

Reactive forms

To use this approach import ReactiveFormsModule. To create a form model use FormGroup, FormArray or FormControl. To connect the form model with a template use formGroup and formControlName.

Junior Angular developers do not have to have knowledge about the differences between these two approaches and when is better to use any of them.

You have got a task to create a login form. How you would do it?



import { ReactiveFormsModule } from "@angular/forms";

  imports: [ReactiveFormsModule],
  declarations: [LoginComponent],
export class AppModule {}
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <label for="email">Email</label>
      <input type="email" id="email" formControlName="email" />

      <label for="password">Password</label>
      <input type="password" id="password" formControlName="password" />

      <button type="submit">Log in</button>
class LoginComponent {
  loginForm = new FormGroup({
    email: new FormControl("", [Validators.required,]),
    password: new FormControl("", [Validators.required, Validators.minLength(8)]),

  onSubmit() {
    if (this.loginForm.valid) {
      // perform the login request
    } else {
      // display an error message or highlight the invalid form controls

You can do the same functionality using Template-driven forms approach but is a little more complex to meet assumed requirements.

What is RxJs?

RxJS is a library for reactive programming using Observable objects that make it easier to work with asynchronous data, such as data coming from a backend service or user input events, using a declarative programming style.

Can you give an example where RxJs has been used in Angular?

What does the unsubscribe method?

Unsubscribe refers to the act of canceling a subscription to an observable. To cancel the subscription, you should call the unsubscribe method on the subscription object returned by the subscribe method. This will stop the subscriber function from being executed and release any resources associated with the subscription. It’s important to unsubscribe from observables when you are done with them to avoid memory leaks and other issues.

import { interval } from "rxjs";

// An example of using the unsubscribe method
const interval$ = interval(1000);
const subscription = interval$.subscribe((val) => console.log(val));

// Later, when you want to cancel the subscription:

Do you like the content?

Your support helps me continue my work. Please consider making a donation.

Donations are accepted through PayPal or Stripe. You do not need a account to donate. All major credit cards are accepted.

Leave a comment