I am trying to code a login component for my application in Angular 2 version rc-1. But I did not find how to open my modal without a button action.
When I load my app, I check if the user is logged or not (with the localStorage) : if he is not logged the login modal had to be openned.
So open/close modal is conditionned by a boolean parameter and not a action button.
Do you know how can I open a login modal without a button action ?
Thanks in advance,
Lets say you have a component that holds your modal.
export class YourModalComponent {
constructor () {}
public open(): void {
//show modal
}
}
And then you have a component that checks the local storage and has YourModalComponent as a children. If the user is logged in you just call modal.open().
export class YourParentComponent {
#ViewChild(YourModalComponent)
public yourModal : YourModalComponent;
constructor() {}
public ngAfterViewInit(): void {
//check if user is logged in
if(!userIsLoggedIn) {
this.yourModal.open();
}
}
}
You can also have the div displaying with ngIf so the YourModalComponent is only displayed if it meets the condition.
Related
If, in my React Native application, I have some Java code like this:
public class MainActivity extends ReactActivity {
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KEYCODE_BUTTON_16) {
rfidScanning.startScanning();
return true;
} else {
return super.onKeyDown(keyCode, event);
}
}
The contents of onKeyDown will be called unless I have a React Native Modal component visible.
Why does the modal visibility change this, and how can I make it fire anyway or do something equivalent (such as capturing the event somewhere else in my Java code)?
Actually I think I found the problem. It looks to me like the relevant modal code is here:
https://github.com/facebook/react-native/blob/b531612b2c917e1f2bd6bb37bf854fe51e658b36/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L221
They actually handle the onKeyUp and not the onKeyDown. I confirmed this by verifying in my own code that onKeyUp fires with the modal open, but onKeyDown does not.
Wow.
I created an issue document for the bug here:
https://github.com/facebook/react-native/issues/32827
I am checking the livewire-ui/modal as described in this github page
The modal is showing properly when the open button is clicked but it never closes whatever the mean used is, e.g. :
clicking away
using the escape touch
using a close button with this code
<button wire:click="$emit('closeModal')">No, do not delete</button>
usinge a close button with this code
<button class="button-link" wire:click.prevent="close()"> Poster</button>
and having the close function in the modal like this:
<?php
namespace App\Http\Livewire;
use LivewireUI\Modal\ModalComponent;
class Hello extends ModalComponent
{
public function render()
{
return view('livewire.hello');
}
public function close(){
$this->closeModal();
}
}
The functioning was due to the fact that I had 2 alpine in the page
One as directly in the page (CDN) and the other inside app.js (require 'alpinejs'). I just kept require 'alpinejs' and now it works.
A modal is opened, which has multiple pages. For the navigation I'm using frame navigation. There is a close button on every page clicking on which closes the modal.
What I'm doing now is passing this.$modal as a property to each page which creates a long chain of property passing and on each page I just do this.modal.close() where this.modal is the property of the component that refers to the this.$modal of the first page.
I was wondering if there was a better way, such as accessing the topmost open modal and closing it.
I'm using nativescript-vue and the builtin nativescript modals
Please note that I have multiple modals in other parts of my application. there is only this one that has navigation in it.
A small improvement could be saving the modal into the Vuex store, accessing it anytime instead of chaining props.
Detach modal component by plugin.
const modalDialog = {
install (Vue, options = {}) {
// ...
}
}
Vue.use(modalDialog)
Designate Vue prototype for plugin.
const modalDialog = {
install (Vue, options = {}) {
Vue.prototype.$modal = {
show () {
// ...
},
hide () {
// ..
}
}
}
}
Vue.use(modalDialog)
this.$modal is accessible from all components.
this.$modal.show() // or hide()
I am showing an custom component("my-addmodule") inside the modal Dialog custom component( "my-modal-dialog") as below,
<my-modal-dialog [showFooter]="false" #addModuleDialog>
<my-addmodule (hideDialog)="hideAddModalDialog($event)" (reloadGrid)="reload($event)" #addModule></my-addmodule>
</div>
</my-modal-dialog>
Now the problem is that, each time, I close the modal dialog, angular is not destroying "my-addmodule" component. So when I open the modal-dialog again, I see the same state of "my-addmodule" component ( some drop-down selection and previously entered value in textbox etc).
I want angular to destroy component when I close the modal-dialog and re-create the component on opening the modal-dialog.
I tried adding the below code ""my-addmodule" component,
export class AddModuleComponent implements OnInit, OnDestroy {
public destroyComponent(){
this.ngOnDestroy();
}
ngOnDestroy(): void {
console.log("Add module is destroyed");
}
}
but when I call "destroyComponent" function on the modal-dialog hide() function, I get error "this.addModuleDialog.destroyComponent is not a function".
following is my parent component ts file, who is using above mentioned two component,
ParentComponent.ts
export class ParentComponent implements {
#ViewChild('addModuleDialog') addModuleDialog;
#ViewChild('addModule') addModule;
showAddModuleDialog(e: any): void {
e.preventDefault();
this.addModuleDialog.show();
}
hideAddModalDialog(e: any): void {
this.addModuleDialog.hide();
this.addModule.destroyComponent();
}
}
Parent.Component.html
<my-modal-dialog [showFooter]="false" #addModuleDialog>
<my-addmodule (hideDialog)="hideAddModalDialog($event)" (reloadGrid)="reload($event)" #addModule></my-addmodule>
</div>
</my-modal-dialog>
*I am using this code in my controller, inserting this controller dependency is breaking the whole code. *
$state.get('shop').onExit = function(){
modalCtrl.openModal(modalViewUrl,null);
//calling a controller which has the functions to open $modal
//handle modal submitHandler
}
1.this event will be invoked when user navigates away from the page:
$scope.$on('$locationChangeStart',function(event){
//action to be performed
event.preventDefault();
$('#modalName').modal();
});