logo 1 1
Contact Us
Contact Us

Efficient Angular Development: A Guide to Avoiding Code Duplication with Generic Code

Generic Angular Code To Avoid Code Duplication

Duplicate code is a repetition of a line or a block of code in the same file or in different files in the same project. Code duplication poses big problems to the software. Even code that has similar functionalities are said to be duplications.

Causes for code duplication

  • Multiple programmers working on different parts of the same program at the same time
  • Specific parts of code look different but actually perform the same job. This kind of duplication can be hard to find and fix
  • Rushing to meet deadlines and the existing code is “almost right” for the job.  Novice programmers may not be able to resist the temptation of copying and pasting the relevant code
Causes For Code Duplication

Drawbacks of code duplication

  • Any modification has to be repeated wherever the code is duplicated
  • The Chances of introducing bugs increases, as the exact places where the duplication occurred can be difficult to identity
  • It makes code maintenance harder and tedious.
mobile

Creating generic components to avoid code duplication

Note:
  • In an attempt to make your code generic, do not make it too complicated.
  • Make sure you separate out business logic and generic functionality.
  • “Code given in the blog is indicative and not complete“

Let us write generic angular code which can display 2 different types of objects, Order and Payment. In the figure below, you will see the list of orders and payments. A single generic list component handles both the objects.

Order List

orderlist

Payment List

paymentlist

Server

Let us assume that there is a server api which returns the list of objects in the following format

Order List
code 1
Payment List
code 2

“pagination_info”: gives the page information for the list“

object_list”: list of objects (orders/payments)

Client

Consumes the list sent by the server and displays the list using a generic list component.

  • Create a constants service – constants.service.ts
  • Create Generic List Component
  • Create Order List Component
  • Create Payment List Component
constants.service.ts

This file has mappings for order and payment objects returned by the server. It does the following

  • Define the title for a given key
  • Define the display order for the data
  • Apply specific css by specifying the css class
  • Define if the data has to be displayed adjacent to any other key
code 3

Generic List

The Generic List component will have the code to display the List UI. This is a simple List with card View. You can have your own design as per the requirement.

generic-list.component.html will look like the following. We have used Ionic framework along with angular.

code 4
generic-list.component.ts file will look like following
code 5
generic-list.component.scss will look like the following
code 6

3. Order List

Now, your Order List component will look like the following. If you notice, Here we do not write any UI code. We just pass the data to the generic list component

code 7
order-list.page.ts code will look like the following.
code 8

Payment List

Now, your Payment List component will look like the following. If you notice, Here we do not write any UI code. We just pass the data to the generic list component

code 9

payment-list.page.ts code will look like the following.

code 10

We have built many angular applications. Contact us for your angular development needs.

Read More Articles

 Contact Us Now

Talk to us to find out about our flexible engagement models.

Get Started
logo 1 1

We build custom software solutions, faster hassle-free with quality

Get Started

Copyrights © 2025 All Rights Reserved by Techpearl Software Pvt Ltd.

Company

Career We are Hiring

Our Services

Explore More

Contact Us

Facebook logo PNG12
Screenshot 4
download
logo 1 1
Contact Us

Get In Touch With Us