Hi,
try to inject the dialog into the constructor
//...some code
selectedCurrency: Currency;
//public dialog: MatDialog;
constructor(public currencyService: CurrencyService, public dialog:
MatDialog) {}
//... some code
Il giorno sabato 22 settembre 2018 17:43:29 UTC+2, Partha Majumdar ha
scritto:
>
> 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.
