### File

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

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties
addressSearchForm addressSearchLoading addressSearchSubmitted matcher nameSearchForm nameSearchLoading nameSearchSubmitted phoneSearchForm phoneSearchLoading phoneSearchSubmitted
###### Methods
Async ngOnInit Async onAddressSearch onNameSearch Async onPhoneSearch
###### Accessors
nameSearchFormStub phoneSearchFormStub addressSearchFormStub

### Constructor

`constructor(formBuilder: FormBuilder, userService: UserService, router: Router)`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:25
Parameters :
Name | Type | Optional
formBuilder | `FormBuilder` | No
userService | `UserService` | No
router | `Router` | No

### Methods

Async ngOnInit
`ngOnInit()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:33
Returns : `Promise<void>`

Async onAddressSearch
`onAddressSearch()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:86
Returns : `Promise<void>`

onNameSearch
`onNameSearch()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:56
Returns : `void`

Async onPhoneSearch
`onPhoneSearch()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:66
Returns : `Promise<void>`

### Properties

addressSearchForm
Type : `FormGroup`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:22

addressSearchLoading
Type : `boolean`
Default value : `false`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:24

addressSearchSubmitted
Type : `boolean`
Default value : `false`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:23

matcher
Type : `CustomErrorStateMatcher`
Default value : `new CustomErrorStateMatcher()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:25

nameSearchForm
Type : `FormGroup`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:16

nameSearchLoading
Type : `boolean`
Default value : `false`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:18

nameSearchSubmitted
Type : `boolean`
Default value : `false`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:17

phoneSearchForm
Type : `FormGroup`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:19

phoneSearchLoading
Type : `boolean`
Default value : `false`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:21

phoneSearchSubmitted
Type : `boolean`
Default value : `false`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:20

### Accessors

nameSearchFormStub
get `nameSearchFormStub()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:46

phoneSearchFormStub
get `phoneSearchFormStub()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:49

addressSearchFormStub
get `addressSearchFormStub()`
Defined in src/app/pages/accounts/account-search/account-search.component.ts:52

    import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { CustomErrorStateMatcher } from '@app/_helpers';
    import { UserService } from '@app/_services';
    import { Router } from '@angular/router';
    import { strip0x } from '@src/assets/js/ethtx/dist/hex';
    import { environment } from '@src/environments/environment';

    @Component({
      selector: 'app-account-search',
      templateUrl: './account-search.component.html',
      styleUrls: ['./account-search.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class AccountSearchComponent implements OnInit {
      nameSearchForm: FormGroup;
      nameSearchSubmitted: boolean = false;
      nameSearchLoading: boolean = false;
      phoneSearchForm: FormGroup;
      phoneSearchSubmitted: boolean = false;
      phoneSearchLoading: boolean = false;
      addressSearchForm: FormGroup;
      addressSearchSubmitted: boolean = false;
      addressSearchLoading: boolean = false;
      matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();

      constructor(
        private formBuilder: FormBuilder,
        private userService: UserService,
        private router: Router
      ) {}

      async ngOnInit(): Promise<void> {
        await this.userService.init();
        this.nameSearchForm = this.formBuilder.group({
          name: ['', Validators.required],
        });
        this.phoneSearchForm = this.formBuilder.group({
          phoneNumber: ['', Validators.required],
        });
        this.addressSearchForm = this.formBuilder.group({
          address: ['', Validators.required],
        });
      }

      get nameSearchFormStub(): any {
        return this.nameSearchForm.controls;
      }
      get phoneSearchFormStub(): any {
        return this.phoneSearchForm.controls;
      }
      get addressSearchFormStub(): any {
        return this.addressSearchForm.controls;
      }

      onNameSearch(): void {
        this.nameSearchSubmitted = true;
        if (this.nameSearchForm.invalid) {
          return;
        }
        this.nameSearchLoading = true;
        this.userService.searchAccountByName(this.nameSearchFormStub.name.value);
        this.nameSearchLoading = false;
      }

      async onPhoneSearch(): Promise<void> {
        this.phoneSearchSubmitted = true;
        if (this.phoneSearchForm.invalid) {
          return;
        }
        this.phoneSearchLoading = true;
        (
          await this.userService.getAccountByPhone(this.phoneSearchFormStub.phoneNumber.value, 100)
        ).subscribe(async (res) => {
          if (res !== undefined) {
            await this.router.navigateByUrl(
              `/accounts/${strip0x(res.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`
            );
          } else {
            alert('Account not found!');
          }
        });
        this.phoneSearchLoading = false;
      }

      async onAddressSearch(): Promise<void> {
        this.addressSearchSubmitted = true;
        if (this.addressSearchForm.invalid) {
          return;
        }
        this.addressSearchLoading = true;
        (
          await this.userService.getAccountByAddress(this.addressSearchFormStub.address.value, 100)
        ).subscribe(async (res) => {
          if (res !== undefined) {
            await this.router.navigateByUrl(
              `/accounts/${strip0x(res.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`
            );
          } else {
            alert('Account not found!');
          }
        });
        this.addressSearchLoading = false;
      }
    }

    <!-- Begin page -->
    <div class="wrapper">
      <app-sidebar></app-sidebar>

      <!-- ============================================================== -->
      <!-- Start Page Content here -->
      <!-- ============================================================== -->

      <div id="content">
        <app-topbar></app-topbar>
        <!-- Start Content-->
        <div class="container-fluid" appMenuSelection>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
              <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
              <li class="breadcrumb-item active" aria-current="page">Search</li>
            </ol>
          </nav>
          <div class="card">
            <mat-card-title class="card-header"> Accounts </mat-card-title>
            <div class="card-body">
              <mat-tab-group>
                <mat-tab label="Phone Number">
                  <form [formGroup]="phoneSearchForm" (ngSubmit)="onPhoneSearch()">
                    <mat-form-field appearance="outline">
                      <mat-label> Search </mat-label>
                      <input
                        matInput
                        type="text"
                        placeholder="Search by phone number"
                        formControlName="phoneNumber"
                        [errorStateMatcher]="matcher"
                      />
                      <mat-error *ngIf="phoneSearchSubmitted && phoneSearchFormStub.phoneNumber.errors"
                        >Phone Number is required.</mat-error
                      >
                      <mat-icon matSuffix>phone</mat-icon>
                      <mat-hint>Phone Number</mat-hint>
                    </mat-form-field>
                    <button
                      mat-raised-button
                      color="primary"
                      type="submit"
                      class="btn btn-outline-primary ml-3"
                    >
                      SEARCH
                    </button>
                  </form>
                </mat-tab>
                <mat-tab label="Account Address">
                  <form [formGroup]="addressSearchForm" (ngSubmit)="onAddressSearch()">
                    <mat-form-field appearance="outline">
                      <mat-label> Search </mat-label>
                      <input
                        matInput
                        type="text"
                        placeholder="Search by account address"
                        formControlName="address"
                        [errorStateMatcher]="matcher"
                      />
                      <mat-error *ngIf="addressSearchSubmitted && addressSearchFormStub.address.errors"
                        >Account Address is required.</mat-error
                      >
                      <mat-icon matSuffix>view_in_ar</mat-icon>
                      <mat-hint>Account Address</mat-hint>
                    </mat-form-field>
                    <button
                      mat-raised-button
                      color="primary"
                      type="submit"
                      class="btn btn-outline-primary ml-3"
                    >
                      SEARCH
                    </button>
                  </form>
                </mat-tab>
              </mat-tab-group>
            </div>
          </div>
        </div>
        <app-footer appMenuSelection></app-footer>
      </div>
      <!-- ============================================================== -->
      <!-- End Page content -->
      <!-- ============================================================== -->
    </div>

`./account-search.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""