My modal opens and should show a previously selected image. My problem is that only the first time I open it brings up the image The images exist, I analyze them on the console and I see them if I browse them. There is no error here.
The case of upper and lower case I have reviewed it.
the problem is with images, not with text information, the information is perfect.
For some reason, it stops emitting ionImgDidLoad and ionImgWillLoad.
I will appreciate if you can help me, I can not see the error, thank you very much!
ts:
import { ModalExamplePage } from '../modal-Example/modal-Example.page';
…
public info_to_modal = {};
…..
this.info_to_modal = {
photo: this.img_1,
name: this.name
}
I call the modal like this inside an async function:
const modal = await this.modalController.create({
component: ModalExamplePage,
cssClass: 'my-custom-modal-info',
componentProps: {
datainfo: this.info_to_modal
},
});
return await modal.present();
in modal (ts):
#Input() public datainfo;
Then in the html:
<ion-thumbnail slot="start">
<ion-img [src]="datainfo.photo"></ion-img>
</ion-thumbnail>
Related
i want to make a uploading in modal page,but it shows error:
"NG0303: Can't bind to 'uploader' since it isn't a known property of 'input'."
but actually i have imported all the components including app.module.ts( entryComponents:[ModalPage])
my modal html page:
<ion-col>
<input type="file"
id="input-btn"
accept="."
ng2FileSelect
[uploader]="uploader"
multiple
(change)="selectedFileOnChanged(file)"
/>
</ion-col>
my modal ts :
public async selectedFileOnChanged(file: HTMLInputElement) {
this.uploader.queue[0].upload();
...
}
on my main page i click to call modal page
with below function to call:
async presentModal(obj: string) {
const modal = await this.modalController.create({
component: ModalPage,
swipeToClose: true,
mode: "ios",
cssClass: 'my-custom-class',
presentingElement: this.routerOutlet.nativeEl,
componentProps: {
'firstName': obj,
'lastName': 'Adams',
'middleInitial': 'N'
}
});
await modal.present();
}
how to use all other components correctly in ionic modal
thank you very much
I'm using Ionic and Firestore for my web appllication. In a component I show a list of items from firestore database,the detail of an item in url tabs/items/list-detail/ and other button to modify images, then there is a button to return the url tabs/items/. Afterwards, if I return to the tabs/items/list-detail page I would like the list to be reloaded with the modified items, but the page remains the same.
I have tried using ViewWillEnter but doesn't work.
In html page of items there is a button to navigate to detail page:
<ion-button id="detail" *ngIf="registeredAndUpl?.registered!=true" [routerLink]="['/tabs/items/list-detail',id]">View</ion-button>
This is the component list-detail Page:
export class DetailPage implements OnInit, ViewWillEnter {
items: any
userId: any
item0: any
item1: any
constructor(private route: ActivatedRoute, private router: Router,
public authService: AuthenticationService,
) {}
ngOnInit() {
}
ionViewWillEnter() {
this.myDefaultMethodToFetchData();
}
myDefaultMethodToFetchData() {
console.log("IN")
this.getItems().then((data) => {
console.log("IN2222")
this.items = data
this.item0 = this.items[0];
this.item1 = this.items[1];
})
this.userId = this.authService.userData.uid;
}
returnItems(){
this.router.navigate(['/tabs/items/']);
}
getItems() {
const itemsRef = firebase.firestore().collection("user_orders/" + this.userId+"/reservations")
.where("ordini", "<", 10).limit(5);
return itemsRef.get()
.then((querySnapshot) => {
return querySnapshot.docs.map(doc => doc.data());
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
}
Then, in html page I have a button to return the items:
<ion-content>
<div class="flexbox-container" style="display:flex;">
<div *ngIf="item0" class="sidebar" style="flex:1;">
<video id="video1" height="320" width="240" controls>
<source src="{{item0?.downloadURL}}" type="video/mp4">
<source src="{{item0?.downloadURL}}" type="video/ogg">
</video>
</div>
<div *ngIf="item1" class="main" style="flex:1;">
<video id="video2" height="320" width="240" controls>
<source src="{{item1?.downloadURL}}" type="video/mp4">
<source src="{{item1?.downloadURL}}" type="video/ogg">
</video>
</div>
</div>
</ion-content>
<ion-button id="button1" (click)="returnItems()">Return</ion-button>
What am I doing wrong?
I've noticed that every time I switch from items to list detail page, using the ionViewWillEnter() method, and try to print something in console, the print is recalculated but the data remain the same, so the problem I think is in html page:
ionViewWillEnter should work. Try ionViewDidEnter.
Maybe is late for an answer in this question but i think will be useful for future users.
Related to OP question the mos efficient way is that using Events. It is something similar of use of custom events in javascript.
Using events you can do or refresh everything even in cached pages/components.
Below shows how you can subscribe a listener then call the event from everywhere, doing that listener to intercept the event you have raised.
Page that needs to be refreshed after back button is pressed
page.ts
constructor(
private events: Events
) {}
ngOnInit() {
this.events.subscribe('back_refresh', (data) => { /*Do your operations here as it's always called */ });
}
Page where back button is present
page.html
<ion-back-button (click)="this.goBack()"></ion-back-button>
page.ts
constructor(
private navController: NavController,
private events: Events
) {}
private goBack(): void{
this.navController.pop();
// also you can pass your data here
this.events.publish('back_refresh', null);
}
I am using ion-popover.
In the example in the docs, when you click the three dots at the top right, the popover is shown right next to the clicked button.
What would be a good way of reproducing this? Is there a built-in way of doing it?
Since I didn't find a way, I am trying to set the styles for the popover manually, but that doesnt work either.
My page.ts
const popover = await this.popoverController.create({
component: OptionsComponent,
cssClass: 'my-custom-class',
event: ev
});
return await popover.present();
My global.scss
.my-custom-class .popover-content {
position: absolute;
right: 0;
top: 0;
}
Am I doing something wrong? Is there a better way to approach this?
It's explained in the docs (emphasis mine) :
To present a popover, call the present method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the present method.
HTML
<div (click)="showPopover($event)">
<div>AAA</div>
</div>
In your class, pass the event as an argument to your method:
showPopover(event) {
const popover = await this.popoverController.create({
event,
component: OptionsComponent,
cssClass: 'my-custom-class', // optional
});
return await popover.present();
}
No need for extra CSS unless you want to style the content of your modal.
I have a huge delay in my app from when a user takes a photo to when android processes the image.
The issue of delay in Expo with android camera has been answered here: Delay on the capture of an image - React Native Camera / Expo Camera.
I am trying to see if, as well as see skipProcessing on takePictureAsync, is there a way to set a callback for on processing? I would like to let the user know something is happening, or they may try to take another photo (the camera stays open until the image has been processed, which is not ideal).
Here is my code:
export default class CameraComponent extends Component{
constructor(props) {
super(props)
}
render() {
<Camera
ref={(ref) => {
this.camera = ref;
}}
type={Camera.Constants.Type.back}
>
<TouchableOpacity
onPress={this.takePicture}
>
<View>
<FontAwesome
name="camera"
/>
</View>
</TouchableOpacity>
</Camera>;
}
takePicture = async () => {
const photo = await this.camera.takePictureAsync({
skipProcessing: true,
});
this.props.navigation.navigate("CameraConfirm", {
img_url: photo.img_url,
img_base64: photo.img_base64,
});
}
}
I can't see anything in the docs, is there maybe a way around in React Native? I tried setting state, but that still happens after takePictureAsync so has no effect.
I found one workaround which uses camera2API and onPictureSaved. The docs say there could be issues with camera2API, although I did not see anything weird going on (as yet).
The code now looks like this:
export default class CameraComponent extends Component{
constructor(props) {
super(props)
this.state = {
is_photo_taken: false,
};
}
render() {
<Camera
ref={(ref) => {
this.camera = ref;
}}
type={Camera.Constants.Type.back}
// add styling to show/hide camera:
style={{
display: this.state.is_photo_taken ? "none" : null,
}}
useCamera2Api={true} // add this line
>
<TouchableOpacity
onPress={this.takePicture}
>
<View>
<FontAwesome
name="camera"
/>
</View>
</TouchableOpacity>
</Camera>;
// add loading element with conditional show/hide:
<Text
style={{
display: !this.state.is_photo_taken ? "none" : null,
}}
>
Loading image...
</Text>
}
takePicture = async () => {
const photo = await this.camera.takePictureAsync({
onPictureSaved: this.setState({ is_photo_taken: true }), // add this line
// remove skipProcessing
});
this.props.navigation.navigate("CameraConfirm", {
img_url: photo.img_url,
img_base64: photo.img_base64,
});
}
}
Also, since onPictureSaved is now being used, it means that skipProcesssing can now be omitted, if not needed.
I used show/hide instead of ternaries or && around the entire block to avoid losing the camera element from the page. If the camera element were to be lost as soon as a photo was taken, then it could not continue and process the image.
I hope this helps someone.
I have set the on-tap value of a div to open a modal which is defined in the page's controller. The div is part of an ng-repeat section. The modal function also accepts some variables passed to it by the div.
When the app is first started on my device (iPhone 6 running iOS 7), I have to tap the div three times before the modal will open. After that, it opens consistently when I tap. But when the app first starts, I have to tap the div 3 times.
There are no errors at all in the console. Once the modal does open, it works as expected.
Any advice?
Here's the code:
HTML
<div on-tap="doModal('{{embed.ID}}','reply','{{embed.oembed}}','{{embed.user}}');">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72" width="100" height="50">
<path d="imagestuffhere"/>
</svg>
</div>
CONTROLLER
$scope.doModal = function(this_ID,modaltype,this_oembed,this_user) {
$scope.contact = {
name: this_ID,
info: modaltype,
oembed: this_oembed,
user: this_user
}
if (modaltype == 'repost') {
$scope.modaltempl = 'templates/repost-modal.html';
}
else if (modaltype == 'reply') {
$scope.modaltempl = 'templates/reply-modal.html';
}
else if (modaltype == 'like') {
$scope.modaltempl = 'templates/like-modal.html';
}
else {
$scope.modaltempl = 'templates/like-modal.html';
}
$ionicModal.fromTemplateUrl($scope.modaltempl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
$scope.modal.show();
console.log($scope.modaltempl);
});
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
I've tried pulling the $ionicModal.fromTemplateUrl($scope.modaltempl, bit outside of $scope.doModal and calling $scope.modal.show from within $scope.doModal, but the result is the same.
It definitely gets to the scope.modal.show(); statement even when the modal does not open, because the console.log I've included just after it gets output.
Before I had added the svg to the interface, I was testing this using a button element and had the same issue. It also had the same issue when I used ng-click instead of on-tap.
Thanks for any help!
Turns out the issue was not in the Ionic controller code nor the triggering html, but in the modal template, itself.
Per the Ionic documentation, I had each of my modal templates wrapped in this:
<script type="text/ng-template" id="repost-modal.html"></script>
By removing that and replacing it with just <ion-modal-view></ion-modal-view> the issue was resolved and the modals now open very nicely on the first click.