feat: Allow to set id attribute for close button

unlight · Aug 28, 2019 · fa675e4 · fa675e4
1 parent 57f89e6
commit fa675e4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/modal-header.component.spec.ts b/src/modal-header.component.spec.ts
@@ -59,4 +59,14 @@ describe('ModalHeaderComponent', () => {
         button.click();
     });
 
+    it('is possible to pass id attribute to modal button close', () => {
+        fixture = TestBed.createComponent(ModalHeaderComponent);
+        component = fixture.componentInstance;
+        component.hasCloseButton = true;
+        component.closeButtonId = 'buttonId';
+        fixture.detectChanges();
+        button = fixture.nativeElement.querySelector('[data-dismiss="modal"]');
+        expect(button.id).toEqual('buttonId');
+    });
+
 });
diff --git a/src/modal-header.component.ts b/src/modal-header.component.ts
@@ -7,16 +7,19 @@ import { ModalOptions, OPTIONS } from './modal-library';
         <button *ngIf="hasCloseButton" type="button" (click)="closeEventEmitter.next($event)"
             data-dismiss="modal"
             [class]="options.buttonCloseClass"
-            [innerHTML]="options.buttonCloseContent"></button>
+            [innerHTML]="options.buttonCloseContent"
+            [attr.id]="closeButtonId"
+        ></button>
         <h1 *ngIf="title">{{ title }}</h1>
         <ng-content></ng-content>
     </header>`,
 })
 export class ModalHeaderComponent {
 
-    @Input() public title: string;
-    @Input() public hasCloseButton: boolean;
-    public readonly closeEventEmitter: EventEmitter<Event> = new EventEmitter();
+    @Input() title: string;
+    @Input() hasCloseButton: boolean;
+    @Input() closeButtonId: string;
+    closeEventEmitter: EventEmitter<Event> = new EventEmitter();
 
     constructor(
         @Inject(OPTIONS) public readonly options: ModalOptions,