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' });
}
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)
I am having difficulties trying to get my modal to come up. I am not sure if it is because modal is not compatible with angular-gantt or if I have the code wrong. At the moment I get a darker screen as if there should be a modal there.
Here is the code for the button in the gantt:
JS:
'content':'<i class=\"fa fa-cog\" data-toggle="modal" data-target="#hp_modal" ng-click="scope.show_details(task.model)"></i>' + 'Gant Object'
Html:
<div class='modal fade' id='hp_modal'>
<div class='modal dialog'>
<div class='modal-content'>
<div class="modal-header">
<h3>This is HP modal</h3>
</div>
</div>
</div>
</div>
And here is an Image of after I click on the cog:
https://imgur.com/a/CazzaLK
You need to remove all the class modal modal-dialog and modal-content
Angular already create them automaticly when you open your modal.
You just keep this tags :
<div class="modal-header">
<h5 class="modal-title">My Title</h5>
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" class="form-control" autofocus/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
Then if you need to use some features such as modal-dialog-centered, you need to use the NgbModalOptions on open method :
this.modalRef = this.modalService.open(
this.dialogTemplateRef,
{centered:true}
);
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');
}
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>
I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.
Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">
The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}
I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">
try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;