Sign in

javaScript | Angular

Because simple refactoring(s) doesn’t hurt anybody!

This story was originally published in indepth.dev: https://indepth.dev/posts/1439/learn-angular-component-design-patterns-creating-a-drawer-component-2

“Repetition is the root of all software evil” — Martin Fowler

I keep saying to people that Angular is way more powerful than what youtube teaches. There are powerful patterns and tools Angular provides to create highly scalable, structured, and maintainable web applications.

It is easy to miss these patterns when learning as most of the tutorials out there seem to omit advanced concepts.

This article will attempt to create a simple drawer component, make it more flexible and reusable, version by version. …


Let nothing stop you from personalizing your favorite code editor!

ng-switch

“Automation applied to an inefficient operation will magnify the inefficiency” — Bill gates

Visual Studio Code is arguably the most used text editor in the world when it comes to programming! In fact, VS Code was voted to be the most popular developer tool in 2018 and 2019 StackOverflow developer surveys. It is lightweight, easy to navigate, and easy to customize code editor that everybody wanted. This made VS Code favorite to all of us since the initial release back in 2015.

VS Code also allowed developers to create so-called…


Or in any RxJS application

Angular and RxJS logos
Photo by the author.

“The cheapest, fastest, and most reliable components are those that aren’t there.” — Gordon Bell

Angular is powerful because of its reactive architecture. RxJS is how Angular manages to do this. RxJS is the most used reactive JavaScript library of all time and its popularity is growing every day.

In one of my older articles, I confessed things I regret not doing as an Angular developer. Not learning in-depth RxJS was one of them and learning it now is such a pleasant experience.

In this article, we will implement polling logic using RxJS.

What Is Polling?

Polling is simply a technical term used…


Because directives are fun!

“Code is like humor. When you have to explain it, it’s bad” — Cory House

Directives are powerful pattern when working with Angular. Having a strong understanding of directives can help you keep your developer experience better and can help to write more meaningful code.

Elastic Input is just a fancy name we gave for an input field that changes its width as per the content inside it.

The plan

We are going to take the following steps to achieve this.

  1. Create a directive, let’s call it elasticInput.
  2. Create a dummy DOM element(<div>) and attach to the document when the directive is…


Lessons learned in three years working as a full-time web developer!

Photo by Alexander Sinn on Unsplash

“I’m not a great programmer; I’m just a good programmer with great habits.”
Kent Beck

My first ever blog post came to light about two years ago. I wrote about my journey to tech and experience here. This will be a follow-up article focused on the things I learned over the past three years.

A lot of things changed for me in the past two years. The major shift is that I started concentrating more on the frontend, especially on Angular. …


Create a reusable Angular accordion component and lazy load its content

Image by the author

“Before software can be reusable it first has to be usable.”

— Ralph Johnson

Lazy loading, by definition, is the technique of loading something on demand.

Lazy loading can be applied to different levels of your application-development process, from modules to components. Module-level lazy loading is quite famous in the Angular world, but component-level lazy loading is something less spoken about. In this article, we’ll create an accordion component and lazy load the content.

Why Lazyload Components at All?


Missing pieces in my Angular learning and how I am patching them!

“Experience is the name everyone gives to their mistakes — Oscar Wilde”

I have spent most of my career working on web applications developed in Angular. I started by learning and doing simple static html websites. Earlier, I had the experience of developing dynamic web applications made in jQuery.

Learning Angular basics was overwhelming, but not hard. A couple of Udemy courses and tons of youtube videos made it easy and fun to learn. Working at a startup, I got my hands on multiple projects developed in Angular and I had fun creating them.

Recently, I wrote an article on…


Supercharge your Angular application with a custom resizable table directive!

“Simplicity is the soul of efficiency.” — Austin Freeman

The Twitter developer community is one of the best developer hangouts that I came across. I recently started being more active and I am finding it a lot of fun, learning, and inspiration.

The following tweet by Alex Inkin inspired me to write this article.

Tweet by Alex Inkin

The snippet above is an Angular directive that can be used to resize any table columns. I personally find this incredibly useful and will set a really good example in learning Angular directives and rxjs basics.

Let’s get to it

The plan

The basic…


Simple Dark mode toggler in Angular using rxjs and CSS variables!

For the things we have to learn before we can do them, we learn by doing them!
— Aristotle

The dark mode is getting attention like never before! It’s everywhere. Almost all modern web and mobile applications seem to adopt the dark mode one followed by the other. Whatsapp, Facebook, Twitter, Youtube, Stackoverflow, etc… The list can go on.

Implementing dark mode in Angular is fairly simple. You can find tons of articles on the internet explaining dark mode in angular but, using material theming. …


What material components can teach us about component design patterns!

“Make it simple, but significant.” — Don Draper

Angular is one of the most used frontend SPA frameworks out there. It is unique in many aspects. The developer community and the Angular team together have set best practices and good-to-haves that all of us follow. This together with the architectural choices makes Angular opinionated. But that is not necessarily a bad thing. These practices help to keep the codebase similar and easy to understand by others. The framework itself is bundled with tons of features that we as developers can leverage to create almost everything we need ⚔️

I personally…

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