> For the complete documentation index, see [llms.txt](https://briebug.gitbook.io/ngrx-auto-entity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://briebug.gitbook.io/ngrx-auto-entity/0.4.x/examples/application/container-component.md).

# Container Components

Bundles of UI

### Customers

{% tabs %}
{% tab title="components/customers.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { CustomerFacade } from 'facades';
import { CustomerEditComponent } from 'components';

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent {
  constructor(public customers: CustomerFacade, public ui: CustomerUIFacade) {
    customers.loadAll();
  }
}
```

{% endtab %}

{% tab title="components/customers.component.html" %}

```markup
<div class="customers" *ngIf="customers.isLoading$ | async; else loading">
    <app-customer-list 
        [customers]="customers.all$ | async" 
        (deleted)="customers.delete($event)"
        (selected)="customers.select($event)">
    </app-customer-list>
    <app-customer-detail 
        *ngIf="(customers.currentOrFirst$ | async) as customer"
        [customer]="customer"
        (deleted)="customers.delete($event)"
        (edited)="ui.edit($event)">
    </app-customer-detail>
</div>
<ng-template #loading>
    Loading customers...
</ng-template>
```

{% endtab %}
{% endtabs %}

### Orders

{% tabs %}
{% tab title="components/orders.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { Router } froj '@angular/router';
import { OrderFacade, LineItemFacade } from 'facades';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.css']
})
export class CustomersComponent {
  constructor(
    public orders: OrderFacade, 
    public lineItems: LineItemFacade,
    public router: Router) {
    orders.loadAll();
  }
}
```

{% endtab %}

{% tab title="components/orders.component.html" %}

```markup
<div class="orders" *ngIf="orders.isLoading$ | async; else loading">
    <app-order-list 
        [orders]="orders.all$ | async" 
        (deleted)="orders.delete($event)"
        (selected)="orders.select($event)">
    </app-order-list>
    <app-order-detail 
        *ngIf="(orders.current$ | async) as order"
        [order]="order"
        [lineItems]="lineItems.byOrder$(order) | async"
        (deleted)="orders.delete($event); lineItems.deleteAllForOrder($event)"
        (edited)="router.navigate(['edit', $event.id])">
    </app-order-detail>
</div>
<ng-template #loading>
    Loading orders...
</ng-template>
```

{% endtab %}
{% endtabs %}