When working in Angular we are accustomed to working with observables and pipes in our day-to-day, but from time to time we are experiencing a lot of code duplication, we use the same operators in order to attain a similar UI and UX feel of our application.

Let's use a search bar for our example since it is easy to understand and we know what to expect from the outcome.

if we had to write down the classic way it would look something like this:

A simple way to write a search pipe

This is probably the most common way to create the logic of a search input…

Today I will deep dive into another commonly used Angular directive called NgClass, like others (ngIf, ngFor, and ngStyle), we use them without a second thought of what black magic is going under the hood. Let's check it out.

All valid options to pass to the ngClass directive

ngClass, similar to ngIf and ngFor, is actually a setter that takes the data given to it and starts to build the class list for the element it is placed on, with the help of ElementRef (a reference to the HTML element we are currently on) and Renderer2 (Which is a wrapper of browser API functions for DOM manipulation).

Welcome to my second publication of “The ins and outs of Angular” where I deep dive into Angular’s codebase to learn and show what Angular is doing for us behind the scenes that make Angular so great. Today is all about *ngFor, one of the most common directives used.

The Angular definition: “ A [structural directive] that renders a template for each item in a collection. The directive is placed on an element, which becomes the parent of the cloned templates.” In simple terms, the directives take an array of any ( objects, numbers, and even nulls) and render the…

This is my first post in a series called “The in and outs of Angular”. Today we will talk about the structural directive *ngIf

Although we all know how to use *ngIf/[ngIf] lets take a second to go over Angular’s definition of it,
A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean.
So in basic terms ngIf is a simple directive that will render in run time by the condition value. So how does this work in actual run time ?

A basic implementation of ngIf

ngIf is actually a setter (link). once a new…

I have been working with Angular since about version 2.0.0 , from small applications, IOS/Android ones, to large scale enterprise level applications. I love Angular and that’s why I always justified using it, but it wasn’t since lately working with an abnormally large team, where I deeply understood the implications of bad Angular and smart Angular coding. Architecture wise all my apps probably look the same, thanks to Angular’s opinionated , very… , way of work, which forces us, it’s users to code in a very specific way. So whats the difference ? why did I my team suffer …

Building an Angular app with scale in mind is tricky. We are already accustomed to lazy loading routes and by that decreasing bundle size and decreasing initial load times and letting the user interact with our web/app quicker.
With in time our Web-App will have to do more and more, which will effect the page load time and this can become extremely noticeable when building very large and dynamic forms with dynamic changing parts. …

Choosing A UI Framework — Angular 8.0

Starting with a new project is fun, easy and extremely confusing. SO many dashboards, some free some are worth paying for. But no, you want to choose the UI library on your own. That’s cool.

I have built many websites and dashboards with a lot of different “best” UI kits ( with Angular and Vue). Each library promises the best components with the most seamless mobile friendly animations and etc… So confusing, so much looks the same, why choose one over another. …

Ionic is a framework we all have heard of at some point in our development life cycle. In simple terms, Ionic takes our js code (typescript transpiled ) and puts it into a web-view with ability to access some native apis for mobile devices, which we can upload to the Apple store/ Google play store. Mobile app stores take a look at our code and check for code that may be harmful or disregard any of the stores' rules and regulations. Which makes SSR for mobile apps, well, very counter-intuitive and hard.

Honestly, this workaround was forced by a requirement…

jQuery is still a major part of web development, currently, there are around 800k active websites using it in some manner (link). Even though early developers stray away from learning it, in a lot of jobs and projects there may be a requirement to have some sort of knowledge regarding jQuery and how to use it. In the blooming era of web development, Angular introduced us to a growing trend, web-components, in which it will be easy and simple to add Angular projects to an existing non-Angular project, jQuery project or even other client-side frameworks projects, a sort of plug…

“But HOW???, WHY?? … why won’t you just do that instead? “

A junior web developer who just got his ( her’s ) first job in the real world, is going to have the most confused look on their face for a long time. The product is more complexed than it looks, the code is a mixture of legacy code and cutting edge technologies in which Stackoverflow doesn’t have all the answers yet, and the bosses are expecting way to much. Overwhelmed is an understatement. So what can a junior developer do to help himself (herself)?

Looking for patterns —…

Ryan Hoffnan

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