A new syntax for Angular templates

Younes
Younes
Mar 12, 2019 · 4 min read

Angular Templates & Time To First Commit

One of my favorite things about Angular is how the template is just a simple HTML file.

Tired of Importing Modules

Now, the thing that I don’t like that much about Angular is how the template is just a simple HTML file. Wait wait wait! Let me try to explain!

To interpret the content of a template, the runtime needs to know what component and directives to apply to the element and what pipes are referenced by binding expressions. The list of candidate components, directives and pipes are determined by the NgModule in which the component is declared.

The official and complete explanation is here: https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md#the-selector-problem

Which Module Should I Import Again?

A while ago, I was explaining reactive forms during a training so I wrote this:

<form [formGroup]="sandwichForm">
...

How did you know which module you should import?

That’s when I realized that for someone very new to Angular, this was not intuitive at all. That’s also when I noticed that the related question on stackoverflow had more than 300 000 views.

Ng VDom

I started thinking about a new way of writing Angular templates so I stumbled upon this brilliant initiative called Ng-VDom.

Ng VDom

A New Way of Writing Templates

That’s when I got inspiration from htm which stands for Hyperscript Tagged Markup.
I liked how it was simply using standard tagged templates so I came up with the ngMarkup tagged template which works like this:

Image for post
Image for post
ngMarkup
  • Up is an Angular pipe.

What’s Next?

Surviving AOT

The current implementation doesn’t survive AOT as it would need a pre-compiler or upgrading IVY compiler: ngtsc.

Getting rid of explicit ngModule declarations & exports

As you can see in the given example’s source code, the components, directives, and pipes are still explicitly declared or imported in AppModule.

Feedback

I am really looking forward to hearing from any feedback about this kind of syntax.

IDEs To The Rescue

Luckily, lately, I was explaining the exact same thing and the error didn’t happen.

Image for post
Image for post
WebStorm Auto-Import Angular Module
Image for post
Image for post
WebStorm Auto-Import Angular Module

Marmicode

At Marmicode, we use our passion and experience in Web…

Younes

Written by

Younes

Google Developer Expert for Angular & Web Technologies | eXtreme Programming Coach | Tech Advisor

Marmicode

Marmicode

At Marmicode, we use our passion and experience in Web Development & eXtreme Programming to help you cook better apps, ship them fast and make you proud of your work. #javascript #python #angular #continuousdeployment

Younes

Written by

Younes

Google Developer Expert for Angular & Web Technologies | eXtreme Programming Coach | Tech Advisor

Marmicode

Marmicode

At Marmicode, we use our passion and experience in Web Development & eXtreme Programming to help you cook better apps, ship them fast and make you proud of your work. #javascript #python #angular #continuousdeployment

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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