Dear Sir/Madam,
I am new to Angular programming.
I am trying to open a dialog for editing and deleting data.
This form has a list which I fetch from the database. When I click a row on
this list, the dialog should open for editing and deleting.
For fetching the data, I have defined a service which I supply in the
constructor. Now, for opening the dialog, I understood from the code
example that I should create a constructor for that. However, in a class,
there can be only one constructor. So, when I pass the service and the
dialog in the constructor, the service stops functioning and also the
dialog does not open.
When I click a row in the list, I can see that the code for opening the
dialog is fired. However, the dialog does not open.
Please find the code file below.
Please help.
Regards,
Partha
import { Component, ViewChild, OnInit, OnDestroy, Inject } from
'@angular/core';
import { MatPaginator, MatTableDataSource, MatSort } from
'@angular/material';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { Subscription } from 'rxjs';
import { NgForm } from '@angular/forms';
import { Currency } from '../currency.model';
import { CurrencyService } from '../currency.service';
// const ELEMENT_DATA: Currency[] = [
// {currencyCode: "INR", currencySymbol: "INR", currencyBaseName: "Indian
Rupees", fractionSymbol: ".", fractionName: "Decimal"},
// {currencyCode: "EUR", currencySymbol: "EUR", currencyBaseName: "Euro",
fractionSymbol: ",", fractionName: "Comma"},
// {currencyCode: "USD", currencySymbol: "USD", currencyBaseName: "US
Dollar", fractionSymbol: ".", fractionName: "Decimal"},
// {currencyCode: "THB", currencySymbol: "THB", currencyBaseName: "Thai
Baht", fractionSymbol: ".", fractionName: "Decimal"}
// ];
@Component({
selector: 'app-Currency-List',
templateUrl: './currencyList.component.html',
styleUrls: ['./currencyList.component.css']
})
export class AppCurrencyListComponent implements OnInit, OnDestroy {
// @Input() currencyList: Currency[] = ELEMENT_DATA;
currencyList: Currency[] = [];
private currencySubscription: Subscription;
selectedCurrency: Currency;
public dialog: MatDialog;
constructor(public currencyService: CurrencyService) {}
// constructor(public dialog: MatDialog) {}
displayedColumns: string[] = ['currencyCode', 'currencySymbol',
'currencyBaseName', 'fractionSymbol', 'fractionName'];
// currencyData = new MatTableDataSource<Currency>(ELEMENT_DATA);
currencyData = new MatTableDataSource<Currency>(this.currencyList);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
alert('Cur List: getcurrencies');
this.currencyService.getCurrencies();
this.currencySubscription = this.currencyService.getCurrencyUpdatedListener
()
.subscribe( (currencies: Currency[]) => {
this.currencyList = currencies;
this.refresh();
});
this.currencyData.paginator = this.paginator;
this.currencyData.sort = this.sort;
}
applyFilter(filterValue: string) {
this.currencyData.filter = filterValue.trim().toLowerCase();
}
refresh() {
this.currencyData.data = this.currencyList;
}
ngOnDestroy() {
this.currencySubscription.unsubscribe();
}
rowClicked(row: Currency): void {
// alert(row.currencyCode);
this.selectedCurrency = {
currencyCode: row.currencyCode,
currencySymbol: row.currencySymbol,
currencyBaseName: row.currencyBaseName,
fractionSymbol: row.fractionSymbol,
fractionName: row.fractionName
};
// alert(this.selectedCurrency.currencyCode);
const dialogRef = this.dialog.open(CurrencyEditDeleteDialogComponent, {
width: '250px',
data: {
currencyCode: this.selectedCurrency.currencyCode,
currencySymbol: this.selectedCurrency.currencySymbol,
currencyBaseName: this.selectedCurrency.currencyBaseName,
fractionSymbol: this.selectedCurrency.fractionSymbol,
fractionName: this.selectedCurrency.fractionName
}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
// this.animal = result;
});
}
}
@Component({
selector: 'dialog-currency-edit-delete',
templateUrl: 'dialog-currency-edit-delete.html',
})
export class CurrencyEditDeleteDialogComponent {
constructor(
public dialogRef: MatDialogRef<CurrencyEditDeleteDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Currency) {}
onNoClick(): void {
this.dialogRef.close();
}
onEditCurrency(form: NgForm) {
alert('In Edit Currency');
}
onDeleteCurrency(form: NgForm) {
alert('In Delete Currency');
}
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
