Can anyone solve below question in angular

https://app.testdome.com/questions/47549.

above link is redirect to the question and you have to login to testDom site to take test.

if you want help with it, post some code and requirements and what kind of help you need, do not ask people to log in somewhere else

okay.I’ll provide

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() { }
}

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>

I have done like below

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",
  //Updated --
  template: `
    <ul>
      <li *ngFor="let address of addresses">
        <p>{{ address.street }}</p>
        <p>{{ address.city }}</p>
        <p>{{ address.zipCode }}</p>
      </li>
    </ul>
  `
})
export class AddressListComponent {
  @Input() addresses: Address[] = [
    { street: "Street 1", city: "New York", zipCode: "1000" },
    { street: "Street 2", city: "Washington", zipCode: "2000" }
  ];
  constructor() {}
}

I want to use app-address directly to “app-address-list”

@ieahleen

I can’t help with this. but now that you have posted more details you could get help easier.

you may also want to use a more meaningful title, including language, libraries, frameworks…