To do an accordion GUI, I don’t want to use any CSS frameworks in ionic wich is not adviced apparently, I’d like to implement an accordion component based on the ionic’s Animations module. To do that I follow this example working well on Plnkr: Plunker - Ionic 2.0.0-rc.2 - QuickStart,
how I implement is below :
#app.modules.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
imports: [
BrowserAnimationsModule,
#home.ts :
import { Component, trigger, state, style, animate, transition} from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
styles:[
`
.item-block{
min-height: 0;
transition: 0.09s all linear;
}
`
],
animations: [
trigger('expand', [
state('true', style({ height: '45px' })),
state('false', style({ height: '0'})),
transition('void => *', animate('0s')),
transition('* <=> *', animate('250ms ease-in-out'))
])
]
})
(...)
groups:Array<any> = [];
private initAccordionData()
{
for(let i = 0; i < 4; i++){
this.groups[i]={
active: false,
id: i,
items: []
}
for (var j=0; j<3; j++) {
this.groups[i].items.push(i + '-' + j);
}
}
}
toggleGroup(group){
for(var i = 0; i< this.groups.length; i++){
//close all other active groups
if(this.groups[i].id != group.id) this.groups[i].active = false;
}
//expand only the clicked group
group.active = !group.active;
console.log(group)
}
#home.html:
<ion-item-group *ngFor="let group of groups" >
<ion-item-divider color="light" (click)="toggleGroup(group)">
Group {{group.id}}
<ion-icon item-left name="add" *ngIf="!group.active"></ion-icon>
<ion-icon item-left name="remove" *ngIf="group.active"></ion-icon>
</ion-item-divider>
<ion-item *ngFor="let item of group.items" [@expand]="group.active">{{item}}</ion-item>
</ion-item-group>
#Error :
When starting to load of the app, the console stops with this message :
vendor.js:sourcemap:1377 ERROR Error: Uncaught (in promise): TypeError: _this._driver.validateStyleProperty is not a function
TypeError: _this._driver.validateStyleProperty is not a function
at vendor.js:sourcemap:128696
at Array.forEach ()
at vendor.js:sourcemap:128695
at Array.forEach ()
at AnimationAstBuilderVisitor._validateStyleAst (vendor.js:sourcemap:128692)
at AnimationAstBuilderVisitor.visitStyle (vendor.js:sourcemap:128632)
at AnimationAstBuilderVisitor.visitState (vendor.js:sourcemap:128530)
at vendor.js:sourcemap:128509
at Array.forEach ()
at vendor.js:sourcemap:128507
at vendor.js:sourcemap:128696
at Array.forEach ()
at vendor.js:sourcemap:128695
at Array.forEach ()
at AnimationAstBuilderVisitor._validateStyleAst (vendor.js:sourcemap:128692)
at AnimationAstBuilderVisitor.visitStyle (vendor.js:sourcemap:128632)
at AnimationAstBuilderVisitor.visitState (vendor.js:sourcemap:128530)
at vendor.js:sourcemap:128509
at Array.forEach ()
at vendor.js:sourcemap:128507
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (vendor.js:sourcemap:45171)
at NavControllerBase._failed (vendor.js:sourcemap:45164)
at vendor.js:sourcemap:45211
at t.invoke (polyfills.js:3)
at Object.onInvoke (vendor.js:sourcemap:4247)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
Please help me to know if the issue is caused by an array’s each operation, or by an import error from the module ?
EDIT
Secondly I see this import code line into another code, I tryed to replace it into my sources but it’s not better :
import { trigger, state, style, animate, transition} from '@angular/animations';
```
$ionic ver
cli packages: (C:\Users\Gardien\AppData\Roaming\nvm\v8.8.1\node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 3.1.9
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 25.2.5
Node : v8.8.1
npm : 5.4.2
OS : Windows 8.1
Environment Variables:
ANDROID_HOME : C:\android-sdk-windows
Misc:
backend : pro