Develop Reference

how to use ion-refresher inside a custom component

I need to place the ion-refresher inside a component.
I have a list which is identical in look and behavior, my list component should have refresher, infinite-scroll etc in that one component
I try to add ion-refresher to a custom component.
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
but I get this error:
Parse Error: No provider for Content

Did u try?
<ion-content>
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

As mentioned here and in the docs you need to put your refresher inside a <ion-content> tag.
<ion-content>
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

when we place ion-refresher inside ion-content, it creates extra space

ngFor and (click) not working in Ionic 2 & Angular 2

When iterating through an array of items for ngFor, the (click) event is failing to attach to each list item, for some reason it just doesn't attach and when I click on each of the list items, the function is not triggered.
Here is the HTML for the list:
<ion-list class="queue-page--actions__haircut__tab-open" radio-group *ngIf="haircutTab" [(ngModel)]="selectedCut">
<ion-list-header class="queue-page--actions__haircut__tab__header">
Select a cut
</ion-list-header>
<ion-item *ngFor="let item of getCuts()" (click)="open($event, item)">
<ion-label>{{item.name}}</ion-label>
<ion-label>£{{item.price}}</ion-label>
<ion-radio checked="{{item.name == selectedCut}}" value="{{item.name}}"></ion-radio>
</ion-item>
</ion-list>
Get cuts is the function on the controller for the page (this.cuts is of type array and returns an array of json objects):
public getCuts(){
return this.cuts;
}
And finally, the open() function is as follows:
public open(event, item){
alert("Clicked");
console.log(item)
}
Can't figure out what's going wrong here, perhaps a suspicion of scope issues but really not sure.

Try like this
<ion-item *ngFor="let item of cuts" (click)="open(item)">
:
</ion-item>

Thanks to this post on the Ionic 2 forum I have found a solution to the problem presented here.
Instead of using (click), I am now using (ionSelect) on the ion-radio element. An example can be seen here:
<ion-item *ngFor="let item of cuts" (click)="open(item)">
<ion-label>{{item.name}}</ion-label>
<ion-label>£{{item.price}}</ion-label>
<ion-radio (ionSelect)="cutChanged(item.name)" checked="{{item.name == selectedCut}}" value="{{item.name}}"></ion-radio>
</ion-item>
Where the function on the controller for cutChanged() is like so:
cutChanged(cut){
alert(cut);
}
This implementation now works and fires on click events. Perhaps something unusual with how radio buttons work in Ionic?

Your getCuts() method is not required.
No need to pass the event when the open() function is called. Also there is a semicolon missing in your open() method. Final Code :
<ion-list class="queue-page--actions__haircut__tab-open" radio-group *ngIf="haircutTab" [(ngModel)]="selectedCut">
<ion-list-header class="queue-page--actions__haircut__tab__header">
Select a cut
</ion-list-header>
<ion-item *ngFor="let item of cuts" (click)="open(item)">
<ion-label>{{item.name}}</ion-label>
<ion-label>£{{item.price}}</ion-label>
<ion-radio checked="{{item.name == selectedCut}}" value="{{item.name}}"></ion-radio>
</ion-item>
</ion-list>
open() function will be :
public open(event, item){
alert("Clicked");
console.log(item);
}

Ionic ng-repeat returning one undefined

I am attempting to filter a list of items the code below worded fine in angular js on the web but we can't expect Ionic to work now can we?
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item ng-repeat="item in items | filter:searchLog">
{{item == undefined}}
<!--<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>-->
</ion-item>
</ion-list>
This is what my screen shows:
car out of gas
true
For the life of me I cannot understand this because if I print {{ items[0].title }} it works fine in the repeat list meaning that it is not giving me this item object back from the ng-repeat call. What is even weirder is that *ngFor works but I cannot filter it :-( Please help
TL;DR: ng-repeat in angular is returning one undefined object.

Use *ngFor with pipe (i.e. filter). If it is still not working then there is some problem with your pipe (filter). Code should look like below:
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item *ngFor="let item of items | searchLog">
<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>
</ion-item>
</ion-list>

ng-class not refresh when data change

I want to change the color item whan my data change. I use this template code:
<ion-view view-title="Evénement" class="content">
<ion-content class="padding">
<ion-list>
<ion-item ng-repeat="myuser in users">
<span>{{myuser.user_name}} </span><a class="button button-icon icon ion-person-add icon_add" ng-click="addContact('{{myuser.id}}')" ng-class="{contact_added : myuser.isContact }"></a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I use firebase to loading and saving data. So, I use this code for synchronizing data.
ref.child('contact').child(authData.uid).on('child_added', function (snapshot) {
var myUser = snapshot.key();
$scope.users.push(myUser);
});
When I add a contact on firebase, my color icon does not change immediately. I must click and move my mouse on html page to update the color.
How I have to do to refresh instantly my icon when the data change?

Don't use $scope.$apply(), use AngularFire.
Angular apps should not have to manage the digest loop. Firebase directly integrates with Angular with the AngularFire library, which manages data synchronization and the triggering of $digest.
In your case you can create a $firebaseArray to synchronize your changes:
angular.module('app', ['firebase'])
.constant('FirebaseUrl', '<my-firebase-app>')
.service('rootRef', ['FirebaseUrl', Firebase])
.controller('MyCtrl', MyController);
function MyController($scope, rootRef, $firebaseArray) {
var userRef = rootRef.child('contact').child(authData.uid);
$scope.users = $firebaseArray(userRef);
}
The advantage of using AngularFire is two fold. Firstly, you don't have to manage $scope.$apply(). Secondly, you get realtime array synchronization for free.

add $scope.$apply(); after $scope.users.push(myUser); line.

Retrieve array over $http and view in ion-item of ion-list

Like the title says, I'm trying to assign a list from a $http request and then see that list in a view.
I believe the problem is the view is shown before the data loads, if I understand ionic correctly. And the view is never updated when the variables change.
I'm told resolves are one way of fixing this but I'd prefer for the view to change and then show a loading indicator while it waits for the http request to finish, and then show the list.
Thanks!
Edit: I think I need to add the way I'm loading the data is through ng-init in the html file, which seems wrong too. Is there a better way altogether?
view html file:
<ion-view view-title={{ListName}} ng-init="getList()">
<ion-content ng-controller="ListCtrl">
<ion-list>
<ion-item ng-repeat="item in list"
class="item-thumbnail-left">
{{item.id}}
<img ng-src="{{item.thumbnail}}">
</ion-item>
</ion-list>
</ion-content>
</ion-view>
controller snippet:
.controller('ListCtrl', function($scope){
$scope.list = []
$scope.ListName = ''
$scope.getList = function(){
$scope.ListName = 'list'
$scope.list = [{id: 1, thumbnail:null}, {id: 2, thumbnail:null},{id: 3, thumbnail:null} ,{id: 4, thumbnail:null}]
}
})
the list is actually gotten in a http request that returns a promise but this gives me the same problem. It's something annoyingly basic that I just don't understand about ionic yet

Dinesh answered my question. Putting the ng-controller in the ion-view was all I needed to do!