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>
    <app-address>
      <p>Third Avenue</p>
      <p>New York</p>
      <p>10001</p>
    </app-address>
  </li>
  <li>
    <app-address>
      <p>Constitution Avenue</p>
      <p>Washington</p>
      <p>20001</p>
    </app-address>
  </li>
</ul>

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

Angular

Show starting code

import { Component, Input } from '@angular/core';

export class Address {
  street: String;
  city: String;
  zipCode: String;
}

@Component({
  selector: 'app-address',
  template: `<p>{{ address.street }}</p>
             <p>{{ address.city }}</p>
             <p>{{ address.zipCode }}</p>`
})
export class AddressComponent {

  @Input() address: Address;
  constructor() { }
}

@Component({
  selector: 'app-address-list',
  //Update this template
  template: `<ul>
               <li>
               </li>
             </ul>`
})
export class AddressListComponent {

  @Input() addresses: Address[] = [{ street: "Third Avenue", city: "New York", zipCode: "10001" },
                                   { street: "Constitution Avenue", city: "Washington", zipCode: "20001" }];
  constructor() { }
}

Example case: Wrong answer
One address: Wrong answer
Various addresses: Wrong answer

Use this question for your test

<< Previous Next >> Back to questions

Score Distribution

# of candidates

0-33%
34-67%
68-100%

Score

Would you like to see our other questions?

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

Visit our question library

Private Concierge

Send us an email with an explanation of your testing needs and a list of candidates. We will create an appropriate test, invite your candidates, review their results, and send you a detailed report.

Contact Private Concierge

Would you like to see our tests? The following tests contain Angular related questions:

Angular Online Test

Angular and TypeScript Online Test

HTML/CSS, Angular, TypeScript, and Node.js Online Test

HTML/CSS, Angular, TypeScript, Node.js, and SQL Online Test

On the TestDome Blog

Screening Applicants: The Good, the Bad and the Ugly

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 disagree with each other. Everybody praises their pet method and criticizes the others. Many of these methods look legitimate, but are based on...