Can anyone solve below question in angular

JavaScript
1

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

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

2

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

3

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>
4

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

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

@ILM

6

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…