How to make ionic tab with two different function - ionic-framework

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);
}
});

Related

When there is no text on ion-search bar the list should hide?

i stuck , please help me
I am using ion-searchbar , i want that when there is no text on the searchbar the list must be hide but the list is still showing
Can anyone help me?
in .html file
<ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts file
getItems(ev) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the ev target
var val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
You can use ngModel and ngIf :
<ion-searchbar [(ngModel)]="searchInput" (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="searchInput !== ''">
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts:
public searchInput='';
OR
If your variable items is empty at initalization :
<ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="items && items.length">
<ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
{{ item }}
</ion-item>
</ion-list>
in .ts:
public items = [];

refresh app.components in ionic 3

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.

How to make ionic 3 autoscroll for chat app work?

I have tried every solution but nothing has worked. I am building a chat app where i want it to be scrolled to last message automatically,also when new message comes it scrolls to the bottom.
I have tried scrollTo() on the #content but it doesn't work
chat.html
<ion-content #content *ngIf="buddy">
<div class = "chatwindow">
<ion-list no-lines *ngIf="allmessages">
<ion-item *ngFor = "let item of allmessages; let i = index" text-wrap>
<ion-avatar item-left *ngIf="item.sentby === buddy.uid">
<img src="{{buddy?.photoURL}}">
</ion-avatar>
<div class="bubble me" *ngIf="item.sentby === buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
<ion-avatar item-right *ngIf="item.sentby != buddy.uid">
<img src="{{photoURL}}">
</ion-avatar>
<div class="bubble you" *ngIf="item.sentby != buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
chat.ts
#ViewChild('content') content: Content;
scrolltoBottom() {
setTimeout(() => {
// this.content.scrollToBottom();
}, 1000);
}
Your code should be like this.
export class ChatPage {
#ViewChild('content') content: Content;
constructor(public navCtrl: NavController) {
this.scrolltoBottom()
}
scrolltoBottom() {
setTimeout(() => {
this.content.scrollToBottom();
}, 300);
} }

Ionic update item inside page with http request

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);
});
});
}

Sharing data between pages in ionic

I am working on an ionic project.I want to share data between pages. Below is what I have done. But it is not working.Can some one tell me what I am doing wrong.I let the user to add the data to my reminder.html page and I want to show that added data in my meds.html.
This is my services.js
.factory('Authorization', [function() {
authorization = {};
authorization.drug = "";
return authorization;
}]);
This is my controller.js
.controller('reminderCtrl', ['$scope', '$stateParams','Authorization'
function ($scope, $stateParams,Authorization) {
//$scope.user = Authorization;
}])
.controller('medsCtrl', ['$scope', '$stateParams','Authorization',
function ($scope, $stateParams,Authorization) {
//$scope.user = Authorization;
}])
This is my app.js
controller('medsCtrl', function($scope, Authorization) {
$scope.user = Authorization;
})
.controller('reminderCtrl', function($scope, Authorization) {
$scope.user = Authorization;
})
This is my reminder.html. The page that I used to add data.
<button class="button button-royal icon ion-android-done" ng-click = "add(user)" ></button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
<form id="reminder2-form7" class="list">
<label class="item item-input" id="reminder2-input9" >
<input type="text" placeholder="Drug" ng-model = "user.drug" >
</label>
This is my meds.html page .This is the page that I want to show the data that I was added to the reminder.html.
<ion-view title="Meds" id="page14">
<ion-nav-buttons side="right" class="has-header">
<button class="button button-royal icon ion-android-add-circle"></button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
<ion-list id="meds-list6">
<label class="item item-input" id="meds-search3">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="med name">
</label>
<ion-item class="item-thumbnail-left dark" id="meds-list-item21">
<img src="img/CynoZgjCQlSOdh14y24s_drug-disposal.jpg">
<h2dark>Metformin
<p>for diabetes</p>
</h2dark>
</ion-item>
<ion-item class="item-thumbnail-left" id="meds-list-item22">
<img src="img/ZVN6KzlgTP2WdrghQtCH_images.jpg">
<h2>Drug:{{user.drug}}</h2>
</ion-item>
</ion-list>
<a ui-sref="medDiary2" id="meds-button7" class="button button-royal button-clear icon ion-android-add-circle"></a>
<a ui-sref="searchMeds" id="meds-button10" class="button button-royal button-clear icon ion-android-search"></a>
<a ui-sref="reminder" id="meds-button25" class="button button-royal button-clear icon ion-android-alarm-clock"></a>
</ion-content>
</ion-view>
You can use $broadcast in reminderCtrl controller
$scope.addData = function () {
var addObj = {};
// your logic here
$rootScope.$broadcast('add-event', { addedObject: addObj });
}
and listen back to previous event using $on in medsCtrl controller
$scope.$on('add-event', function(event, args) {
var addedObject = args.addedObject;
// Do what you want to do with passed object
console.log(addedObject)
});