With more than a billion monthly users, Google Maps is one of the most used/known applications. Since Angular version 9, it’s also available as an Angular component.

At the time of writing this article, the docs on the official @angular/google-maps repo are very minimalistic. The reason for that is that @angular/google-maps is just an Angular wrapper of the official GoogleMaps. To implement features you often have to consult the official Google Maps API docs.

Some developers I talked to found this confusing. Some of them felt lost when implementing a feature that uses Google Maps in Angular.

Lately, I myself…

Here’s what you should know going into an interview

Angular is one of the most known and powerful modern JavaScript frameworks on the market. It can be used to develop all kinds of applications. But, developing complex business applications is where Angular really shines.

Therefore, it’s not surprising that many companies bet on Angular. Since you are reading this article, the company you want to work for in the future probably also relies on Angular.

Maybe, you are new to Angular, or maybe you already have some experience with it. In any case, you want to be prepared for that interview. …

Explore the magic behind the asterisk

Angular provides a couple of built-in directives. But not all of them are applied in the same way. ngClass for example, is applied like a normal HTML attribute. Structural directives like *ngIf or *ngFor on the other hand, are used with a leading asterisk (*).

It’s this asterisk we want to talk about in this blog post. What is it doing under the hood?

Let’s find out by implementing our own ngIf implementation: The myNgIf directive!


— behaves like ngIf but has a cooler name 😉

MyNgIf at its core, is just a normal directive with the attribute directive selector…

How to create your own FontAwesome. Ship SVG icons optimized for tree shakers and splittable across multiple bundles.

Don’t let the title fool you; building an icon library in a tree-shakable way is hard, very hard. If you make it from scratch, it’s impossible to do it in the mentioned time. But, here’s the good news. We already did the hard work for you.

I took everything I learned while building icon libraries for big companies and wrote a whole open-source tool suite so that you, with the help of this blog post, can build your own performant SVG icon library in less than 30 minutes. Sounds good? Let’s get started.

🤫 Everything described in this blog post…

How to generate a frontend and backend application with 5 commands

Offering many out of the box solutions for complex use-cases, Angular is one of the best frameworks for developing single-page applications. Another great thing about Angular is that it’s very opinionated about architecture. This is especially important for bigger development teams since it facilitates the on-boarding of new members and communication between different teams throughout an organization.

The Angular CLI (command line interface) is another amazing tool. It allows us to scaffold an entire Angular application with one command and perform common tasks such as extending, linting, testing, and building our application.

Nest JS, on the other hand, is a…

How to bridge the gap between the timing of function calls and Observables

Asynchronous code is hard! It’s hard to write and to test.

RxJs has changed the way we think about asynchrony. Instead of using Promises, we nowadays deal with streams in the form of Observables or Subjects. RxJs provides us with many out of the box operators to create, merge, or transform streams.

But we do not only get great tools for runtime code, but we also get amazing tools to test streams.

Marble diagrams are a great way of modeling streams. They are used throughout many tutorials and can now also be used in tests to assert streams.

In case…

Get an overview of all the essentials required to be productive in a modern front-end-end stack. Find the correct path and kickstart your career!

Front-end-end development is booming! Nowadays, almost every business owns a web application. Web applications ease continuous delivery and support multiple devices, an important aspect of IoT (Internet of things).

For a long, JavaScript was not considered a serious programming language by many enterprise developers. Often it was seen as a “script kiddy” language. With the new requirements, JavaScript has evolved a lot. Modern front-end development contains much more than classic web development with just HTML, CSS, and JavaScript.

In the past, we were building rich servers with thin clients. …

Angular schematics to split your library into multiple chunks with ng-packagr’s subentries

Angular libraries are a great way for open source projects or companies to share code across multiple applications.

Thanks to the Angular CLI, creating a library is easy. However, by default, your library may not be as tree shakable as you might think. In most cases, this is not a big deal, but sometimes, it can have a considerable impact on consumer’s performance. In other words, your library can slow the (initial load) of an application.

This happens mainly when your library includes third party libraries packaged in another format then ESModules like moment for example.

If you are not…

Kevin Kreuzer

Passionate freelance frontend engineer. ❤️ Always eager to learn, share and expand knowledge.

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