74 lines
1.3 KiB
TypeScript
74 lines
1.3 KiB
TypeScript
import {
|
|
Component,
|
|
EventEmitter,
|
|
Input,
|
|
Output,
|
|
NgModule
|
|
} from '@angular/core';
|
|
import { BrowserModule } from '@angular/platform-browser';
|
|
|
|
// #docregion
|
|
@Component({
|
|
selector: 'my-confirm',
|
|
template: `
|
|
<button (click)="onOkClick()">
|
|
{{okMsg}}
|
|
</button>
|
|
<button (click)="onNotOkClick()">
|
|
{{notOkMsg}}
|
|
</button>
|
|
`
|
|
})
|
|
class ConfirmComponent {
|
|
@Input() okMsg: string;
|
|
@Input('cancelMsg') notOkMsg: string;
|
|
@Output() ok =
|
|
new EventEmitter();
|
|
@Output('cancel') notOk =
|
|
new EventEmitter();
|
|
|
|
onOkClick() {
|
|
this.ok.next(true);
|
|
}
|
|
onNotOkClick() {
|
|
this.notOk.next(true);
|
|
}
|
|
}
|
|
// #enddocregion
|
|
|
|
|
|
@Component({
|
|
selector: 'hero-io',
|
|
template: `
|
|
<my-confirm [okMsg]="'OK'"
|
|
[cancelMsg]="'Cancel'"
|
|
(ok)="onOk()"
|
|
(cancel)="onCancel()">
|
|
</my-confirm>
|
|
<span *ngIf="okClicked">OK clicked</span>
|
|
<span *ngIf="cancelClicked">Cancel clicked</span>
|
|
`
|
|
})
|
|
class AppComponent {
|
|
okClicked: boolean;
|
|
cancelClicked: boolean;
|
|
|
|
onOk() {
|
|
this.okClicked = true;
|
|
}
|
|
onCancel() {
|
|
this.cancelClicked = true;
|
|
}
|
|
}
|
|
|
|
|
|
@NgModule({
|
|
imports: [ BrowserModule ],
|
|
declarations: [
|
|
AppComponent,
|
|
ConfirmComponent
|
|
],
|
|
bootstrap: [ AppComponent ]
|
|
})
|
|
export class HeroesIOModule { }
|