Merge pull request yannbf#59 from jeronimonascimento/feature/expanded-accordion-list

yannbf · web-flow · commit 20fe57d5b568 · 2017-11-17T10:13:41.000-03:00
feat(accordion-list): possibility to set accordion's initial state as expanded
diff --git a/src/components/accordion-list/accordion-list.ts b/src/components/accordion-list/accordion-list.ts
@@ -10,17 +10,20 @@ export class AccordionListComponent {
   @Input() contentColor: string = '#F9F9F9';
   @Input() title: string;
   @Input() hasMargin: boolean = true;
+  @Input() expanded: boolean;
 
   @ViewChild('accordionContent') elementView: ElementRef;
 
-  expanded: boolean = false;
   viewHeight: number;
 
   constructor(public renderer: Renderer) { }
 
   ngAfterViewInit() {
     this.viewHeight = this.elementView.nativeElement.offsetHeight;
-    this.renderer.setElementStyle(this.elementView.nativeElement, 'height', 0 + 'px');
+
+    if (!this.expanded) {
+      this.renderer.setElementStyle(this.elementView.nativeElement, 'height', 0 + 'px');
+    }
   }
 
   toggleAccordion() {
diff --git a/src/pages/accordion-list/accordion-list.html b/src/pages/accordion-list/accordion-list.html
@@ -10,11 +10,12 @@
 <ion-content padding>
   <p>Accordion list example - Best places to visit:</p>
 
-  <accordion-list *ngFor="let item of items"
+  <accordion-list *ngFor="let item of items; let index = index"
                   [title]="item.name"
                   textColor="#FFF"
                   hasMargin="false"
-                  headerColor="#F53D3D">
+                  headerColor="#F53D3D"
+                  [expanded]="index === 0">
     <img [src]="item.imageUrl">
     <p text-wrap>{{item.description}}</p>
   </accordion-list>
