title: How to show list in Angular
body: <p>I want to show the list of tickets in my Angular frontend. I mean to show <code>ticketId</code> and <code>place</code> like on the picture below.</p>
  
  <p>Here is my request from <code>http://localhost:8080/api/customers</code></p>
  
  <p><a href="https://i.stack.imgur.com/y8s6g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y8s6g.png" alt="enter image description here"></a></p>
  
  <p>Here is the result in <code>http://localhost:4200/customer</code></p>
  
  <p>Unfortunately list of tickets is empty. I don't know how to show it.</p>
  
  <p><a href="https://i.stack.imgur.com/EQwK1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EQwK1.png" alt="enter image description here"></a></p>
  
  <p>Here is my class <code>customer-details.component.html</code></p>
  
  <pre><code>&lt;div *ngIf="customer"&gt;
  &lt;div&gt;
  &lt;label&gt;Name: &lt;/label&gt; {{customer.name}}
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label&gt;Surname: &lt;/label&gt; {{customer.surname}}
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label&gt;List of tickets: &lt;/label&gt; {{customer.tickets}}
  &lt;/div&gt;
  &lt;span class="button is-small btn-danger"  (click)='deleteCustomer()'&gt;Delete&lt;/span&gt;
  &lt;hr/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My class <code>customers-list.component.html</code></p>
  
  <pre><code>&lt;div *ngFor="let customer of customers | async" style="width: 300px;"&gt;
  &lt;customer-details [customer]='customer'&gt;&lt;/customer-details&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;button type="button" class="button btn-danger" (click)='deleteCustomers()'&gt;Delete all&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Class <code>customer.service.ts</code></p>
  
  <pre><code>export class CustomerService {
  
  private baseUrl = 'http://localhost:8080/api/customers';
  
  constructor(private http: HttpClient) {
  }
  
  getCustomersList(): Observable&lt;any&gt; {
  return this.http.get(`${this.baseUrl}`);
  }
  </code></pre>
  
  <p>My class <code>customer.ts</code></p>
  
  <pre><code>export class Customer {
  customerId: number;
  name: string;
  surname: string;
  tickets: Ticket[];
  }
  export class Ticket {
  ticketId: number;
  place: number;
  customerId: number;
  flightId: number;
  }
  </code></pre>
  
  <p>Class <code>customers-list.component.ts</code></p>
  
  <pre><code>export class CustomersListComponent implements OnInit {
  
  customers: Observable&lt;Customer[]&gt;;
  
  constructor(private customerService: CustomerService) { }
  
  ngOnInit() {
  this.reloadData();
  }
  
  reloadData() {
  this.customers = this.customerService.getCustomersList();
  }
  }
  </code></pre>