zgo/src/app/tips/tips.component.html

<mat-card>
	<mat-card-title class="scan-header">
		{{ vE.tipsEnterTip }}:
	</mat-card-title>
	<mat-card-content>
		<br>
		<div align="center" class="card-contents">
			<table cellspacing="0">
				<tr>
					<th align="center"> {{ vE.tipsSubtotal }}</th>
					<th align="center"></th>
					<th align="center">{{ vE.tipsTip }}</th>
					<th align="center"></th>
					<th align="center">{{ vE.tipsTotal }}</th>
				</tr>
				<tr>
					<td align="center">{{orderTotal | currency}}</td>
					<td align="center">+</td>
					<td align="center">{{orderTotal * value | currency}}</td>
					<td align="center">=</td>
					<td align="center">{{orderTotal * (1 + value) | currency}}</td>
				</tr>
			</table>
		</div>
		<br>
		<div align="center" class="card-contents">
			{{value | percent}}
			<br>
			<input type="range" min="0" max="1" step="0.01" [(ngModel)]="value">
		</div>
	</mat-card-content>
	<mat-card-actions class="card-buttons">
		<button mat-raised-button (click)="close()">
			<mat-icon class="icon">close</mat-icon>{{ vE.tipsNoTipBtn }}
		</button>
		<button mat-raised-button color="primary" (click)="confirm()">
			<mat-icon class="icon">done</mat-icon>{{ vE.tipsDoneBtn }}
		</button>
	</mat-card-actions>
</mat-card>