With Pug, your templates become simpler to write and read and you can extend the functionality of your template as an added bonus. In the rest of this article, I’ll walk you through how to use Pug in your Angular component templates. For most elements you have to have an opening and closing tag which is not DRY. Not only do you have to write more with HTML, but you also have to read more. With Pug, there are no opening and closing angle brackets and no closing tags.

You are therefore writing and reading a lot less code. This is how that same table looks like in Pug: tableĬomparing the two versions of the table, Pug looks a lot cleaner than HTML and has better code readability. Although negligible in this small example, you write seven fewer lines in the Pug table than in the HTML table. #Render pug template code#Īs you create more templates over time for a project, you end up cumulatively writing less code with Pug.īeyond the functionality provided by the Angular template language, Pug extends what you can achieve in your templates. With features (such as mixins, text and attribute interpolation, conditionals, iterators, and so on), you can use Pug to solve problems more simply in contrast to writing whole separate components or import dependencies and set up directives to fulfill a requirement. Pug offers a wide range of features but what features you can use depends on how you integrate Pug into your project.

Is there a newspaper template on google docs.Here are a few features you might find useful.

Pug template tabs