Open in app

Sign up

Sign in

Write

Sign up

Sign in

Bits and Pieces

Insightful articles, step-by-step tutorials, and the latest news on full-stack composable software development

Follow publication

10 Common Mistakes in Angular Development

Patric
Bits and Pieces
Published in
29 min readApr 18, 2023

Build in AI speed — Compose enterprise-grade applications, features, and components
Build in AI speed — Create and maintain an enterprise-grade design system at ease

Poor Component Design

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  template: `
    <!-- ... Template code ... -->
  `
})
export class ExampleComponent {
  constructor(private http: HttpClient) { }

  // Component logic, including HTTP requests, directly in the component class
  // ...
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
    <ul>
      <li *ngFor="let product of products">{{ product.name }}</li>
    </ul>
  `
})
export class ProductListComponent {
  products: Product[] = [
    { id: 1, name: 'Product 1' },
    { id: 2, name: 'Product 2' },
    { id: 3, name: 'Product 3' }
  ];

  // Component logic specific to product list
  // ...
}

interface Product {
  id: number;
  name: string;
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-item-list',
  template: `
    <h2>{{ title }}</h2>
    <ul>
      <li *ngFor="let item of items">{{ item.name }}</li>
    </ul>
  `
})
export class ItemListComponent {
  @Input() title: string;
  @Input() items: any[];

  // Component logic for displaying a generic item list
  // ...
}

Learn more here:

Overview | Bit

In some sense, a Bit component can be thought of as an Angular library. It is a collection of files that work together…

bit.dev

Inefficient Change Detection

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

@Component({
  selector: 'app-user',
  template: `
    <div>
      <h1>{{ user.name }}</h1>
      <p>{{ user.age }}</p>
    </div>
  `,
})
export class UserComponent {
  @Input() user: User; // User is an interface or class representing user data
}
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div>
      <h1>{{ user.name }}</h1>
      <p>{{ user.age }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush, // Set the change detection strategy to OnPush
})
export class UserComponent {
  @Input() user: User; // User is an interface or class representing user data
}

Not Using Reactive Programming

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input type="text" [(ngModel)]="username" name="username" required>
      <input type="password" [(ngModel)]="password" name="password" required>
      <button type="submit">Login</button>
    </form>
  `,
})
export class LoginFormComponent {
  username: string;
  password: string;

  onSubmit() {
    // Form submission logic with username and password
    // ...
  }
}
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-form',
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <input formControlName="username" required>
      <input formControlName="password" type="password" required>
      <button type="submit">Login</button>
    </form>
  `,
})
export class LoginFormComponent {
  loginForm: FormGroup;

  constructor() {
    this.loginForm = new FormGroup({
      username: new FormControl('', [
        Validators.required,
        Validators.pattern(/^\S+$/), // enforce non-whitespace characters
      ]),
      password: new FormControl('', Validators.required, Validators.minLength(8)),
    });
  }

  onSubmit() {
    if (this.loginForm.invalid) {
      // Form is invalid, handle error
      return;
    }

    const username = this.loginForm.get('username').value.trim();
    const password = this.loginForm.get('password').value;

    // Form submission logic with username and password
    // ...
  }
}

Improper Memory Management

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
    <!-- Display products -->
  `
})
export class ProductListComponent implements OnInit {
  products: Product[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // Fetch products from data service and subscribe to the observable
    this.dataService.getProducts()
      .subscribe(products => this.products = products);
  }
}
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
    <!-- Display products -->
  `
})
export class ProductListComponent implements OnInit, OnDestroy {
  // ...

  ngOnDestroy() {
    // Unsubscribe from the observable to prevent memory leaks
    this.subscription.unsubscribe();
  }
}
import { Component, Injector } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
    <!-- Display products -->
  `,
  providers: [DataService]
})
export class ProductListComponent {
  constructor(private injector: Injector) {
    // Fetch products from data service using injector
    const dataService = this.injector.get(DataService);
    dataService.getProducts().subscribe(products => {
      // Handle products
    });
  }
}
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Product List</h2>
    <!-- Display products -->
  `,
  providers: [DataService]
})
export class ProductListComponent {
  constructor(private dataService: DataService) {
    // Fetch products from data service directly
    this.dataService.getProducts().subscribe(products => {
      // Handle products
    });
  }
}

Poor Performance Optimization

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

@Component({
  selector: 'app-example',
  template: `
    <ul>
      <li *ngFor="let product of products">{{ product }}</li>
    </ul>
  `
})
export class ExampleComponent {
  products: Product[] = [
    { id: 1, name: 'Product 1' },
    { id: 2, name: 'Product 2' },
    { id: 3, name: 'Product 3' }
  ];

  // Oops! No trackBy function is provided
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <ul>
      <li *ngFor="let product of products; trackBy: trackByProductId">{{ product.name }}</li>
    </ul>
  `
})
export class ExampleComponent {
  products: Product[] = [
    { id: 1, name: 'Product 1' },
    { id: 2, name: 'Product 2' },
    { id: 3, name: 'Product 3' }
  ];

  trackByProductId(index: number, product: Product): number {
    return product.id; // Use a unique identifier for the product, such as an ID or a unique property value
  }
}

interface Product {
  id: number;
  name: string;
}
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  template: `
    <!-- Display data from API -->
    <div *ngFor="let data of apiData">{{ data }}</div>
  `
})
export class ExampleComponent implements OnInit {
  apiData: any[];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Make API request on component initialization
    this.http.get('https://api.example.com/data')
      .subscribe(response => {
        this.apiData = response;
      });
  }

  // Oops! API request is not optimized
}
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { debounceTime, tap } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
    <!-- Display data from API -->
    <div *ngFor="let data of apiData">{{ data }}</div>
    <!-- Show loading spinner -->
    <div *ngIf="loading">Loading data...</div>
    <!-- Show error message -->
    <div *ngIf="error">{{ error }}</div>
    <!-- Show load more button -->
    <button (click)="loadMore()" *ngIf="hasNextPage && !loading">Load More</button>
  `
})
export class ExampleComponent implements OnInit {
  apiData: any[] = [];
  loading: boolean = false;
  error: string = '';
  page: number = 1;
  hasNextPage: boolean = true;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadMore(); // Load initial data
  }

  loadMore() {
    if (this.loading || !this.hasNextPage) return; // Prevent multiple requests and stop loading when no more data
    this.loading = true;
    this.error = '';

    this.http.get(`https://api.example.com/data?page=${this.page}`)
      .pipe(
        tap(response => {
          // Append new data to existing data array
          this.apiData = this.apiData.concat(response);
        }),
        debounceTime(300) // Apply debounce to prevent rapid API requests
      )
      .subscribe(
        () => {
          this.loading = false;
          this.page++; // Increment page for next loadMore request
        },
        error => {
          this.loading = false;
          this.error = 'Failed to load data'; // Show error message
        }
      );
  }
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

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

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./home.component').then(m => m.HomeComponent) },
  { path: 'about', loadChildren: () => import('./about.component').then(m => m.AboutComponent) },
  { path: 'contact', loadChildren: () => import('./contact.component').then(m => m.ContactComponent) }
];

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

Ignoring Security Best Practices

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

@Component({
  selector: 'app-example',
  template: `
    <div [innerHTML]="unsafeHtml"></div>
  `
})
export class ExampleComponent {
  @Input() unsafeHtml: string;

  // Oops! Unsafe HTML is directly bound to the template
}
import { Component, Input } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-example',
  template: `
    <div [innerHtml]="safeHtml"></div>
  `
})
export class ExampleComponent {
  @Input() unsafeHtml: string;
  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    // Sanitize the unsafe HTML
    this.safeHtml = this.sanitizer.sanitize(
      // Use a whitelist of allowed HTML elements and attributes
      this.unsafeHtml,
      { 
        allowedTags: ['div', 'span', 'a'], 
        allowedAttributes: { 'a': ['href'] } 
      }
    );
  }
}
import { HttpClient } from '@angular/common/http';

export class ExampleService {
  constructor(private http: HttpClient) {}

  public updateData(data: any) {
    // Oops! No CSRF token is included in the request
    return this.http.post('https://api.example.com/update', data);
  }
}
import { HttpClient, HttpHeaders } from '@angular/common/http';

export class ExampleService {
  constructor(private http: HttpClient) {}

  public updateData(data: any) {
    // Include CSRF token in request headers
    const headers = new HttpHeaders().set('X-CSRF-TOKEN', 'your_csrf_token_here');
    return this.http.post('https://api.example.com/update', data, { headers });
  }
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <input [(ngModel)]="username" placeholder="Username">
    <button (click)="login()">Login</button>
  `
})
export class ExampleComponent {
  username: string;

  public login() {
    // Oops! No input validation is performed
    if (this.username === 'admin') {
      // Grant admin access
    } else {
      // Grant regular user access
    }
  }
}
import { Component, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="loginForm">
      <input formControlName="username" placeholder="Username">
      <button (click)="login()">Login</button>
    </form>
  `
})
export class ExampleComponent {
  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required, Validators.pattern(/^\S*$/)]
    });
  }

  public login() {
    if (this.loginForm.valid) {
      const username = this.loginForm.value.username;
      if (username === 'admin') {
        // Grant admin access
      } else {
        // Grant regular user access
      }
    }
  }
}

Lack of Testing

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

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="isLoggedIn">Welcome, {{ username }}!</div>
    <div *ngIf="!isLoggedIn">Please login</div>
  `
})
export class ExampleComponent {
  isLoggedIn: boolean;
  username: string;

  // Oops! No unit tests to cover this component's logic
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExampleComponent } from './example.component';

describe('ExampleComponent', () => {
  let component: ExampleComponent;
  let fixture: ComponentFixture<ExampleComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ExampleComponent]
    });
    fixture = TestBed.createComponent(ExampleComponent);
    component = fixture.componentInstance;
  });

  it('should display welcome message when isLoggedIn is true', () => {
    component.isLoggedIn = true;
    component.username = 'John';
    fixture.detectChanges();
    const welcomeElement = fixture.nativeElement.querySelector('div');
    expect(welcomeElement.textContent).toContain('Welcome, John!');
  });

  it('should display login message when isLoggedIn is false', () => {
    component.isLoggedIn = false;
    fixture.detectChanges();
    const loginElement = fixture.nativeElement.querySelector('div');
    expect(loginElement.textContent).toContain('Please login');
  });
});

Learn more here:

Using testers | Bit

The Tester aspect simplifies and standardizes the process of component testing.

bit.dev

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

@Component({
  selector: 'app-example',
  template: `
    <!-- ... Template code ... -->
  `
})
export class ExampleComponent {
  // Oops! No end-to-end (e2e) tests to cover this component's functionality
}
import cy from 'cypress';

describe('ExampleComponent', () => {
  beforeEach(() => {
    // Perform any setup tasks, e.g., navigate to the ExampleComponent page
    cy.visit('/example');
  });

  it('should display welcome message when logged in', () => {
    // Set up preconditions, e.g., login with a valid username
    // You can interact with the component's DOM using Cypress's commands
    cy.get('input').type('john');
    cy.get('button').click();

    // Verify the expected outcome, e.g., check if the welcome message is displayed
    cy.get('div').should('contain.text', 'Welcome, john!');
  });

  it('should display login message when not logged in', () => {
    // Set up preconditions, e.g., logout or do not login
    // You can interact with the component's DOM using Cypress's commands

    // Verify the expected outcome, e.g., check if the login message is displayed
    cy.get('div').should('contain.text', 'Please login');
  });
});

Ignoring Angular Best Practices

// Example of not following the Angular style guide for naming conventions
// Ignoring the guideline for using PascalCase for component class names
// and kebab-case for component selectors
import { Component } from '@angular/core';

@Component({
  selector: 'appExample', // Not using kebab-case for selector
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class exampleComponent { // Not using PascalCase for class name
  // ...
}
// Example of not adhering to recommended folder structure
// Ignoring the guideline for organizing components in a separate folder
// and not using a clear folder structure for other files
src/
  app/
    components/
      example.component.ts // Not organizing components in a separate folder
    services/
      example.service.ts // Not organizing services in a separate folder
    example.module.ts // Not using a clear folder structure for other files
    example.component.css
    example.component.html
// Example of not using Angular's dependency injection appropriately
// Ignoring the guideline for using dependency injection for services
import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example',
  template: `
    <!-- ... Template code ... -->
  `,
  providers: [ExampleService] // Not using DI to inject the service
})
export class ExampleComponent {
  constructor() {
    this.exampleService = new ExampleService(); // Not using DI to inject the service
  }
  // ...
}

Not Optimizing DOM Manipulation

<!-- Component template -->
<input [(ngModel)]="username" />
<!-- Component template -->
<input [value]="username" (input)="onUsernameInput($event.target.value)" />

<!-- Component class -->
onUsernameInput(value: string) {
  this.username = value;
}
<!-- Component template -->
<div [style.backgroundColor]="bgColor">Hello, World!</div>
<!-- Component template -->
<div #myDiv>Hello, World!</div>
<!-- Component class -->
import { Renderer2, ElementRef, ViewChild } from '@angular/core';

@ViewChild('myDiv', { static: true }) myDiv: ElementRef;

constructor(private renderer: Renderer2) {}

ngOnInit() {
  this.renderer.setStyle(this.myDiv.nativeElement, 'backgroundColor', this.bgColor);
}

Not Handling Error Conditions:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data }}</div>
  `,
})
export class ExampleComponent {
  data: string;

  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('/api/data').subscribe(
      (data) => {
        this.data = data; // Update UI with retrieved data
      },
      (error) => {
        console.error('Failed to get data:', error); // Log error
      }
    );
  }
}
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data }}</div>
    <div class="error" *ngIf="errorMessage">{{ errorMessage }}</div>
  `,
})
export class ExampleComponent {
  data: string;
  errorMessage: string;

  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('/api/data').pipe(
      catchError((error) => {
        this.errorMessage = 'Failed to get data: ' + error; // Display error message
        console.error('Failed to get data:', error); // Log error
        return throwError(error); // Rethrow the error to propagate
      })
    ).subscribe(
      (data) => {
        this.data = data; // Update UI with retrieved data
      }
    );
  }
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="onButtonClick()">Click me</button>
  `,
})
export class ExampleComponent {
  onButtonClick() {
    // This code may throw an unexpected exception
    throw new Error('Unexpected exception occurred');
  }
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="onButtonClick()">Click me</button>
    <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
  `,
})
export class ExampleComponent {
  errorMessage: string = '';

  onButtonClick() {
    try {
      // This code may throw an unexpected exception
      throw new Error('Unexpected exception occurred');
    } catch (error) {
      // Handle the error and display error message
      this.errorMessage = 'An error occurred: ' + error.message;
      console.error(error); // Log the error for debugging
    }
  }
}

Build Angular Apps with reusable components, just like Lego

Introduction to Angular | Bit

Angular is a framework that mainly focuses on applications and usually lends towards a monorepo structure. This is why…

bit.dev

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo

Learn more:

Introducing Angular Component Development Environment

Learn about the recent upgrades for Angular Developer Experience with Bit, how to modify and extend your configuration…

bit.dev

10 Useful Angular Features You’ve Probably Never Used

10 useful Angular features you might have missed.

blog.bitsrc.io

Top 8 Tools for Angular Development in 2023

blog.bitsrc.io

Getting Started with a New Angular Project in 2023

blog.bitsrc.io

How to Share Angular Components Between Projects and Apps

Share and collaborate on NG components across projects, to build your apps faster.

blog.bitsrc.io

Creating a Developer Website with Bit components

How I built my portfolio using independent React components.

blog.bitsrc.io

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Sign up for free

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Try for $5/month
Angular
Best Practices
Security
Web Development
Programming

Bits and Pieces
Bits and Pieces
Follow

Published in Bits and Pieces

41K Followers
Last published Mar 13, 2025

Insightful articles, step-by-step tutorials, and the latest news on full-stack composable software development

Follow
Patric
Patric
Follow

Written by Patric

541 Followers
8 Following

Loving web development and learning something new. Always curious about new tools and ideas.

Follow

Responses (15)

More from Patric and Bits and Pieces

See all from Patric
See all from Bits and Pieces

Recommended from Medium

See more recommendations

Help

Status

About

Careers

Press

Blog

Privacy

Rules

Terms

Text to speech