I have a crud application where i click on the delete button and it should reflect me a modal, in which i want to ensure delete or not ,while clicking on delete it should delete the data specific.
I have Tried calling it,but i don't know to pass the actual data is not getting it is reflecting me undefined.what should i do for passing the data from one component to another page modal component.
giving you stackbltiz.
while clicking on delete button after confirmation it should delete.and getting error of the undefined id.
You are using ng-bootstrap modal. You can open the modal using the syntax after importing the deleteModalComponent :
modalOptions: NgbModalOptions;
let modalRef = this.modal.open(DeleteModalComponent, this.modalOptions);
When you are in the deleteModalComponent then you can use this:
modalRef.componentInstance.deleteEvent.
pipe(takeWhile(() => keepPvSubscription)).
subscribe(delete => {
modalRef.close();
},
});
Related
This is my first time asking a question here so if you need more information just let me know.
I’m using JavaScript with the handlebars framework.
I have a bootstrap modal which has a form in it. I have 3 buttons on this form (‘cancel’, ‘save’, and ‘save and add another’)
I need the ‘save and add another’ button to submit the form (Which adds the item to the DB), refresh the page behind it so that the list on the page shows the newly added item, and finally keep the modal open so that another item can be added.
I think I have a solution. This snippet is called on the form submit and as the callback of the DB function. I didn't need to refresh the view, just the list that I was changing.
modalPopup.on("hidden.bs.modal", function() {
if (addAnother) {
modalPopup.modal("show");
addAnother = false;
}
})
itemTable.bootstrapTable('refresh');
modalPopup.modal("hide");
I want to make custom confirmation modal whenever user wants to delete his own post. How to approach that to use as less as possible code? I was thinking about independent component with logic inside (user can send via props function on yes/no, etc) but the problem I can't figure out is how to mount this component when user click on a button? Do I need to use local state inside every component when I need to use modal? Something like:
showModal ? <Modal onYes={()=>{}} onNo={()=>{}} title='whatever you want' /> : ''
Can I achieve that in other way? I hope I explained well.
You can use HOC as well. Keep show/hide state inside HOC and then pass props/functions (with currying) from Parent component
Small example - https://codesandbox.io/s/withtoggle-hoc-8bd0r
I have home page that lists items, but also when I add an item I want to popToRoot(), to home page. Now, If I come to root from addItemPage, I want to show the button to save a list, to make a HTTP call..
Is it possible, I was thinking about passing the for example (fromAdd: true) to navCtrl and then based on that show the button(ngIf) ?
You can use any of the rootscope variables, navparams and service to set the value on the parent page and then access it in your ng-init function declared on you child page and show your button on the basis of that value by using ngIf expression.
Say, I am showing some posts that I got from an ajax response. Now I want to add the option to edit any particular post on clicking some button. I guess, I could do it using v-show, where I will attach a form component or something with every single post and when the user clicks the edit button I will hide the post div and show the form with post's body and title and again on clicking save I could hide the form, send a request to the server to update the post then show it again.
Now my question is, is it doable without attaching and hiding anything in the first place? Because, how many times will I get users wanting to edit their posts? I want to call a function or something else with the post on some button click which will return a component with one or two text fields that have post data as their value.
Is it even possible using Vue?
You can append a component to another this way:
// the parent component
const CommentComponent = new Vue({
template: '<div>...</div>'
})
// the child component
const EditCommentComponent = Vue.extend({
template: '<div> child </div>'
})
CommentComponent.$addChild({}, EditCommentComponent).$mount().$appendTo(CommentComponent.$el)
If you wish to do this within the parent component, you can do this by replacing a with this.
- Source
Although as I have inferred from the comments, this would not be the most appropriate way to handle your case.
On one of my pages (which has
<button class="button button-small button-balanced" data-ion-modal="reviewPopup">
leave review
</button>
in that Modal I have a form that, when I click a button for, should send data to the server from both the Modal and the template from template a. I can get data from the form in the Modal just fine, but I can't access any data from the calling page (specifically I need the _id). Calling Template.parentData just returns null.
Instead of triggering the modal from the template using data-ion-modal="reviewPopup", you can trigger the Modal from your button event, for example -
Template.templateName.events({
'click #review-popup': function() {
//capture data from parent template first
//....
var parentDataContext = {some data}
IonModal.open("reviewPopup", parentDataContext);
}
})
After the modal opens, the parent data can be accessed using this in the modal helpers.
I believe that Template.parentData (from the modal) will be returning either the body template, or another top level template specific to the meteoric framework. Either way,
If you were using a different framework where you specifically add the modal template to the page somewhere I'd suggest passing in _id as a template parameter.
But with meteoric, as far as I know, you can't do that - so you may have to use something with global scope.
If you are using a router, and have the _id as part of the route, get it from there (e.g. FlowRouter.current().params ).
Or just use the simplest option and use a Session variable. Set it in a onRendered function, access it in the Modal's event functions