So i have this code for list-company.page.html
<div class="tab_container" [ngSwitch]="tab" *ngFor="let i of company_data">
<ion-list lines="none" *ngSwitchCase="'list'" >
<ion-item (click)="sendCompany(i.id)">
<div class="item_container">
<div class="syllabus">
<h3>{{i.name}}</h3>
</div>
<ion-row>
<ion-col size="7">
</ion-col>
<ion-col size="5" class="ion-text-end">
<div class="follow">
Follow
</div>
</ion-col>
</ion-row>
</div>
</ion-item>
</ion-list>
ion-list lines="none" *ngSwitchCase="'status'">
<ion-item *ng-init='getFollowedCompany()'>
<!-- <ion-item (click)="sendCompany(i.id)"> -->
<div class="item_container">
<div class="syllabus">
<h3>{{i.name}}</h3>
</div>
<ion-row>
<ion-col size="7">
<!-- <p class="d-flex">{{i.jml}} Questions
<span></span>
{{i.waktu || 0}} mins
</p> -->
</ion-col>
<ion-col size="5" class="ion-text-end">
<div class="follow">
Unfollow
</div>
</ion-col>
</ion-row>
</div>
</ion-item>
</ion-list>
</div>
So the idea is the first tab named List is showing a list of company from my DB with function getCompany() and to pick a company to choose
and then the second tab named Status is showing the company that has been choosen from the List tab with function getFollowedCompany()
The problem is i dont know how to set this to different function in the html page
This is the code :
getCompany()
this.api_url='https://exam.graylite.com/api/company'
await this.storage.get('email').then((val) => {
this.email = val
});
// console.log(this.email);
var formData : FormData = new FormData();
formData.set('email',this.email);
this.http.post(this.api_url,formData)
.subscribe((response) => {
if(response['message']=='error'){
this.presentToast(response['message']);
} else {
this.company_data = response['data'];
// this.name = response['data']['name'];
// this.company_id = response['data']['company_id'];
console.log(this.company_data);
}
});
getFollowedCompany()
this.api_url='https://exam.graylite.com/api/getuserapproval'
await this.storage.get('email').then((val) => {
this.email = val
});
// console.log(this.email);
var formData : FormData = new FormData();
formData.set('email',this.email);
this.http.post(this.api_url,formData)
.subscribe((response) => {
if(response['message']=='error'){
this.presentToast(response['message']);
} else {
this.company_followed = response['data'];
// this.name = response['data']['name'];
// this.company_id = response['data']['company_id'];
console.log(this.company_followed);
}
});
i want refresh app.component because in my sidemenu there is image and name so i store name and image in local storage but when i login and go to dashboard my app.component not refresh so need refresh app.components
My menu file
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="profile">
<img class="profile-picture" src="assets/imgs/user_profile.png" />
<h3 class="name">{{name}}</h3>
</div>
<ion-list class="bg-color-menu" no-lines>
<ion-item menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-item>
<ion-avatar item-start>
<img [src]="p.icon" />
</ion-avatar>
{{p.title}}
</ion-item>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
app.components
name:any;
this.name = localStorage.getItem("name");
Make your user data as BehaviorSubject.
Add a service - user.service.ts
export class UserService {
private currentUserSub = new BehaviorSubject<User>(null);
constructor(
private http: HttpClient
) {
const user = JSON.parse(localStorage.getItem('user'));
this.currentUserSub.next(user);
}
login(loginData): Observable<User> {
return this.http.post('login', loginData)
.map((res: any) => res.data)
.do((user: User) => {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSub.next(user);
});
}
getCurrentUserDetails(): Observable<User> {
const user = JSON.parse(localStorage.getItem('user'));
this.currentUserSub.next(user);
return this.currentUserSub;
}
}
call getCurrentUserDetails in app.component.ts to get the current user data
getUserDetails() {
this.userService.getCurrentUserDetails().subscribe(res => {
this.userProfile = res;
});
}
In app.html
<div class="profile">
<img class="profile-picture" src="userProfile.imgUrl" />
<h3 class="name">{{userProfile.name}}</h3>
</div>
this is an example. Do it as per your requirement.
Here I m getting data I applied the infinite scrolling but the items didn't show on my scroll page below is my code:
.html
<ion-list
*ngFor="let infi of IfoData;" (click)="Item(infi.Id)" >
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content>
<ion-item>
<div >
<p>{{infi.Cost}}</p>
</div>
</ion-item>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
.js
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.IfoData.push( this.IfoData.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
After implementing this code I am just getting empty screen the data is not showing in the template and without implementing this infinite scroll it is displaying.
Infinite scroll component must comes last element in ion-content. You should try like this
<ion-content>
<ion-list>
<ion-item class="itm" *ngFor="let i of IData;" (click)="goItem(i.Id,i.Name)">
<ion-avatar item-start role="img">
<img [src]="'data:image/png;base64,'+i.Image" style="width: 110px;">
</ion-avatar>
<div class="item-inner">
<h2 class="_nme">{{i.Name}}</h2>
<p class="_price">{{i.Cost}}</p>
<ion-icon name="arrow-dropright"></ion-icon>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
ion-infinite-scroll-content is to change the default spinner and add text in infinite scroll
Refer the docs for details
put infinite scroll at the last in ion-content
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
and in your ts file
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.iData.push( this.iData.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
Happy new year for all of you.
I have a problem to update item in list using http request:
This is my code: in ts
ionViewWillEnter() {
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
this.run_scriptsvis = setInterval(() => {
if (localStorage.getItem('sessionnewvisites') === '1') {
this.getnewvisit();
localStorage.removeItem('sessionnewvisites');
console.log('refresh');
} else {
console.log('no refresh');
}
}, 3000);
}
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
console.log(this.datacool);
});
});
}
In my html i have this:
<ion-row no-padding>
<ion-col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12>
<ion-list no-margin>
<ion-item-sliding *ngFor="let user of datacool" (ionSwipe)="delete(user)">
<ion-item style="min-height:10vh" class="cardcolor item-tittle" no-padding text-wrap (click)="openprofile(user.userid)">
<div item-left no-margin>
<img style="max-width: 80px;margin-left: 7px;" src="{{user.tnpicture}}">
</div>
<div item-top>
<h2 text-wrap><img src="{{user.online}}"> {{user.username}}</h2>
</div>
<div class="span-small">
{{user.age}} ans, {{user.gender}}
</div>
<div item-bottom>
<div class="span-small" text-left><ion-icon name="pin"></ion-icon> {{user.countyname}}</div>
<div></div>
<h3 left padding-left>{{user.date}}</h3>
</div>
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="delete((user.id))" >delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-col>
</ion-row>
The code work good and do the update when there are new data.
The problem is that I don't want to revome the older item and replace it with the new.
I want the new item in the top and the old item in bottom of the new.
Thank you so much for helping me
Thanks i have found the solution
users2: any[] = [];
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
for (let i = 0; i < this.datacool.length; i++) {
this.users2.push(this.datacool[i]);
}
console.log(this.datacool);
});
});
}
I have an app in Ionic v.1 and on page where I have a list of articles, I would like to have a splash screen until the first image is completely loaded, not sure how to do that?
This is the controller:
module.exports = angular.module('coop.controllers')
.controller('ArticlesController', function($scope, ArticleService, $state, $ionicScrollDelegate, $location, $ionicPosition, $ionicConfig) {
$scope.articles = ArticleService.all();
$scope.$on('$ionicParentView.afterEnter', function(event, data) {
$scope.videoPlaying = [];
$ionicConfig.views.swipeBackEnabled(false);
if (data.direction == 'back') {
$scope.doRefresh();
}
});
$scope.articleType = 'all';
$scope.articleFilter = function(button) {
$scope.articleType = button;
$scope.doRefresh();
};
$scope.showBulletPoint = function(which) {
return $scope.articleType == which;
}
$scope.like = function(article){
article.userLiked = !article.userLiked;
ArticleService.like(article)
};
$scope.doRefresh = function (){
var articleType = $scope.articleType ? $scope.articleType : 'all';
ArticleService[articleType]().$promise.then(function(data){
$scope.articles = data;
}).finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
$scope.videoPlaying = [];
$scope.playerVars = {
controls: 0,
showinfo: 0
};
$scope.playVideo = function(youtubePlayer, index) {
$scope.videoPlaying[index] = true;
youtubePlayer.playVideo();
};
$scope.$on('$ionicView.afterLeave', function(event, data) {
$scope.videoPlaying = false;
$ionicConfig.views.swipeBackEnabled(true);
//youtubePlayer.stopVideo();
});
});
And this the html:
<ion-view>
<div class="row articles-header">
<button menu-toggle="left" class="button button-icon icon ion-navicon-round"></button>
<div class="right-icons">
<!--<a class="button button-icon icon ion-ios-search-strong">
</a>-->
<a class="button button-icon" href="#" ng-click="articleFilter('all')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('all')"></i> Siste
</a>
<a class="button button-icon" href="#" ng-click="articleFilter('video')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('video')"></i> Video
</a>
<a class="button button-icon" href="#" ng-click="articleFilter('popular')"><i class="ion-ios-circle-filled" ng-show="showBulletPoint('popular')"></i> Populært
</a>
</div>
</div>
<ion-content class="articles-content">
<ion-refresher pulling-icon="false" on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="article in articles" class="item-light">
<div class="article">
<a ng-if="authenticated" ng-show="article.external_media.length == 0" ui-sref="main.article({id: article.id})" nav-direction="forward" class="article-image-link">
<img class="img" src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</a>
<a ng-if="!authenticated" ng-show="article.external_media.length == 0" ui-sref="main.articlePublic({id: article.id})" nav-direction="forward" class="article-image-link">
<img class="img" src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</a>
<a ui-sref="main.article({id: article.id})">
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.image != ''">
<img class="img" ng-src="{{ article.external_media[0].image }}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
<div class="iframe-overlay">
<div class="play">
<img class="playButton" src="icons/playRectangle.svg"/>
</div>
</div>
</div>
</a>
</div>
<div class="row article-meta" ng-class="{ 'has-comments': article.enable_comments }">
<a ng-click="like(article)" class="subdued col col-30">
<img class="social-images" ng-src="icons/{{ article.userLiked ? 'heart' : 'heart-outline' }}.svg"/> Lik
</a>
<a ui-sref="main.article({id: article.id, gotoComments: true })" class="subdued col col-60" ng-if="article.enable_comments">
<img class="social-images" src="icons/comment.svg"/> {{ article.commentCount }} Kommentarer
</a>
<a ui-sref="main.article({id: article.id})" nav-direction="forward" class="col col-10 article-link right">
<img class="social-images" src="icons/arrow.svg"/>
</a>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
One approach is to attach an onLoad handler to the images, and when the first image (or any other specific image, all, etc) have loaded you can remove your splash screen.
To do this we'll create a directive to handle the onload event, based on this outstanding solution from Peter, combined with the $ionicLoading loader.
var app = angular.module('app', ['ionic'])
app.controller('appCtrl', function($scope, $timeout, $ionicLoading) {
// Setup the loader
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
// Add a simple onLoad callback
$scope.onLoad = function (id) {
if (id === 0) {
$ionicLoading.hide();
}
}
$scope.items = [
{img: 'http://placehold.it/5000x8000/f9009a/ffffff'},
{img: 'http://placehold.it/5000x8000/f9009a/ffffff'},
{img: 'http://placehold.it/5000x8000/f9009a/ffffff'}
];
});
// The imageonload directive
app.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
//call the function that was passed
scope.$apply(attrs.imageonload);
});
}
};
})
Then use the directive:
<ion-item ng-repeat="item in items" href="#">
<img ng-src="{{item.img}}" imageonload="onLoad({{$index}})" id="img-{{$index}}" />
</ion-item>
When the app loads the $ionicLoading screen will be shown until the first image emits the onload event, causing the $ionicLoading screen to be removed.
For a working demo, see this Ionic Play demo.
The loading screen may only be noticeable the first time you load the demo, and on subsequent loads you might need to do a hard refresh.