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
Related
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);
}
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>
I am trying to fetch data asynchronously twitter rest API (fetching my tweets to be more specific), and after I do so, I display them as cards. My problem is when I delete a tweet, it does not reflect in my application.
here's a part of my code:
Twitter service provider.
fetchDataFromTwitter() {
return this.httpReader = this.http.get('url').map((resp) => resp).catch((err: any) => {
return Observable.of(undefined);
});
}
twitterList page
public dataFromTwitter:any;
ionViewDidLoad() {
this.tweetProvider.fetchDataFromTwitter().subscribe((data: any) => {
..
..
..
some string manuplation..and iterate threw array of tweets
this.dataFromTwitter.push({
screenName:tweet.user.screen_name,
placeOfId: tweet.full_text.slice(indexStart, indexEnd),
userId: tweet.full_text.slice(indexStartForToken,indexEndForToken)
})
});
}
in the view for the twitterList.html page
<ion-content padding>
<div *ngIf="dataFromTwitter">
<ion-card *ngFor="let data of dataFromTwitter">
<ion-item>
<h2 >user: {{data .placeOfId }}</h2>
</ion-item>
<p>token: {{data.userId}}</p>
<ion-item>
</ion-content>
the example might have errors but, but I hope the idea is clear.
In order to refresh the list after deleting an item, you could choose any one of the following methods
On deleting an element, call the get item call again to refresh the list
Remove(splice) the element from the data source array, this will block the data from showing in the UI.
I will suggest the second one be better.
Maybe you can try this one
Create ion-refresher for your .html files
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
Create doRefresh() method on .ts
data: any; // contain array of my data
ngOnInit() {
this.dataSampah();
}
async dataSampah() {
this.session_storage().then(() => {
this.postPrvdr.getData(`tps/invoice?id_tps=` + this.id_tps).subscribe(res => {
this.data = res.data;
}, err => {
console.log(err);
});
});
}
doRefresh(event) {
this.data = null; // this is replacement of splice
this.ngOnInit(); //
setTimeout(() => {
this.router.navigate(['/invoice-sampah']);
event.target.complete();
}, 2000);
I'm trying to create a very simple lookbook application. Yet I can't seem to get the routes to work. I tried the answer to this question to debug the routes. Nothing appeared in the console.
I'm trying to create an application where the user sees several looks on a page and can then navigate to the respective details page. It would be nice if Ionic also recognizes that the details page is a child page of the lookbook page. Thus showing the back button in the menu bar.
The app.config route setup code:
$stateProvider
//Lookbook view
.state('lookbook', {
url: '/lookbook',
views: {
'main': {
templateUrl: 'templates/lookbook.html',
controller: function () {
console.log('Lookbook controller loaded!');
}
}
}
})
// Details view
.state('lookbook.brand-shirt', {
url: '/lookbook/brand-shirt',
views: {
'main': {
templateUrl: 'templates/brand/shirt.html',
controller: function () {
console.log('Details controller loaded!');
}
}
}
});
$urlRouterProvider.otherwise('/lookbook');
The index.html <body> contents:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title>
<img class="logo" alt="Lookbook Logo" ng-src="assets/images/icons/logo.svg">
</ion-nav-title>
</ion-nav-bar>
<ion-nav-view name="main">
</ion-nav-view>
The lookbook page shows up. But when I navigate to /lookbook/brand-shirt it reverts back to /lookbook.
What is it that I'm missing?
In that routing, the brand-shirt state is a child of the lookbook state (lookbook.brand-shirt), as you don`t want to load the detail INSIDE the lookbook view, you don't need to make it like that.
$stateProvider
//Lookbook view
.state('lookbook', {
url: '/lookbook',
views: {
'main': {
templateUrl: 'templates/lookbook.html',
controller: function() {
console.log('Lookbook controller loaded!');
}
}
}
})
// Details view
.state('brand-shirt', {
url: '/lookbook/brand-shirt',
views: {
'main': {
templateUrl: 'templates/brand/shirt.html',
controller: function() {
console.log('Details controller loaded!');
}
}
}
});
$urlRouterProvider.otherwise('/lookbook');
Do it like that. And the history will work the same because you are pushing views in your 'main' ion-nav-view. So at the start of your app /lookbook is loaded in main, when you go to brand-shirt, that new view goes above in the main views stack. If you go back, you will be removing the details view and going back to the lookbook.
CodePen
Here is my code..If I remove close modal function,there is no effect. If I click any where outside the modal, the modal closes. But I need this close modal function as I need to set a flag in it for further use. How can I proceed further?
$scope.$on('$ionicView.afterEnter', function() {
$scope.openModal();
}
$ionicModal.fromTemplateUrl("settings/settingsModal.html", {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function(){
$scope.modal.show();
}
$scope.closeModal = function(){
$scope.modal.hide();
};
}
There are a two ways of implementing modal in Ionic. One way is to add separate template and the other is to add it on top of the regular HTML file, inside script tags. First thing we need to do is to connect our modal to our controller using angular dependency injection. Then we need to create modal. We will pass in scope and add animation to our modal.
After that we are creating functions for opening, closing, destroying modal and the last two functions are place where we can write code that will be triggered if modal is hidden or removed. If you don't want to trigger any functionality when modal is removed or hidden you can delete the last two functions.
Controller's Code:
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
HTML Code :
<script id = "my-modal.html" type = "text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class = "title">Modal Title</h1>
</ion-header-bar>
<ion-content>
<button class = "button icon icon-left ion-ios-close-outline"
ng-click = "closeModal()">Close Modal</button>
</ion-content>
</ion-modal-view>
</script>
There are also other options for modal optimization. I already showed how to use scope and animation. The table below shows other options.
Modal options
The close modal function is meant for situations where you would like to close the modal manually. For example after a certain time it has been open or if something happens/the user does something for example presses a button.
There are ways of listening to when the modal is hidden/removed which will suit your situation and needs. For example:
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
console.log('modal was hidden');
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
console.log('modal was removed');
});
With these you should be able to do what I understood you are wanting to do.
Straight from the documentation: http://ionicframework.com/docs/api/service/$ionicModal/