In my driver-list.component.html file, the code snippet below is present:
<button class="btn btn-outline-primary mr-2" (click)="open('focusFirst')">
<div>Open confirm modal</div>
<div class="text-dark" aria-hidden="true"><small>× button will be focused</small></div>
</button>
Here is my updated driver-list.component.ts:
UPDATED driver-list.component.html
@Component({
selector: 'app-driver-list',
templateUrl: './driver-list.component.html',
styleUrls: ['./driver-list.component.css']
})
export class DriverListComponent implements OnInit {
...
@Component({
selector: 'ngbd-modal-confirm',
template: `
<div class="modal-header">
<h4 class="modal-title" id="modal-title">Profile deletion</h4>
<button type="button" class="close" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><strong>Are you sure you want to delete <span class="text-primary">"John Doe"</span> profile?</strong></p>
<p>All information associated to this user profile will be permanently deleted.
<span class="text-danger">This operation can not be undone.</span>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss('cancel click')">Cancel</button>
<button type="button" class="btn btn-danger" (click)="modal.close('Ok click')">Ok</button>
</div>
`
})
export class NgbdModalConfirm {
constructor(public modal: NgbActiveModal) {}
}
const MODALS: {[name: string]: Type<any>} = {
focusFirst: NgbdModalConfirm
};
@Directive({
selector: "[openClick]",
})
export class NgbdModalFocus {
@Input() name!: string;
withAutofocus = `<button type="button" ngbAutofocus class="btn btn-danger"
(click)="modal.close('Ok click')">Ok</button>`;
constructor(private _modalService: NgbModal) {}
@HostListener("click", ["$event"])
open(name: string) {
this._modalService.open(MODALS[name]);
}
}
The modal currently appears empty. I need to add content to the other two components as well in order to format the modal messages. Should directives be used there too?