Develop Reference

How to load X chat messages in typescript?

I'm making a web chat application with ionic, and I'm having trouble with how many messages I show/load. My code to load the messages from the database is this:
<ion-item *ngFor="let mesage of messages | slice: 0:slice" class="msg">
<ion-row>
<ion-text color="tertiary"><b>{{ mesage.user }}: </b></ion-text>
<ion-text color="secondary"> {{ mesage.text }}</ion-text>
</ion-row>
</ion-item>
With this, I load from the first message on the database to message[slice], and when I load more items, I just augment slice's valor, but what I don't know what to do is to only load, for example, the last 10 messages and then load the new ones when they come

If anyone got the same problem, I just loaded the messages from an index (depending on how many msg there are, it's size varies) like this:
*ngFor="let message of messages | slice: ind:messages.length"
(When pushing a new message, it needs to do ind-- to add 1 more message, otherwise it doesn't show the first message that was loaded there)

How to switch from graph view and tableview with a toggle button in Ionic 6/Angular?

I have two components to show data. The table view and the graph view. Both components has the same data. I use a toggle switch button to switch between these views. This is my code:
<ion-header>
<ion-toolbar class="toolbar-color">
<ion-title>Views</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
<div class="ion-text-start">
<ion-item>
<ion-label>Switch to table view</ion-label>
<ion-toggle (click)="showTable()"></ion-toggle>
</ion-item>
</div>
</ion-col
</ion-row>
<ion-row>
<ion-col>
<app-tableview hidden="true" id="tableview"></app-tableview>
<canvas height="200" #lineCanvas></canvas>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The default view is the graphview via chart.js. Both components works fine. This is my code to hide and show:
showTable() {
if (this.tableHidden === true) {
this.tableHidden = false;
document.getElementById("tableview").hidden = false;
} else if (this.tableHidden === false) {
this.tableHidden = true;
document.getElementById("tableview").hidden = false;
}
}
When I click on the toggle switch it doesn't hide the graphview but it shows the table view among each other. I have tried the visibility from this post but doesn't work.
JavaScript hide/show element
How can I switch between the components and show only view?
JSFiddle link: https://jsfiddle.net/f8a3wgxb/

An example based off #alex87's comment:
<ng-container *ngIf="!tableHidden">
<app-tableview id="tableview"></app-tableview>
</ng-container>
<ng-container *ngIf="tableHidden">
<canvas height="200" #lineCanvas></canvas>
</ng-container>
Doesn't have to be an ng-container, but that Angular-only tag will not add anything to the DOM. You can always use a or anything else to do just the same...
You can also neaten it up by using an *ngIfElse...
https://angular.io/api/common/NgIf
Note: I tend to go overboard in my tag wrapping, thus the ng-containers, but *ngIf is typically available on almost all tags, as is hidden - per your usage.
Edit: Fixed the hidden variable name - I was lazy and didn't go back up to find what exactly you'd called it.
Edit #2: You can tidy up and minimise your setting of the hidden variable, instead of needing the if/else.
// This toggles between true/false
this.tableHidden = !this.tableHidden;
document.getElementById("tableview").hidden = !this.tableHidden;
Reduced to only two lines.

Modulo returns a Template parse errors

I'm trying to code a very simple calendar displayer for my ionic app (it's basically just Angular). I'm storing informations for each date in an array displayedCal.
It bugs when I'm trying to make a new row for each week using *ngIf="(i%7)==0" : this gives me a parse error. What would be the correct way of doing this?
<template ngFor let-d [ngForOf]="displayedCal" let-i="index">
<ion-row *ngIf="(i%7)==0">
<ion-col (click)="...">{{d.displayedDate}}</ion-col>
</ion-row *ngIf="(i%7)==0">
</template>
Note to non-ionic developpers <ion-row> and <ion-col> are pretty much like a <tr>/<td> structure ...
N.B.: If I just remove the ngIf my code is actually working.

ngIf applies to the whole block, not just your line of code. But even if this would work it still doesn't make sense for your purpose.
You could change your displayedCal array to a multidimensional array in this form: displayedCal[week][day] and then make a nested loop:
<template *ngFor="let week of displayedCal">
<ion-row *ngFor"let day of week">
<ion-col (click)="...">{{day.whatever}}</ion-col>
</ion-row>
</template>
However date and time is a delicate matter. You should consider your data model carefully.

I did not want to do a [week][day] structure because it kind of breaks my other features workflow. Anyways since it did not work as I wanted I finally adopted your pattern and this is what I came up with :
<template ngFor let-week [ngForOf]="displayedCal" let-i="index">
<ion-row>
<ion-col *ngFor="let day of week" (click)="...">{{day.displayedDate}}</ion-col>
</ion-row>
</template>
Thank you very much for your help! :)

Angular JS: Pagination using the Pagination Directive JS without using the Pagination.tpl.html Template

I am new to pagination and I found this directive which is highly sought after for Angular JS from what I have read. I am trying to implement the pagination to work with a my custom pagination html/css layout I have created.
The pagination slightly works as the number of pages show up correctly and the number of items being shown is correct as I specified. The problem however is clicking for example page 2 in the pagination list does not load the next list of 5 items. It simply stays on the same list.
I am a bit confused how to use all the parts properly of this directive so I believe I am doing something wrong with implementing this directive.
The guides I am following is found here which is the same as the repository above.
Downloaded files and added to project:
dirPagination.js
My HTML is as follows:
<div id="pages" ng-if="1 < pages.length || !autoHide">
<span ng-class="{ active : pagination.current == pageNumber,
disabled : pageNumber == '...' }" class="pagenumber"
dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
controller.pageCount" current-page="controller.currentPage">
{{ pageID.id }}
</span>
</div>
<div class="myResults" dir-paginate="results
in controller.list| filter:q | itemsPerPage: 5" current-page="1">
<div class="listFigures">
<figure class="imageList">
<img ng-src="{{results.image}}" ng-alt=
{{results.imageAlt}}" ng-title=
{{results.imageTitle}}" />
</figure>
</div>
</div>
In my controller I have pageCount set based on how many items (it is used as a parameter and works for showing how many pages for now):
vm.pageCount=2;
vm.currentPage = 1;
Working:
The list of pages is showing, following the code above you will see that it is at 8 pages.
Only 5 items are displaying as indicated
Not working:
Clicking on another page (in this case 2) does not bring me to another page of data. The list does not get refreshed. Clicking on another page number keeps the same list of 5 items displaying. There are a total of 8 items, with 5 being displayed clicking on the 2nd page number should show the last 3.
Posts researched:
dirPagination does not work (Angular JS pagination)
Pagination with AngularJS?
dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?
I am confused about how to get this working as well if my implementation is completely off. I have read a few posts as well as try do follow the guide in the repository however I am not understanding how to use it correctly. I am interested in finding out how to implement this pagination directive with custom html/css and not using the dirPagination.tpl.html template.
Following best practices you can read here for standard Angular.

You hardcoded your current page in the directive at the end:
<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">
To get it working you need to set it to the variable that holds your current page. You can compare your code to the plunker provided by Pagination Directive http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview at line 42.

After picking apart the code on Plunker found here as well as the template that comes with the download of the directive dirPagination.tpl.html I found out how to successfully utilize is without using the template. You cannot skip anything. Must use lists must use most of the tags provided by the template that are being used with dirPagination.js.
Here is the working solution. Only thing that required changing was in the html:
<div class="results">
<dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)">
</dir-pagination-controls>
<div class="pages" ng-if="1 < pages.length || !autoHide"
class="pagenumber pagination" dir-paginate="pageID in
controller.list| filter:q | itemsPerPage:5"
ng-class="{ active : pagination.current == pageNumber, disabled :
pageNumber == '...' }">
<ul class="pagination" ng-if="1 < pages.length || !autoHide">
<li ng-repeat="pageNumber in pages track by tracker(pageNumber,
$index)" ng-class="{ active : pagination.current ==
pageNumber, disabled : pageNumber == '...' }">
<a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}
</a>
</li>
</ul>
</div>
</div>
Feel free to copy past all that html in your document and use classes I made:
results
pages
pagination
To change the CSS however you like.
Note: Pagination class cannot be removed, even if you take it out of your html if you check you elements when you run the page on the browser you will see that it is placed back in automatically.
Temporary Note: When I figure out how to show the Number of pages in an above tag such as h1 I will add that to my answer.

Optimizing large list View in Ionic App

I Am trying to fetch data from http, json array and display in list view and there is over 1000 items and loading all of them at once makes scrolling so laggy and am trying to load 20 items first and when scrolled down i want to load more 20 items but my code is not working. Can anyone help me out.
HTML
<ion-content ng-controller="ListController" on-infinite-scroll="addMoreItem" class="has-subheader" scroll-watch >
<ion-list >
<ion-item href="{{ item.url }}.jpg" ng-repeat="item in id | limitTo:numberOfItemsToDisplay" class="item-thumbnail-left item-text-wrap" >
<img src="{{ item.thumbnailUrl }}.jpg" alt="Photo">
<h2>
{{item.id}}
</h2>
<p>{{item.title}}</p>
</ion-item>
</ion-list>
</ion-content>
AngularJS
.controller('ListController',['$scope','$http',function($scope,$http){
$http.get('http://jsonplaceholder.typicode.com/photos').success(function(data){
$scope.id = data;
})
$scope.numberOfItemsToDisplay = 20; // number of item to load each time
$scope.addMoreItem = function(done) {
if ($scope.item.length >= $scope.numberOfItemsToDisplay)
$scope.numberOfItemsToDisplay += 20; // load 20 more items
done(); // need to call this when finish loading more data
}
}])

When dealing with huge lists, ionic suggest that you should use the collection-repeat directive instead of ng-repeat cause it gives a far more better performance. collection-repeat renders into the DOM only as many items as are currently visible and thats how it keeps the performance up. Please read more on the official doc here: collection-repeat

I suggest solving it through infinite-scroll.. :)