Address Template

Finish the AddressListComponent's template so that it renders one li element per address and it correctly one-way binds each field of the AddressComponent field.

For example, if the addresses array is:

[{ street: "Third Avenue‎", city: "New York", zipCode: "10001" },
 { street: "Constitution Avenue", city: "Washington", zipCode: "20001" }]

the template should render to:

<ul>
  <li>
    <address>
      <p>Third Avenue</p>
      <p>New York</p>
      <p>10001</p>
    </address>
  </li>
  <li>
    <app-address>
      <p>Constitution Avenue</p>
      <p>Washington</p>
      <p>20001</p>
    </address>
  </li>
</ul>

The code for running the example case locally is provided here.

Angular 18
Loading...
Loading...

Tags

  • AI-resistant
  • Angular
  • Components
  • Directives

Information

Difficulty:
Easy
Duration:
10 min
Type:
code
Set:
Public

Score Distribution

Not enough data for chart.

Would you like to see our other questions?

We have 1000+ premium hand-crafted questions for 160+ job skills and 20+ coding languages. We prefer questions with small samples of actual work over academic problems or brain teasers.

Would you like to see our tests?

The following tests contain Angular related questions:

On the blog

Since we're all biased and we use incorrect proxies, why not just outsource hiring to experts or recruitment agencies? After all, they've been screening people for many years, so they must know how to do it right?

Not really. I was surprised to discover that many experts...