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!
“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.
“The cheapest, fastest, and most reliable components are those that aren’t there.” — Gordon Bell
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.
Polling is simply a technical term used…
“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.
We are going to take the following steps to achieve this.
<div>) and attach to the document when the directive is…
“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. …
“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.
“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…
“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.
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
Let’s get to it
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!
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. …
“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 ⚔️