I have a form component that I embed in a dialog using the kendo dialog service. I'm able to call my service and save my form data on my save click. I'm trying to figure out how to close the dialog after the save click. I want to keep all of logic in the dialog component and just open the dialog from the parent component. Validation and saving call will happen in the dialog component. I could just use a template and place the save/close functions in the parent component but I want to isolate this to the child component used by the dialog service.
ClientComponent.ts
import { AddClientComponent } from './add-client.component';
import { Component, OnInit } from '@angular/core';
import { ClientService } from '../services/client.service';
import { DialogService, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog';
@Component({
selector: 'clients',
templateUrl: 'ClientComponent.html',
styleUrls: ['../app.component.css'],
moduleId: module.id
})
export class ClientsComponent implements OnInit {
public clients: any[];
private title = 'Clients';
constructor(private clientService: ClientService, private dialogService: DialogService) {
}
ngOnInit() {
this.clients = this.clientService.getClients();
}
public showAddClient() {
const dialog: DialogRef = this.dialogService.open({
title: "Add User",
// show component
content: AddClientComponent
});
dialog.result.subscribe((result) => {
if (result instanceof DialogCloseResult) {
console.log("close");
} else {
console.log("action", result);
this.clients = this.clientService.getClients();
}
});
}
}
clientComponent.html
<h1>{{title}}</h1>
<br/>
<button (click)="showAddClient(dialogActions)" class="k-button">Add Client</button>
<kendo-grid [data]="clients">
<kendo-grid-column field="Id" title="Id">
</kendo-grid-column>
<kendo-grid-column field="FirstName" title="FirstName">
</kendo-grid-column>
<kendo-grid-column field="LastName" title="LastName">
</kendo-grid-column>
<kendo-grid-column field="DateOfBirth" title="DateOfBirth">
</kendo-grid-column>
<kendo-grid-column field="Location" title="Location">
</kendo-grid-column>
</kendo-grid>
<div kendoDialogContainer></div>
add-client.component.ts
import { Component, Input } from '@angular/core';
import { ClientService } from '../services/client.service';
import { Client } from '../entities/Client';
@Component({
selector: 'add-client',
templateUrl: 'AddClient.html',
moduleId: module.id
})
export class AddClientComponent {
constructor(private clientService: ClientService) {
}
public firstName: string;
public lastName: string;
public dateOfBirth: Date;
public address: string;
public Save() {
var client = new Client(0, this.firstName, this.lastName, this.dateOfBirth, this.address)
this.clientService.addClient(client);
}
}
AddClient.html
<form class="k-form">
<label class="k-form-field">
<span>First Name</span>
<input class="k-textbox" placeholder="Your Name" [(ngModel)]="firstName" name="firstName" />
</label>
<label class="k-form-field">
<span>Last Name</span>
<input class="k-textbox" placeholder="Your Last Name" [(ngModel)]="lastName" name="lastName" />
</label>
<label class="k-form-field">
<span>Date of Birth</span>
<kendo-datepicker name="birthDate"
[(ngModel)]="birthDate"></kendo-datepicker>
</label>
<label class="k-form-field">
<span>Location</span>
<input class="k-textbox" placeholder="Perrysburg" [(ngModel)]="location" name="location" />
</label>
<button class="k-button pull-right" (click)="Save()" primary="true" style="background-color:deepskyblue">Save</button>
</form>
There is a better and easier way to do this now. You can check the documentation
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/
Basically all you have to do is to provide a constructor Parameter of the DialogRef type in the child component.
add-client.component.ts would look like this:
import { Component, Input } from '@angular/core';
import { ClientService } from '../services/client.service';
import { Client } from '../entities/Client';
import { DialogRef } from '@progress/kendo-angular-dialog';
@Component({
selector: 'add-client',
templateUrl: 'AddClient.html',
moduleId: module.id
})
export class AddClientComponent {
constructor(private clientService: ClientService,
public dialog : DialogRef) {
}
public firstName: string;
public lastName: string;
public dateOfBirth: Date;
public address: string;
public Save() {
var client = new Client(0, this.firstName, this.lastName, this.dateOfBirth, this.address)
this.clientService.addClient(client);
this.dialog.close();
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With