Develop Reference

Ionic 2 Tabs Maximum call stack size exceeded

This error seems to be a plague haunting Ionic 2. I've looked at several questions on this topic but none have been of help so far.
I've created this component Layout Component which wraps all my pages:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
{{pageName}}
</ion-title>
</ion-navbar>
</ion-header>
<ng-content>
</ng-content>
<ion-footer>
<ion-toolbar>
<ion-tabs>
<ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>
</ion-toolbar>
</ion-footer>
and the TS File looks like so:
export class AstootLayoutComponent {
#Input() pageName: string;
usersPage: any = UsersPage;
profilePage: any = ProfilePage;
}
Then I have a users page which consumes this component which looks like so:
<astoot-layout [pageName]="pageName">
<ion-content padding>
<page-list-base [detailPageType]="userDetailType" [baseProvider]="baseProvider" [config]="pageListConfiguration"></page-list-base>
</ion-content>
</astoot-layout>
When I attempt to start my application I receive an error:
Maximum call stack size exceeded
TypeError: Cannot read property 'getList' of undefined
at PageListBaseComponent.set [as baseProvider] (http://localhost:8100/build/main.js:115817:21)
at Wrapper_PageListBaseComponent.check_baseProvider (/AppModule/PageListBaseComponent/wrapper.ngfactory.js:38:31)
at CompiledTemplate.proxyViewClass.View_UsersPage0.detectChangesInternal (/AppModule/UsersPage/component.ngfactory.js:80:35)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:111894:18)
at CompiledTemplate.proxyViewClass.View_UsersPage_Host0.detectChangesInternal (/AppModule/UsersPage/host.ngfactory.js:29:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44)
at ViewRef_.detectChanges (http://localhost:8100/build/main.js:77367:20)
at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:43575:40)
at NavControllerBase._transitionInit (http://localhost:8100/build/main.js:43678:18)
at NavControllerBase._postViewInit (http://localhost:8100/build/main.js:43531:14)
at NavControllerBase._viewTest (http://localhost:8100/build/main.js:43627:25)
at NavControllerBase._nextTrns (http://localhost:8100/build/main.js:43370:25)
Through some investigation the cause seems to be the fact that the AstootLayoutComponent references the Users page, where it resides in. Some how the creates a forever loop.
Why is this happening, the documentation doesn't seem to mention that you can't next this component on the page. How can I fix this?
Bounty Edit
I've created a Repository which replicates my issue
Just as a warning since the tabs controller is in a forever loop, and the api is pointed to github, so you may want to switch that before hitting there rate limit, you can change the url in the Environments.ts

I think you need to add a Tabs Component. Therefore some of the work you were doing in the astoot layout gets moved to this Tabs Component. I opened a PR: https://github.com/granthoff1107/Ionic-Sample-Max-Exceed/pull/1
I tested this and no more stack errors since you no longer have the recursive relationship between the astoot layout and the ion-tabs.
Remove the tabs component from the Astoot Layout Component:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
{{pageName}}
</ion-title>
</ion-navbar>
</ion-header>
<ng-content>
</ng-content>
Create a seperate Tabs Component:
<ion-tabs>
<ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab>
<ion-tab [root]="profilePage" tabTitle="Profile" tabIcon="person"></ion-tab>
</ion-tabs>
With a type script file that contains the pages from the astoot layout component.
import { ProfilePage } from './../profile/profile';
import { UsersPage } from './../users/users';
import { Component } from '#angular/core';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
usersPage: any = UsersPage;
profilePage: any = ProfilePage;
constructor() {
}
}
Add your new tabs page the app.module.ts and set your rootPage: any = TabsPage; this will now act as your master page and your content will be transcluded into your view.

"IONIC 3" page adding html content variable

I am trying to add a variable containing html to my ionic 3 page
Ionic Page:
<ion-header>
<ion-navbar>
<ion-title>{{offeritem.data.nameprovider}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div>
{{offeritem.data.detailsoffer}}
</div>
</ion-content>
However I am getting the following
Result:
<p>The table contains 30 pieces:</p><ul><li>5 Philadelphia Roll</li>
<li>5 Fantasia Roll</li>
Please let me know what I am doing wrong in this case.
Thanks in advance

You should use [innerHTML] for ionic 3 like this:
<p [innerHTML]="yourVarHere"></p>

<span [innerHTML]="offeritem.data.detailsoffer"></span>
REF
Note the section on "Property binding or interpolation?"

import {DomSanitizationService} from '#angular/platform-browser';
class....{
public getSafehtml(html:string){
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
<ion-content padding>
<div [innerHTML]="getSafehtml(offeritem.data.detailsoffer)"></div>
</ion-content>
If you not bypassSecurityTrustHtml then your style will not work.

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.

Why wont my list appear using ionic?

Everytime I try to display my list by using ionic serve I just get a blank screen? I've followed the tutorial step by step and still nothing?
my code in html for the list:
<body ng-app="calorific" ng-controller="calCtrl">
<ion-pane>
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Calorific</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="todos in todo"{{todo.name}} </ion-item>
</ion-list>
</ion-content>
</ion-pane>
My JS:
app.controller('calCtrl', function($scope){
$scope.todo = [
{name: 'apple'},
{name: 'banana'},
{name: 'pear'},
{name: 'kiwi'},
{name: 'kfc'}
]
})
GET http://localhost:8100/css/style.css
app.js:17 Uncaught ReferenceError: app is not defined
ionic.bundle.js:19526 Error: [ng:areq] Argument 'calCtrl' is not a function, got undefined
http://errors.angularjs.org/1.3.13/ng/areq?p0=calCtrl&p1=not%20a%20function%2C%20got%20undefined
at REGEX_STRING_REGEXP (ionic.bundle.js:7982)
at assertArg (ionic.bundle.js:9499)
at assertArgFn (ionic.bundle.js:9509)
at ionic.bundle.js:16350
at ionic.bundle.js:15518
at forEach (ionic.bundle.js:8250)
at nodeLinkFn (ionic.bundle.js:15505)
at compositeLinkFn (ionic.bundle.js:14997)
at publicLinkFn (ionic.bundle.js:14876)
at ionic.bundle.js:9369ionic.bundle.js:19526 (anonymous function)ionic.bundle.js:16476 $getionic.bundle.js:22421 $get.Scope.$applyionic.bundle.js:9367 bootstrapApplyionic.bundle.js:12104 invokeionic.bundle.js:9365 doBootstrapionic.bundle.js:9385 bootstrapionic.bundle.js:9279 angularInitionic.bundle.js:34044 (anonymous function)ionic.bundle.js:10663 triggerionic.bundle.js:10933 eventHandler

I think you have a typo in your html. Shouldn't it be todos like so,
<ion-item ng-repeat="todos in todo">{{todos.name}} </ion-item>
I added a missing closing tag for ion-item as well. I'm not too familiar with Ionic so I just wanted to note that.

You are trying to reference todos incorrectly.
<ion-item ng-repeat="todos in todo"{{todo.name}} </ion-item>
Use todos instead, as in {{todos.name}}:
<ion-item ng-repeat="todos in todo"{{todos.name}} </ion-item>

Your ion-item is not closed. Also you're referencing todos as the singular item, when you're calling todo.name in the body.
First, I suggest your rename your scope variable to $scope.todos to use the correct plural form. Then reorder your ng-repeat to todo in todos. That is change
<ion-item ng-repeat="todos in todo"{{todo.name}} </ion-item>
to
<ion-item ng-repeat="todo in todos">{{todo.name}}</ion-item>
In addition to renaming scope.todo to scope.todos.

Angularjs: javascript outside of template not working

:) I have a input in the body of my index.html file Which acts like a static header to my templates. The only problem is that i have the filter in my template like so:
<!-- Home Template -->
<script id="home.html" type="text/ng-template">
<ion-view title="plz help">
<ion-content>
<div class="list" id="list" ng-repeat="phone in phones | filter:query">
...
</div>
</ion-content>
</ion-view>
</script>
So that makes it "2 separate files" (they are both inside index.html). This makes it so that i can't for example "clear the filter" from a button in my header that's outside of the template.
Is there any way I can "include" the different "files" in each other so that i can execute JavaScript in in both "files"?
Thanks in advance!

You can do this with a nested scope. Because query live in root scope, is visible from scope of your controller. You have exemple here
But, sometimes there is a problem that variable from root or parent scope is not visible in nested scope if previously is not defined in main controller. Also, you can use $rootScope service to easier access.
Hope to I clarified a little.