Sign in

A guide for creating an editable table in Angular with functionality to add new rows using Angular Material.

Frame courtesy — পদাতিক/ (1973)

Adding or editing a row in a table is a pretty common ask in websites. We have a basic table component in Angular Material but no ready-to-use component for the add/edit functionality. And that is precisely where this article comes in.

Prerequisites

  • Angular Material needs to be included in the codebase. For help on including and theming, you can refer to this guide —
    Optimized Angular Material Setup
  • We will be using the following Angular Material components which have to be imported in the module where the ediTable table component will reside — MatTableModule, MatTooltipModule, MatPaginatorModule, MatSidenavModule.
  • I have referred to…


A guide for creating a Material themed file uploader in Angular

Frame courtesy — গল্প হলেও সত্যি/ (1966)

File uploader is one component which is missing in both the Angular Material as well as the Material docs.

In this article, we will create one sample file uploader component that has the following features —

  • Files can be selected both by clicking a button and by drag-and-drop.
  • Each file can be separately uploaded to the API endpoint or all at once.
  • Each file upload can be tracked separately for updates from the API.
  • Files must belong to a set of allowed MIME types to be eligible for upload and in case they are not, relevant messaging must be shown.

Prerequisites


A guide on how to download files from API in Angular.

Frame courtesy — চালচিত্র / The Kaleidoscope (1981)
Frame courtesy — চালচিত্র / The Kaleidoscope (1981)

There is a specific use case when the service API request sends back a file as BLOB and we need to have the file downloaded in the user system through the browser (and not directly writing the file into the user system).

The code changes are pretty basic but figuring out these things for the first time might get confusing (it at least was in my case!) and hence, this article.

Prerequisites

I have referred to a custom method serviceWrapper() that I use in my Angular applications. …


Part four of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

Frame courtesy — নায়ক / (1966)

Prerequisites

Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —

Introduction to optimized Angular codebase setup
Part 1 — Angular Component and Routing Setup
Part 2 — Styling Framework Setup
Part 3 — Including Angular Material

Service/ API Integration

By the time we reach this step, all the components have been styled and the application is ready to be transformed from being a static to a dynamic one by integrating with backend API. In order to work with the API and maintain the state of the application, Angular Services will also be included.


Part three of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

Frame courtesy — মেঘে ঢাকা তারা / (1960)

Prerequisites

Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —

Introduction to optimized Angular codebase setup
Part 1 — Angular Component and Routing Setup
Part 2 — Styling Framework Setup

Including Angular Material

It is now time to include the final weapon in our styling framework arsenal — Angular Material, the silver bullet solution to your common Material needs.

Firstly, we will install via the following command —
ng add @angular/material

We will choose the following options while installing Angular Material —


Part two of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

Frame courtesy — (1969)

Prerequisites

Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —

Introduction to optimized Angular codebase setup
Part 1 — Angular Component and Routing Setup

Styling Framework Setup

Before we start with the development of HTML markups and their associated styling, it will be required to prepare the codebase and integrate the tools needed for the same.

We will create a directory named “styles”, parallel to /app or /assets and add the following files in it. …


Part one of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

Frame courtesy — মেঘে ঢাকা তারা / (1960)

Prerequisites

Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —

Introduction to optimized Angular codebase setup

Angular Component and Routing Setup

Now that we are ready to start with the setup, we will be closely following the order in which the components are to be assembled for setting up the page structure mentioned in the introduction.

We will use the command ng new <app-name-of-our-choice> --style=scss to initialize the workspace. On the terminal prompt, we will select “Yes” to enable routing.


An introduction to the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

If characters from “Joy Baba Felunath” became parts of an Angular application
Frame courtesy —জয় বাবা ফেলুনাথ/ (1979)

After working with Angular for several years across multiple applications, I am finally in a position to present an Angular architecture that has worked smoothly for me. It leverages the best of the front-end worlds — Material Design, Bootstrap, SCSS and Angular Material and few other conventions that help in optimizing the same.

In this guide spread across four parts (links included at the end of this article), we will see in detail how all the parts come together and get the job done.

Note: I do not use Redux in Angular as I find it to be an overkill…

Front-end developer. Code commentator. Inventor of Modhyobitto Application Design (M.A.D.) principles.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store