In component.html i have a popup message currently the opening and closing functionality is in html but i need the close functionality in a method
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<button type="button" class="close" aria-label="Close"
(click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4>Cinema Operator</h4>
</div>
<div class="modal-body">
<li class="nav-item"> Import from your Excel </li>
</div>
<div class="modal-footer">
<input type="file" accept=".xlsx" class="btn btn-
success"(change)="onFileChange($event)">
<button type="file" class="btn dark btn-outline"
(click)="c('Close click');uploadfile()">Upload</button>
</div>
</ng-template>
----------------------------------------------------
<button class="btn btn-default" *ngIf="message" (click)="open(content)">Add New Operator</button>
open(content) will open the popup message and c('Close click') will close the popup message in Component.html but i need this close functionality in uploadfile() method
Please help me this this issue
I think all you need is to pass the reference to the function ,
Template Side :
Change :
(click)="c('Close click');uploadfile()"
to
(click)="uploadfile(c)"
Component Side :
uploadfile(c){
... // your code
c('Close click');
}
Related
I'm using bootstrap 5 in my web app and the modal is not showing up.
Here is the HTML for my modal and for the button activating it:
<div
class="modal"
tabindex="-1"
id="newInstallModal"
aria-labelledby="settings"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<input
id="newInstallButton"
type="button"
class="btn btn-outline-primary"
value="New Install"
/>
And here is the typescript code assigning that bootstrap-5 provided to open the modal via js.
newInstallModal = <HTMLDivElement>document.getElementById("newInstallModal");
newInstallButton = <HTMLButtonElement>document.getElementById("newInstallButton");
newInstallModal.addEventListener("show.bs.modal", () => {
newInstallButton.focus();
})
Any help is good, because I'm done debugging for today.
Bootstrap-modal v5 usage:
Either you have to use data- attributes:
<button type="button" data-bs-toggle="modal" data-bs-target="#newInstallModal">Launch modal</button>
OR via script:
var myModal = new bootstrap.Modal(document.getElementById('newInstallModal'), options)
EDIT: Also
myModal.addEventListener('shown.bs.modal', ...)
is just an eventlistener for when the modal is shown (after show transition ended)
Typically, when opening a modal, the function is called through HTML:
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
which would open up the modal:
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
However, due to circumstances (I'm using Google Charts and the HTML where I could use (click) = "open(content" isn't exposed to me), I need to be able to open the modal through javascript/typescript.
I attempted to do so like this:
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
select(event: ChartSelectEvent) {
this.open(content); //<--Attempt to Open Modal
if ('deselect' === event.message) {
}
else if ('select' === event.message) {
}
}
My attempt doesn't open up the modal. So, I think that what I need to do is how to call a template reference variable (#content) through typescript but I'm not sure how
You can get a reference to the template with #ViewChild("content"):
#ViewChild("content") private contentRef: TemplateRef<Object>;
and use that variable to open the modal:
this.open(this.contentRef);
See this stackblitz for a demo.
There's a button which calls bootstrap modal open(content) on html page. Requirement is to need to pass the size of the modal too ('sm','lg').
Using Angular 2 Bootstrap Modal. can anybody help me on this .
html :
<button class="btn btn-primary btn-add" (click)="open(content)">Add</button>
<ng-template #Deletecontent let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Delete Device</h4>
</div>
<div class="modal-body delete-modal">
<p>Are sure you want to delete this device/devices?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-cancel" (click)="c('Close click')">Cancel</button>
<button type="button" class="btn btn-primary btn-add" (click)="deleteDevices()">Delete</button>
</div>
</ng-template>
You can use ng-class. Like..
[ngClass]="'style1'"
Use it in your div and apply condition on model open.
In your function open
open(content: any) {
this.modalService.open(content, { size: 'lg' });
}
I have a button which when clicked opens up a modal, and the content to show in the modal is based on the data-attributes passed to the button.
My button,
<button class="btn btn-info" data-toggle="modal"
data-target="#someModal" :data-id=item.id :data-name=item.name>
Edit
</button>
In my modal, I have some buttons and when clicked I should call a vuejs function with a parameter, which is the data-attribute.
My modal button,
<div class="modal-footer">
<button type="button" class="btn btn-danger"
#click.prevent="deleteItem()" data-dismiss="modal">
Delete
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
Here I have to pass a parameter to deleteItem(), and that parameter is the data-id which I get from the button above.
Code for Modal
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<div class="deleteContent">
Are you Sure you want to delete ?
</div>
<div class="modal-footer">
<button type="button" class="btn actionBtn btn-danger"
#click.prevent="deleteItem()"
data-dismiss="modal">
Delete <span id="footer_action_button"
class='glyphicon glyphicon-trash'> </span>
</button>
<button type="button" class="btn btn-warning"
data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
HTML
<button type="button" #click.prevent="deleteItem()" :data-id="1" data-dismiss="modal">
Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span>
</button>
Vue
methods:{
deleteItem: function(){
var id = event.target.getAttribute('data-id');
console.log(id) // 1
}
}
Here is the demo https://codepen.io/maab16/pen/jONZpVG
I recommend doing a console.log(this) inside a component function, then calling that function on a button click so you can inspect all the properties of the component.
(See the attached image, below, for example output of the above console.log statement.)
This shows you that amongst others, you have access to the $el property holding the DOM element. Which opens up a whole lot of possibilities, such as being able to add the following code to the mounted lifecycle hook of your component:
mounted() {
console.log(this);
this.myAttribute = this.$el.getAttribute('data-attribute-name');
},
And for this example, this.myAttribute would have been defined in (for example) your data property:
// This value gets attributed during an earlier lifecycle hook.
// It will be overridden in the component's mounted() lifecycle hook.
data() {
return {
myAttribute: 'defaultvalue'
}
}
Vue.js (v2) Lifecycle hooks documentation
Example output when executing console.log(this) inside a component:
You can pass the "item.id" like this too:
<button type="button" #click="deleteItem(item.id)">Delete</button>
A simple option will be bind the id to the delete button as well
<button type="button" class="btn btn-danger"
#click.prevent="deleteItem(this)" :data-id=item.id data-dismiss="modal">
Delete
</button>
There is modal window in my jsp. I use it for both: add or edit my items. It decides what to do depends on "id": add if "id" is null, edit - if not null.
<div class="modal fade" id="editRow">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="modalTitle"></h2>
</div>
<div class="modal-body">
<form class="form-horizontal" id="detailsForm">
<input type="hidden" id="id" name="id">
...
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<button class="btn btn-primary" type="button" onclick="save()">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
Generally it works fine, but there is one scenario which does not work:
I open "edit" windows for some item
Don't save it, just close "edit" window
Open "add" window, enter some data
After saving it edit item from 1), instead adding new one
There is button on this jsp, which I press to call "add" window:
<a class="btn btn-info" onclick="add('<spring:message code="meals.add"/>')">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
There is "add" js function from this button:
var form;
...
form = $('#detailsForm');
...
function add(title) {
$('#modalTitle').html(title);
form[0].reset();
$('#editRow').modal();
}
I thought form[0].reset(); should prevent such wrong scenario, but seems it does not help. Could you explain?
Seems that reset() doesn't nullify your form's id, instead it will clear form's input.
https://www.w3schools.com/jsref/met_form_reset.asp