Possibility to set accordion's initial state as expanded.

jeronimonascimento · jeronimonascimento · commit 7c5578a1f110 · 2017-11-17T09:12:39.000-03:00
diff --git a/src/components/accordion-list/accordion-list.ts b/src/components/accordion-list/accordion-list.ts
@@ -10,17 +10,21 @@ export class AccordionListComponent {
   @Input() contentColor: string = '#F9F9F9';
   @Input() title: string;
   @Input() hasMargin: boolean = true;
+  @Input() initialState: string;
+  @Input () expanded: boolean;
 
   @ViewChild('accordionContent') elementView: ElementRef;
 
-  expanded: boolean = false;
   viewHeight: number;
 
   constructor(public renderer: Renderer) { }
-
+  
   ngAfterViewInit() {
+    this.handleInitialState();
     this.viewHeight = this.elementView.nativeElement.offsetHeight;
-    this.renderer.setElementStyle(this.elementView.nativeElement, 'height', 0 + 'px');
+    console.log(this.expanded);
+    if(!this.expanded)
+      this.renderer.setElementStyle(this.elementView.nativeElement, 'height', 0 + 'px');
   }
 
   toggleAccordion() {
@@ -29,4 +33,8 @@ export class AccordionListComponent {
     this.renderer.setElementStyle(this.elementView.nativeElement, 'height', newHeight);
   }
 
+  handleInitialState(){
+    this.expanded = this.initialState === 'expanded'
+  }
+  
 }
diff --git a/src/pages/accordion-list/accordion-list.html b/src/pages/accordion-list/accordion-list.html
@@ -14,7 +14,8 @@
                   [title]="item.name"
                   textColor="#FFF"
                   hasMargin="false"
-                  headerColor="#F53D3D">
+                  headerColor="#F53D3D"
+                  initialState="expanded">
     <img [src]="item.imageUrl">
     <p text-wrap>{{item.description}}</p>
   </accordion-list>
