File
|
Public
dialog
|
Type : MatDialog
|
|
|
import { Component, Inject, OnInit } from '@angular/core';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA,
} from '@angular/material/dialog';
import { DataService } from 'src/app/Services/data.service';
import { TransactionData } from '../dashboard.component';
@Component({
selector: 'app-user-dialog',
templateUrl: './user-dialog.component.html',
styleUrls: ['./user-dialog.component.scss'],
})
export class UserDialogComponent {
constructor(
private dataService: DataService,
public dialog: MatDialog,
public dialogRef: MatDialogRef<UserDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: TransactionData
) {}
onSubmit() {
//TODO check that price is decimal
console.log(
this.dataService
.createTransaction(
this.data.comment,
this.data.isin,
this.data.time,
+this.data.count,
+this.data.price.toFixed(2)
)
.subscribe((data) => {
console.log(data);
})
);
this.dialog.closeAll();
}
}
<h1 mat-dialog-title>Neue Transaktion hinzufügen</h1>
<form
name="form"
(ngSubmit)="f.form.valid && onSubmit()"
#f="ngForm"
novalidate
class="backgorund"
>
<div class="form-group">
<label for="comment">Comment</label>
<input
type="comment"
class="form-control"
name="comment"
[(ngModel)]="data.comment"
required
comment
#comment="ngModel"
/>
</div>
<div class="form-group">
<label for="isin">isin</label>
<input
type="isin"
class="form-control"
name="isin"
[(ngModel)]="data.isin"
required
isin
#isin="ngModel"
/>
</div>
<div class="form-group">
<label for="time">Time</label>
<input
type="date"
class="form-control"
name="time"
[(ngModel)]="data.time"
required
time
#time="ngModel"
/>
</div>
<div class="form-group">
<label for="count">Count</label>
<input
type="count"
class="form-control"
name="count"
[(ngModel)]="data.count"
required
count
#count="ngModel"
/>
</div>
<div class="form-group">
<label for="price">Price</label>
<input
class="form-control"
name="price"
[(ngModel)]="data.price"
required
#price="ngModel"
type="number"
/>
</div>
<div class="form-group footer-buttons">
<button class="btn btn-danger btn-block" mat-dialog-close>Cancel</button>
<span class="spacer"></span>
<button class="btn btn-primary btn-block">Confirm</button>
</div>
</form>
.spacer {
flex-grow: 1;
width: 5%;
}
.footer-buttons {
display: flex;
width: 100%;
}
Legend
Html element with directive