How do I loop through an array in a template?

Question

I am using Angular's schematics in a project.

I have an array of numbers: const numbers = [1, 2, 3, 4, 5]

And I want to print them out in an HTML template. I am passing the array in the following way:

export function schematics(_options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const numbers = [1, 2, 3, 4, 5];

    const sourceTemplate = url('./files');
    const sourceParametrizedTemplate = apply(sourceTemplate, [
      template({
        ..._options,
        ...strings,
        numbers
      })
    ]);

    return mergeWith(sourceParametrizedTemplate)(tree, _context);
  };
}

I was thinking about doing something like this:

index.html

<h1>Numbers</h1>

  <%= for(let n in numbers) { =>

  <p><%= n %></p>

  <%= } %>

But I get the error SyntaxError: Unexpected token for.

Does anyone know what is the correct way of achieving it? I was not able to find it in the documentation.

Thank you!

That looks like classic asp or maybe asp.net template code. What does that have to do with angular? — Igor
– Igor, Commented Sep 10, 2019 at 19:17
I am using Angular's Schematics. I am going to make it clearer, thank you. — Leandro
– Leandro, Commented Sep 10, 2019 at 19:18

Leandro · Accepted Answer · 2019-09-10 20:32:32Z

6

I finally found it! I had to use <% instead of <%= in the blocks with logic.

<%= should only be used for blocks that you want to display.

Final version:

<h1>Numbers</h1>

  <% for(let n in numbers) { =>

  <p><%= n %></p>

  <% } %>

By the way, the result I was looking for I got it using for ... of ... instead of for ... in ..., but they both work.

answered Sep 10, 2019 at 20:32

Leandro

1,6122 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I loop through an array in a template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related