A guide for creating a Material themed file uploader in Angular

Frame courtesy — গল্প হলেও সত্যি/Galpo Holeo Satti (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 —


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

Frame courtesy — চালচিত্র / The Kaleidoscope (1981)
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 — নায়ক / The Hero (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.

Adding the ‘dictionary’ service


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

Frame courtesy — মেঘে ঢাকা তারা / The Cloud-Capped Star (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.

Preparing the Angular Material code structure

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 — Bhuvan Shome (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.

Preparing the SCSS structure

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 — মেঘে ঢাকা তারা / The Cloud-Capped Star (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.

Creating an Angular workspace with SCSS

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
If characters from “Joy Baba Felunath” became parts of an Angular application
Frame courtesy —জয় বাবা ফেলুনাথ / The Elephant God (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…

Owrrpon

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