How To Run The Right Kind Of Research Study With The Double-Diamond Model

How To Run The Right Kind Of Research Study With The Double-Diamond Model

How To Run The Right Kind Of Research Study With The Double-Diamond Model

Steve Bromley

2020-05-29T10:00:00+00:00 2020-05-29T21:08:33+00:00

Product and design teams make a lot of decisions. Early on in the development of a product, they will be thinking about features — such as what the product should do, and how each feature should work. Later on, those decisions become more nuanced — such as ‘what should this button say? Each decision introduces an element of risk — if a bad decision is made, it will reduce the chance for the product to be successful.

The people making these decisions rely on a variety of information sources to improve the quality of their decision This includes intuition, an understanding of the market, as well as an understanding of user behavior. Of these, the most valuable source of information to put evidence behind decisions is understanding our users.

Being armed with an understanding of the appropriate user research methods can be very valuable when developing new products. This article will cover some appropriate methods and advice on when to deploy them.

A Process For Developing Successful Products

The double diamond is a model created by the UK’s Design Council which describes a process for making successful products. It describes taking time to understand a domain, picking the right problem to solve, and then exploring potential ideas in that space. This should prove that the product is solving real problems for users and that the implementation of the product works for users.

Diagram showing the design council’s Double Diamond model
The design council’s Double Diamond model (Large preview)

To succeed at each stage of the process requires understanding some information about your users. Some of the information we might want to understand from users when going through the process is as follows:

The double diamond image with user research questions linked to each phase
Some research questions appropriate for each stage (Large preview)

Each stage has some user research methods that are best suited to uncovering that information. In this article, we’ll refer to the double diamond to highlight the appropriate research method throughout product development.

Diamond 1: Exploring The Problem And Deciding What To Fix

The first diamond describes how to come up with a suitable problem that a new product or feature should fix. It requires understanding what problems users have, and prioritizing them to focus on a high-value area. This avoids the risk of building something that no-one is going to use.

The most effective way of understanding the problem is to get true first-hand experience of users performing real tasks in context. This is best done by applying ethnographic and observational methods to identify the range of problems that exist, then prioritizing them using methods such as surveys.

Double Diamond PhaseAppropriate MethodWhy?
Explore the problemEthnographic and Observational studiesGives deep insight into what problems people have that can inspire product decisions
Decide what to fixSurveysDiscovers how representative problems are, and helps prioritise them

We’ll review each method, in turn, to describe why it’s appropriate.

Explore The Problem With Ethnographic And Observational Methods

The first phase of the double diamond is to ‘explore the problem’. User research can build up an understanding of how people act in the real world and the problems they face. This allows the problem space to be fully explored.

The double diamond image with ‘Explore the problem’ highlighted
Explore the problem (Large preview)

This valuable behavioral information is only uncovered only by watching people do real tasks and asking them questions to uncover their motivations and issues. Doing early qualitative research will help identify the problems that people have. These problems can inspire product ideas, features, and help teams understand how to successfully solve user’s problems. This information will also help disregard poor product ideas by revealing that there is no real need for it. This leads to a more useful product being developed and increasing the chance of success.

The most appropriate methods for doing this are ethnographic. This can include diary studies, where a user’s interaction with the subject matter is captured over a number of weeks. This reveals issues that wouldn’t turn up in a single session or that people wouldn’t remember to talk about in a lab-based interview.

This isn’t the only way of uncovering this kind of in-depth information though. Other suitable observational methods include watching people use existing software or products, both in the lab or in the wild. These are quicker and easier to run than diary studies, but are limited to only capturing a single interaction or what the participant will remember when prompted. For some subject matters, this might be enough (e.g. navigating an online shop can be done and explored in a single session). More complex interactions over time, such as behavior with fitness trackers, would be more sensible to track as a diary study.

Decide What To Fix With Surveys

The second half of the first diamond comes next. Having understood real user’s contexts and what problems they have, these can then be documented and prioritized to ‘decide what to fix’.

The double diamond image with ‘Decide what to fix’ highlighted
Decide what to fix (Large preview)

This prioritization will be done by product managers who take into account many factors, such as “what do we have the technical ability to do” and “what meets our business goals”. However, user research can also add valuable information by uncovering the size of the issues users have. Surveys are a sensible approach for this, informed by the true understanding of user behavior uncovered in the earlier studies. This allows teams to size the uncovered issues and reveal how representative the behaviors discovered are.

Combining quantitative methods with generative user research studies help inspire early decisions about what a product should do. For example, Spotify’s discovery work on how people consume music analyzed primary research fieldwork to create personas and inform their development work. This allows a team to complete the first diamond with a clear understanding of what problem their product is trying to solve.

Diamond 2: Test And Refine Potential Solutions

The second diamond describes how to end up on a successful implementation of a product to fix the problem. Having decided which problem to fix, research can then explore different ways of fixing that problem, and help refine the best method.

Double Diamond PhaseAppropriate MethodWhy?
Test potential solutionsModerated usability testingCreates a deep understanding of why the solution works, to inform iteration
Refine final solutionUnmoderated usability testingCan get quick results on small questions, such as with the UI

Test Potential Solutions With Moderated Usability Testing

The second diamond in the double diamond design process starts with evaluating a variety of solutions in order to decide the best possible implementation of a product. To achieve this with rigor requires usability testing — creating representative prototypes and then observing if users can successfully complete tasks using them.

The double diamond image with ‘Test Potential Solutions’ highlighted
Test potential solutions (Large preview)

This kind of study takes time to do properly, and attention on each individual’s user experience to understand what causes the behavior that is observed during usability testing. A moderated session, with the researcher present, can ask probing questions to uncover things that participants won’t articulate unprompted such as “what are you thinking currently” or “ why did you decide to do that?”. These kinds of studies reveal more data when a moderator is able to ask participants these questions, and avoids missing the opportunity to gather more data from each study, which can be used to evaluate and iterate the product. A single moderated research session potentially reveals more useful information than a series of unmoderated tests.

This kind of in-depth exploration of the problem has been a key part of AirBNB’s early success. In 2009 the company was close to bankruptcy and desperate to understand why people were not booking rooms. By spending time with users reviewing the ads on their website, they were able to uncover that the pictures were the problem. This then allowed them to focus their iteration on the process for gathering photos of rooms, which put them on the path for changing hotel booking forever. As the global pandemic changes people’s behavior with holidays in the future, in-depth qualitative research will be essential as they continue to adapt to new challenges.

This doesn’t mean that the moderator has to be in the same room as the participant. Often it can be very valuable to find participants who are geographically remote, and avoid over-sampling people who live in major cities, which is often where research teams are based. Screen sharing software, such as google hangouts or zoom can make remote sessions possible, while still having the session run live with a moderator.

Refine Final Solution With Unmoderated Usability Testing

The final stage of the double diamond describes refining the final solution, which can require a lot of small iterative tests. A shortcut to the deep insight from moderated testing is remote unmoderated research. This includes tools like which allow teams to put their software in front of users with little effort. By sending a website URL to their panel of users, they send back videos of their participants using the website and commenting on their experience.

The double diamond image with ‘Refine final solution’ highlighted
Refine final solution (Large preview)

This method can be popular because it is quick (multiple sessions can run simultaneously without a moderator present) and cheap (participants aren’t paid a huge amount to take part). Because of this, it is often considered an appropriate tool by companies looking to start doing user research, however, care needs to be taken.

This method has constraints which means that it’s only sensible for later on in the design process. Because the participants on these kinds of websites are all people who test multiple websites regularly, they become increasingly different to a normal user. This changes their behavior while using websites and makes it dangerous to draw conclusions from their behavior about what other users would understand or do. This is called a sampling bias — creating a difference between ‘real’ users, and the users being tested.

Because of these risks, these studies may be most appropriate late in development, testing content or UI changes, when the risks of getting decisions wrong are much lower. Iterative studies ensure that users understand what has been created, and are able to use it in the way the designer intended. An example of this is the iterative usability testing the UK’s Government Digital Service ran to ensure citizens could successfully identify themselves and access government services.

After The Double Diamond

As we’ve covered, it is important to select the right method to de-risk product decisions before launch. When a product is launched, it will be immediately obvious whether there is an audience for it, and whether people understand and can use the product — both through how well the product sells, and through reviews and customer feedback.

The double diamond image with ‘Solution delivered’ highlighted
After the double diamond (Large preview)

Nevertheless, launching the right product doesn’t mean that the opportunity for research is over. New opportunities to explore real user behavior will continue to inspire adding or removing features, or changes to how the product works.

Double Diamond PhaseAppropriate MethodWhy?
Solution deliveredAnalytics + moderated usability testing combinedInform future updates post-launch with qualitative and quantitative insight.

Combining some of the methods we’ve described previously with new data from analytics will continue to drive high-quality decision making.

Research After The Solution Is Delivered With Analytics

Post-launch analytics are an important part of building a complete understanding of the behavior of users.

Analytics will reveal what people are doing on a website. However, this information is most valuable when combined with understanding why that behavior is occurring. It is also important to be aware that analytics are only seeing a short section of a user’s experience, the part that happens on your website and their whole end-to-end journey also includes a lot of things that happened off the site, or in the real world. Building a research strategy that combines insight from analytics with an understanding of motivations from qualitative studies is a powerful combination to inform decision making.

This requires close collaboration between the analytics team and the user research team — regular community events, skills sharing and project updates will create awareness of the priorities of each team, the type of research questions they can support one another with and identify opportunities to work together, leading to a stronger combined team.

Optimize Your Research Process

In this article, we’ve covered some appropriate methods to use to inform product development. However, there can still be resistance to running the right kind of study.

New research teams may be asked to cut corners. This can include suggesting participants who are convenient, such as friends, without taking the time to screen them to ensure they represent real users. This can be suggested by colleagues who are unaware of the risks caused by taking decisions based on unrepresentative research.

In addition to running research studies, a researcher has to be an educator and advocate for running the right kind of studies and help their colleagues understand the differences in quality between the type of information gathered from different research methods. Presentations, roadshows, and creating posters are some techniques that can help achieve this.

Incorporating user research into decision making can be quite radical at some organizations, particularly those with a history of deferring to client wishes or listening to the highest-paid person in the room. A lot of hard work and creativity are needed to bring about change in how people work. This requires understanding the decision maker’s current incentives, and describing the benefits of research in a way that shows how it makes their life easier.

If an organization understands and accepts why running studies using appropriate methods it shows a real desire for improving the quality of decision making within the organization. This is an encouraging sign that a new research team has the potential to be successful.

The next step for new researchers will be to establish the logistics of running research, including creating a research process, building out the tools and software needed, and identifying the highest priority research questions for your organization. There is a lot of great guidance from the research community on techniques to do this, for example, the work being done by the research ops community.

Smashing Editorial (ah, ra, il)

Japan Is a Enticing Market for Cross-border Ecommerce

Japan is the world’s third-largest ecommerce market following China and the United States. However, it is often overlooked by foreign online merchants because of an unusually low cross-border purchase rate and a somewhat insular approach to online shopping.

Only 10 percent of Japanese consumers buy goods on foreign websites. Nevertheless, with a population of 126.5 million, a 93-percent internet penetration rate, and 75 percent of those making purchases online, Japan is an enticing market for cross-border online sellers.

Research firm Statista anticipates that Japanese ecommerce sales in 2020 will amount to approximately $100 billion, a diminished estimate due to global economic changes. An unpopular sales tax increase in 2019 is also dampening consumer spending.

After a contraction in the last quarter of 2019, the Japanese economy continued to shrink in the first quarter of 2020. Japanese consumers, once considered extremely brand-loyal, are now more cost-conscious and showing an increasing willingness to try new brands in their quest for bargains.

Japanese Online Consumers

  • Most Japanese do not read English or other foreign languages and buy only from Japanese language sites.
  • Japanese consumers prefer detailed information about the product they are considering.
  • Forty-four percent use price comparison sites.
  • Japanese consumers are avid mobile users. More than half of online purchases are on a mobile device.
  • While credit cards are the payment method for most online sales, the Konbini cash convenience-store-payment system is also popular, with 50,000 locations across the country. Locally-issued credit cards are much more popular than Western-brand cards.

Japan is home to a rapidly aging population, but seniors use the internet at a level similar to younger persons. Japan is losing people because of a low fertility rate, so targeting the older population — which comprises 28 percent of the total population — makes sense.

Revenue opportunities exist for those merchants who can address the needs of older consumers. For instance, prepared meals are a $20 million and rapidly growing market with growth attributable mostly to seniors, according to Statista. The Covid-19 pandemic has contributed to a spurt in online sales by this vulnerable segment.


Three marketplace platforms — Rakuten, Amazon, and Yahoo Shopping — account for over one-third of online transactions in Japan. Rakuten and Yahoo Shopping require non-American foreign companies that wish to create accounts to start a local company or work with a local intermediary on their behalf.

Rakuten. Japan’s largest marketplace in revenue has more than 100 million members and is strongest in fashion and food. American brands that sell on Rakuten’s platform have their own storefront and product listings. They can also advertise via sponsored product listings and leverage other advertising features on Rakuten, such as coupons, newsletter ads, and banner ads. Rakuten has its own fulfillment service called Rakuten Super Logistics.

Amazon Japan ranks first in site visits and sales. It provides a relatively easy way for foreign merchants with an Amazon seller’s account to market products directly to Japanese consumers. Amazon requires that all sellers provide customer support in Japanese. Amazon handles fulfillment from Japan, but companies must have a Japanese company as an importer of record to deal with customs.

Yahoo Japan Shopping is the ecommerce arm of the diversified web portal of Yahoo Japan, which is owned by Softbank and Alibaba and is separate from its American parent. Yahoo Japan Shopping provides a wide range of products, including cosmetics, electronics, apparel and footwear, home equipment, and furniture.

Zozotown is an offshoot of a mail-order company, Start Today. It is the largest specialized fashion and footwear ecommerce platform and offers products from many local and international brands. Yahoo Japan acquired a majority stake in Zozotown in 2019.

Qoo10. This online marketplace has a broad portfolio of products in fashion, beauty, sports, digital, mobile, home living, life, food, baby, entertainment, and books, Operated as a joint venture with eBay, Qoo10 also sells in other Asian markets and is especially strong in Korea and Singapore.

Wowma was founded by KDDI, one of Japan’s largest mobile phone providers. The site offers more than 20 million products, including cosmetics, decorations, clothing, electronics, and personal care services.

C2C marketplaces. Japan has a thriving consumer-to-consumer market that has significantly expanded in the last few years. It consists of second-hand marketplaces and online auction sites. The two major players are Mercari, which operates via a downloadable application, and Yahoo Auctions. Rakuma is a C2C flea market application owned by Rakuten.

How To Create Better Angular Templates With Pug

How To Create Better Angular Templates With Pug

How To Create Better Angular Templates With Pug

Zara Cooper

2020-05-28T11:00:00+00:00 2020-05-28T18:07:28+00:00

As a developer, I appreciate how Angular apps are structured and the many options the Angular CLI makes available to configure them. Components provide an amazing means to structure views, facilitate code reusability, interpolation, data binding, and other business logic for views.

Angular CLI supports multiple built-in CSS preprocessor options for component styling like Sass/SCSS, LESS, and Stylus. However, when it comes to templates, only two options are available: HTML and SVG. This is in spite of many more efficient options such as Pug, Slim, HAML among others being in existence.

In this article, I’ll cover how you — as an Angular developer — can use Pug to write better templates more efficiently. You’ll learn how to install Pug in your Angular apps and transition existing apps that use HTML to use Pug.

Managing Image Breakpoints

A built-in Angular feature called BreakPoint Observer gives us a powerful interface for dealing with responsive images. Read more about a service that allows us to serve, transform and manage images in the cloud. Learn more →

Pug (formerly known as Jade) is a template engine. This means it’s a tool that generates documents from templates that integrate some specified data. In this case, Pug is used to write templates that are compiled into functions that take in data and render HTML documents.

In addition to providing a more streamlined way to write templates, it offers a number of valuable features that go beyond just template writing like mixins that facilitate code reusability, enable embedding of JavaScript code, provide iterators, conditionals, and so on.

Although HTML is universally used by many and works adequately in templates, it is not DRY and can get pretty difficult to read, write, and maintain especially with larger component templates. That’s where Pug comes in. 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.

Why You Should Use Pug

HTML is fundamentally repetitive. 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.

For example, here’s an HTML table:

<table> <thead> <tr> <th>Country</th> <th>Capital</th> <th>Population</th> <th>Currency</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>Ottawa</td> <td>37.59 million</td> <td>Canadian Dollar</td> </tr> <tr> <td>South Africa</td> <td>Cape Town, Pretoria, Bloemfontein</td> <td>57.78 million</td> <td>South African Rand</td> </tr> <tr> <td>United Kingdom</td> <td>London</td> <td>66.65 million</td> <td>Pound Sterling</td> </tr> </tbody>

This is how that same table looks like in Pug:

table thead tr th Country th Capital(s) th Population th Currency tbody tr td Canada td Ottawa td 37.59 million td Canadian Dollar tr td South Africa td Cape Town, Pretoria, Bloemfontein td 57.78 million td South African Rand tr td United Kingdom td London td 66.65 million td Pound Sterling

Comparing 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. As you create more templates over time for a project, you end up cumulatively writing less code with Pug.

Beyond 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.

Some Features Of Pug

Pug offers a wide range of features but what features you can use depends on how you integrate Pug into your project. Here are a few features you might find useful.

  1. Adding external Pug files to a template using include.

    Let’s say, for example, that you’d like to have a more succinct template but do not feel the need to create additional components. You can take out sections from a template and put them in partial templates then include them back into the original template.

    For example, in this home page component, the ‘About’ and ‘Services’ section are in external files and are included in the home page component.

    //- home.component.pug
    h1 Leone and Sons
    h2 Photography Studio include partials/about.partial.pug
    include partials/services.partial.pug
    //- about.partial.pug
    h2 About our business
    p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    //- services.partial.pug
    h2 Services we offer
    P Our services include: ul li Headshots li Corporate Event Photography
    HTML render of included partial templates example
    HTML render of included partial templates example (Large preview)
  2. Reusing code blocks using mixins.

    For example, let’s say you wanted to reuse a code block to create some buttons. You’d reuse that block of code using a mixin.

    mixin menu-button(text, action) button.btn.btn-sm.m-1(‘(click)’=action)&attributes(attributes)= text +menu-button('Save', 'saveItem()')(class="btn-outline-success")
    +menu-button('Update', 'updateItem()')(class="btn-outline-primary")
    +menu-button('Delete', 'deleteItem()')(class="btn-outline-danger")
    HTML render of menu buttons mixin example
    HTML render of menu buttons mixin example (Large preview)
  3. Conditionals make it easy to display code blocks and comments based on whether a condition is met or not.
    - var day = (new Date()).getDay() if day == 0 p We’re closed on Sundays
    else if day == 6 p We’re open from 9AM to 1PM
    else p We’re open from 9AM to 5PM
    HTML render of conditionals example
    HTML render of conditionals example (Large preview)
  4. Iterators such as each and while provide iteration functionality.
    ul each item in ['Eggs', 'Milk', 'Cheese'] li= item ul while n < 5 li= n++ + ' bottles of milk on the wall'
    HTML renders of iterators example
    (Large preview)
    HTML renders of iterators example
    HTML renders of iterators example (Large preview)
  5. Inline JavaScript can be written in Pug templates as demonstrated in the examples above.
  6. Interpolation is possible and extends to tags and attributes.
    - var name = 'Charles'
    p Hi! I’m #{name}. p I’m a #[strong web developer]. a(href='${name}') Get to Know Me
    HTML render of interpolation example
    HTML render of interpolation example (Large preview)
  7. Filters enable the use of other languages in Pug templates.

    For example, you can use Markdown in your Pug templates after installing a JSTransformer Markdown module.

    :markdown-it # Charles the Web Developer ![Image of Charles]( ## About Charles has been a web developer for 20 years at **Charles and Co Consulting.**
    HTML render of filter example
    HTML render of filter example (Large preview)

These are just a few features offered by Pug. You can find a more expansive list of features in Pug’s documentation.

How To Use Pug In An Angular App

For both new and pre-existing apps using Angular CLI 6 and above, you will need to install ng-cli-pug-loader. It’s an Angular CLI loader for Pug templates.

For New Components And Projects

  1. Install ng-cli-pug-loader.
    ng add ng-cli-pug-loader
  2. Generate your component according to your preferences.

    For example, let’s say we’re generating a home page component:

    ng g c home --style css -m app
  3. Change the HTML file extension, .html to a Pug extension, .pug. Since the initial generated file contains HTML, you may choose to delete its contents and start anew with Pug instead. However, HTML can still function in Pug templates so you can leave it as is.
  4. Change the extension of the template to .pug in the component decorator.
    @Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css']

For Existing Components And Projects

  1. Install ng-cli-pug-loader.
    ng add ng-cli-pug-loader
  2. Install the html2pug CLI tool. This tool will help you convert your HTML templates to Pug.
    npm install -g html2pug
  3. To convert a HTML file to Pug, run:
    html2pug -f -c  [Pug file path]

    Since we’re working with HTML templates and not complete HTML files, we need to pass the -f to indicate to html2pug that it should not wrap the templates it generates in html and body tags. The -c flag lets html2pug know that attributes of elements should be separated with commas during conversion. I will cover why this is important below.

  4. Change the extension of the template to .pug in the component decorator as described in the For New Components and Projects section.
  5. Run the server to check that there are no problems with how the Pug template is rendered.

    If there are problems, use the HTML template as a reference to figure out what could have caused the problem. This could sometimes be an indenting issue or an unquoted attribute, although rare. Once you are satisfied with how the Pug template is rendered, delete the HTML file.

Things To Consider When Migrating From HTML To Pug Templates

You won’t be able to use inline Pug templates with ng-cli-pug-loader. This only renders Pug files and does not render inline templates defined in component decorators. So all existing templates need to be external files. If you have any inline HTML templates, create external HTML files for them and convert them to Pug using html2pug.

Once converted, you may need to fix templates that use binding and attribute directives. ng-cli-pug-loader requires that bound attribute names in Angular be enclosed in single or double quotes or separated by commas. The easiest way to go about this would be to use the -c flag with html2pug. However, this only fixes the issues with elements that have multiple attributes. For elements with single attributes just use quotes.

A lot of the setup described here can be automated using a task runner or a script or a custom Angular schematic for large scale conversions if you choose to create one. If you have a few templates and would like to do an incremental conversion, it would be better to just convert one file at a time.

Angular Template Language Syntax In Pug Templates

For the most part, Angular template language syntax remains unchanged in a Pug template, however, when it comes to binding and some directives (as described above), you need to use quotes and commas since (), [], and [()] interfere with the compilation of Pug templates. Here are a few examples:

//- [src], an attribute binding and [style.border], a style binding are separated using a comma. Use this approach when you have multiple attributes for the element, where one or more is using binding.
img([src]='itemImageUrl', [style.border]='imageBorder') //- (click), an event binding needs to be enclosed in either single or double quotes. Use this approach for elements with just one attribute.
button('(click)'='onSave($event)') Save

Attribute directives like ngClass, ngStyle, and ngModel must be put in quotes. Structural directives like *ngIf, *ngFor, *ngSwitchCase, and *ngSwitchDefault also need to be put in quotes or used with commas. Template reference variables ( e.g. #var ) do not interfere with Pug template compilation and hence do not need quotes or commas. Template expressions surrounded in {{ }} remain unaffected.

Drawbacks And Trade-offs Of Using Pug In Angular Templates

Even though Pug is convenient and improves workflows, there are some drawbacks to using it and some trade-offs that need to be considered when using ng-cli-pug-loader.

Files cannot be included in templates using include unless they end in .partial.pug or .include.pug or are called mixins.pug. In addition to this, template inheritance does not work with ng-cli-pug-loader and as a result, using blocks, prepending, and appending Pug code is not possible despite this being a useful Pug feature.

Pug files have to be created manually as Angular CLI only generates components with HTML templates. You will need to delete the generated HTML file and create a Pug file or just change the HTML file extension, then change the templateUrl in the component decorator. Although this can be automated using a script, a schematic, or a Task Runner, you have to implement the solution.

In larger pre-existing Angular projects, switching from HTML templates to Pug ones involves a lot of work and complexity in some cases. Making the switch will lead to a lot of breaking code that needs to be fixed file by file or automatically using a custom tool. Bindings and some Angular directives in elements need to be quoted or separated with commas.

Developers unfamiliar with Pug have to learn the syntax first before incorporating it into a project. Pug is not just HTML without angle brackets and closing tags and involves a learning curve.

When writing Pug and using its features in Angular templates ng-cli-pug-loader does not give Pug templates access to the component’s properties. As a result, these properties cannot be used as variables, in conditionals, in iterators, and in inline code. Angular directives and template expressions also do not have access to Pug variables. For example, with Pug variables:

//- app.component.pug
- var shoppingList = ['Eggs', 'Milk', 'Flour'] //- will work
ul each item in shoppingList li= item //- will not work because shoppingList is a Pug variable
ul li(*ngFor="let item of shoppingList") {{item}}

Here’s an example with a property of a component:

//- src/app/app.component.ts
export class AppComponent{ shoppingList = ['Eggs', 'Milk', 'Flour'];
//- app.component.pug //- will not work because shoppingList is a component property and not a Pug variable
ul each item in shoppingList li= item //- will work because shoppingList is a property of the component
ul li(*ngFor="let item of shoppingList") {{item}}

Lastly, index.html cannot be a Pug template. ng-cli-pug-loader does not support this.


Pug can be an amazing resource to use in Angular apps but it does require some investment to learn and integrate into a new or pre-existing project. If you’re up for the challenge, you can take a look at Pug’s documentation to learn more about its syntax and add it to your projects. Although ng-cli-pug-loader is a great tool, it can be lacking in some areas. To tailor how Pug will work in your project consider creating an Angular schematic that will meet your project’s requirements.

Smashing Editorial (ra, yk, il)