ignore this meme

import { Component } from '@angular/core';
import { CoinMarketCapService } from '../services/coin-market-cap.service';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent
{
	currenciesJson: object;
	selectedCurrency: object;
	currencyId: any;
	displayInfo: boolean = false;
	finishedLoading: boolean = false;

	constructor(private CoinMarketCapService: CoinMarketCapService) {}

	ngOnInit()
	{
		this.CoinMarketCapService.getCurrencies(15)
        .then(res => {
			this.currenciesJson = res,
			this.finishedLoading = true;
        });
	}

	selectCurrency(currencyId: number)
	{
		console.log(currencyId);
		this.CoinMarketCapService.getCurrency(currencyId)
		.then( res => {
			this.currencyId = currencyId,
			this.selectedCurrency = res,
			console.log(res);
		})
		.then( res =>
			this.showInfo(true)
		)
	}

	showInfo ( showInfo: boolean )
	{
		this.displayInfo = showInfo;
	}
}



<div [class.app-dark-theme]="true">
    <mat-sidenav-container fullscreen class="sidenav-container">
		<mat-toolbar class="toolbar">
			Coin Market Cap 3rd party api app
		</mat-toolbar>

		<mat-card>
			<mat-card-header>
				<mat-card-title>CryptoCurrency Market Overview</mat-card-title>
				<mat-card-subtitle>Top 15 current currencies.</mat-card-subtitle>
			</mat-card-header>

			<mat-card-content class="currency-listings">
				<div *ngIf="finishedLoading">
					<mat-grid-list cols="1" rowHeight="40px">
						<mat-grid-tile *ngFor="let currency of currenciesJson.data | keyvalue; let i = index" (click)="selectCurrency(currency.value.id)">
							{{i + 1}} - {{currency.value.name}}
						</mat-grid-tile>
					</mat-grid-list>
				</div>
			</mat-card-content>
		</mat-card>

		<mat-card *ngIf="displayInfo">
			{{selectedCurrency.data[0].name}}
		</mat-card>
    </mat-sidenav-container>
</div>