Skip to content

Instantly share code, notes, and snippets.

@sommereder
Last active July 24, 2020 03:57
Show Gist options
  • Save sommereder/a53d897ea64bae8c22cad9551466dd9a to your computer and use it in GitHub Desktop.
Save sommereder/a53d897ea64bae8c22cad9551466dd9a to your computer and use it in GitHub Desktop.
Get the outputs to/from the modal, by passing them as event emitter to the modal service and subscribe directly at the component opening the modal box.
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-my-modal',
styleUrls: ['./my-modal.component.scss'],
template: `
<p>{{content}}</p>
<button (click)="confirm()">OK</button>
`,
})
export class MyModalComponent {
@Input() content!: string;
@Input() confirmation!: EventEmitter<boolean>;
constructor() {}
confirm() {
this.confirmation.emit(true);
}
}
import { Component, EventEmitter } from '@angular/core';
@Component({
selector: 'app-my-whateva',
styleUrls: ['./my-whateva.component.scss],
template: `
<button (click)="doIt()">Do it!</button>
`,
})
export class MyWhatevaComponent {
constructor(
private readonly _modalService: ModalService,
) {}
doIt() {
let confirmation:EventEmitter<boolean> = new EventEmitter<boolean>();
confirmation.subscribe(next => console.log(next));
this._modalService.create(
MyModalComponent,
{content: 'Wirklich löschen?'}, // inputs
{confirmation}, // outputs (as inputs)
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment