src/ng-xform/edit-save-cancel-button-bar/edit-save-cancel-button-bar.component.ts
| selector | ng-xform-edit-save-cancel-button-bar |
| templateUrl | ./edit-save-cancel-button-bar.component.html |
Inputs |
Outputs |
editing
|
Default value: |
cancel
|
$event type: EventEmitter
|
edit
|
$event type: EventEmitter
|
save
|
$event type: EventEmitter
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'ng-xform-edit-save-cancel-button-bar',
templateUrl: './edit-save-cancel-button-bar.component.html',
})
export class EditSaveCancelButtonBarComponent {
@Input() editing = false;
@Output() save = new EventEmitter();
@Output() cancel = new EventEmitter();
@Output() edit = new EventEmitter();
}
<div class="pull-right btn-toolbar">
<ng-template [ngIf]="editing === false">
<button type="submit" class="btn btn-primary" id="formEditBtn" (click)="edit.emit()">
<span class="fa fa-pencil"></span> Edit
</button>
</ng-template>
<ng-template [ngIf]="editing">
<button type="submit" class="btn btn-primary" id="formSubmitBtn" (click)="save.emit()">Save</button>
<button type="button" class="btn btn-default" id="formCancelBtn" (click)="cancel.emit()">Cancel</button>
</ng-template>
</div>