File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-token-details |
| styleUrls |
./token-details.component.scss |
| templateUrl |
./token-details.component.html |
Outputs
|
closeWindow
|
Type : EventEmitter<any>
|
|
|
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnInit,
Output,
} from '@angular/core';
import { Token } from '@app/_models';
@Component({
selector: 'app-token-details',
templateUrl: './token-details.component.html',
styleUrls: ['./token-details.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TokenDetailsComponent implements OnInit {
@Input() token: Token;
@Output() closeWindow: EventEmitter<any> = new EventEmitter<any>();
constructor() {}
ngOnInit(): void {}
close(): void {
this.token = null;
this.closeWindow.emit(this.token);
}
}
<div *ngIf="token" class="mb-3 mt-1">
<div class="card text-center">
<mat-card-title class="card-header">
<div class="row">
TOKEN 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>
<span><strong>Name:</strong> {{ token?.name }}</span>
</div>
<div>
<span><strong>Symbol:</strong> {{ token?.symbol }}</span>
</div>
<div>
<span><strong>Address:</strong> {{ token?.address }}</span>
</div>
<div>
<span
><strong>Details:</strong> A community inclusive currency for trading among lower to
middle income societies.</span
>
</div>
<div>
<span><strong>Supply:</strong> {{ token?.supply | tokenRatio }}</span>
</div>
<br />
<div>
<h2>Reserve</h2>
<div>
<span><strong>Weight:</strong> {{ token?.reserveRatio }}</span>
</div>
<div>
<span><strong>Owner:</strong> {{ token?.owner }}</span>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive