### File

`src/app/pages/tokens/tokens.component.ts`

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties
columnsToDisplay dataSource paginator sort token tokens
###### Methods
doFilter downloadCsv Async ngOnInit viewToken

### Constructor

`constructor(tokenService: TokenService, loggingService: LoggingService, router: Router)`
Defined in src/app/pages/tokens/tokens.component.ts:22
Parameters :
Name | Type | Optional
tokenService | `TokenService` | No
loggingService | `LoggingService` | No
router | `Router` | No

### Methods

doFilter
`doFilter(value: string)`
Defined in src/app/pages/tokens/tokens.component.ts:46
Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

downloadCsv
`downloadCsv()`
Defined in src/app/pages/tokens/tokens.component.ts:54
Returns : `void`

Async ngOnInit
`ngOnInit()`
Defined in src/app/pages/tokens/tokens.component.ts:30
Returns : `Promise<void>`

viewToken
`viewToken(token)`
Defined in src/app/pages/tokens/tokens.component.ts:50
Parameters :
Name | Optional
token | No
Returns : `void`

### Properties

columnsToDisplay
Type : `Array<string>`
Default value : `['name', 'symbol', 'address', 'supply']`
Defined in src/app/pages/tokens/tokens.component.ts:18

dataSource
Type : `MatTableDataSource<any>`
Defined in src/app/pages/tokens/tokens.component.ts:17

paginator
Type : `MatPaginator`
Decorators : `@ViewChild(MatPaginator)`
Defined in src/app/pages/tokens/tokens.component.ts:19

sort
Type : `MatSort`
Decorators : `@ViewChild(MatSort)`
Defined in src/app/pages/tokens/tokens.component.ts:20

token
Type : `Token`
Defined in src/app/pages/tokens/tokens.component.ts:22

tokens
Type : `Array<Token>`
Defined in src/app/pages/tokens/tokens.component.ts:21

    import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
    import { MatPaginator } from '@angular/material/paginator';
    import { MatSort } from '@angular/material/sort';
    import { LoggingService, TokenService } from '@app/_services';
    import { MatTableDataSource } from '@angular/material/table';
    import { Router } from '@angular/router';
    import { exportCsv } from '@app/_helpers';
    import { Token } from '@app/_models';

    @Component({
      selector: 'app-tokens',
      templateUrl: './tokens.component.html',
      styleUrls: ['./tokens.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class TokensComponent implements OnInit {
      dataSource: MatTableDataSource<any>;
      columnsToDisplay: Array<string> = ['name', 'symbol', 'address', 'supply'];
      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
      tokens: Array<Token>;
      token: Token;

      constructor(
        private tokenService: TokenService,
        private loggingService: LoggingService,
        private router: Router
      ) {}

      async ngOnInit(): Promise<void> {
        await this.tokenService.init();
        this.tokenService.load.subscribe(async (status: boolean) => {
          if (status) {
            await this.tokenService.getTokens();
          }
        });
        this.tokenService.tokensSubject.subscribe((tokens) => {
          this.loggingService.sendInfoLevelMessage(tokens);
          this.dataSource = new MatTableDataSource(tokens);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          this.tokens = tokens;
        });
      }

      doFilter(value: string): void {
        this.dataSource.filter = value.trim().toLocaleLowerCase();
      }

      viewToken(token): void {
        this.token = token;
      }

      downloadCsv(): void {
        exportCsv(this.tokens, 'tokens');
      }
    }

    <!-- 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 active" aria-current="page">Tokens</li>
            </ol>
          </nav>
          <div class="card">
            <mat-card-title class="card-header">
              <div class="row">
                Tokens
                <button
                  mat-raised-button
                  color="primary"
                  type="button"
                  class="btn btn-outline-primary ml-auto mr-2"
                  (click)="downloadCsv()"
                >
                  EXPORT
                </button>
              </div>
            </mat-card-title>
            <div class="card-body">
              <app-token-details [token]="token" (closeWindow)="token = $event"></app-token-details>

              <mat-form-field appearance="outline">
                <mat-label> Filter </mat-label>
                <input
                  matInput
                  type="text"
                  (keyup)="doFilter($event.target.value)"
                  placeholder="Filter"
                />
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table
                class="mat-elevation-z10 table-responsive"
                [dataSource]="dataSource"
                matSort
                matSortDirection="asc"
                matSortDisableClear
              >
                <ng-container matColumnDef="name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                  <mat-cell *matCellDef="let token"> {{ token.name }} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="symbol">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
                  <mat-cell *matCellDef="let token"> {{ token.symbol }} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="address">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
                  <mat-cell *matCellDef="let token"> {{ token.address }} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="supply">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell>
                  <mat-cell *matCellDef="let token"> {{ token.supply | tokenRatio }} </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
                <mat-row
                  *matRowDef="let token; columns: columnsToDisplay"
                  (click)="viewToken(token)"
                  matRipple
                ></mat-row>
              </mat-table>

              <mat-paginator
                [pageSize]="5"
                [pageSizeOptions]="[5, 10, 25, 100]"
                showFirstLastButtons
              ></mat-paginator>
            </div>
          </div>
        </div>
        <app-footer appMenuSelection></app-footer>
      </div>
      <!-- ============================================================== -->
      <!-- End Page content -->
      <!-- ============================================================== -->
    </div>

`./tokens.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""