### File

`src/app/pages/accounts/account-history/account-history.component.ts`

### Implements

`OnInit` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `app-account-history`
styleUrls | `./account-history.component.scss`
templateUrl | `./account-history.component.html`

### Index

###### Methods
close ngOnChanges ngOnInit
###### Inputs
account
###### Outputs
closeWindow

### Constructor

`constructor()`
Defined in src/app/pages/accounts/account-history/account-history.component.ts:22

### Inputs

account
Type : `any`
Defined in src/app/pages/accounts/account-history/account-history.component.ts:20

### Outputs

closeWindow
Type : `EventEmitter<any>`
Defined in src/app/pages/accounts/account-history/account-history.component.ts:22

### Methods

close
`close()`
Defined in src/app/pages/accounts/account-history/account-history.component.ts:34
Returns : `void`

ngOnChanges
`ngOnChanges(changes: SimpleChanges)`
Defined in src/app/pages/accounts/account-history/account-history.component.ts:28
Parameters :
Name | Type | Optional
changes | `SimpleChanges` | No
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/pages/accounts/account-history/account-history.component.ts:26
Returns : `void`

    import {
      Component,
      OnInit,
      ChangeDetectionStrategy,
      Input,
      Output,
      EventEmitter,
      SimpleChanges,
      OnChanges,
    } from '@angular/core';
    const vCard = require('vcard-parser');

    @Component({
      selector: 'app-account-history',
      templateUrl: './account-history.component.html',
      styleUrls: ['./account-history.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class AccountHistoryComponent implements OnInit, OnChanges {
      @Input() account;

      @Output() closeWindow: EventEmitter<any> = new EventEmitter<any>();

      constructor() {}

      ngOnInit(): void {}

      ngOnChanges(changes: SimpleChanges): void {
        if (this.account) {
          this.account.vcard = vCard.parse(atob(this.account.vcard));
        }
      }

      close(): void {
        this.account = null;
        this.closeWindow.emit(this.account);
      }
    }

    <div *ngIf="account" class="mb-3 mt-1">
      <div class="card text-center">
        <mat-card-title class="card-header">
          <div class="row">
            ACCOUNT DETAILS
            <button
              mat-raised-button
              type="button"
              class="btn btn-outline-secondary ml-auto mr-2"
              (click)="close()"
            >
              CLOSE
            </button>
          </div>
        </mat-card-title>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <ul class="list-group list-group-flush">
                <li class="list-group-item">
                  <span>Name: {{ account?.vcard?.fn[0].value }}</span>
                </li>
                <li class="list-group-item">
                  <span>Phone Number: {{ account?.vcard?.tel[0].value }}</span>
                </li>
                <li class="list-group-item">
                  <span>Account Type: {{ account?.type }}</span>
                </li>
                <li class="list-group-item">
                  <span>Gender: {{ account?.gender }}</span>
                </li>
                <li class="list-group-item">
                  <span>Age: {{ account?.age }}</span>
                </li>
              </ul>
            </div>
            <div class="col-md-6">
              <ul class="list-group list-group-flush">
                <li class="list-group-item">
                  <span>Bio: {{ account?.products }}</span>
                </li>
                <li class="list-group-item">
                  <span>Business Category: {{ account?.category }}</span>
                </li>
                <li class="list-group-item">
                  <span>User Location: {{ account?.location?.area_name }}</span>
                </li>
                <li class="list-group-item">
                  <span>Location: {{ account?.location?.area }}</span>
                </li>
                <li class="list-group-item">
                  <span>Location Type: {{ account?.location?.area_type }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

`./account-history.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""