Feature/ionic4

accordion/accordion.html

@@ -1,15 +1,15 @@
 <ion-card>
   <ion-card-header (click)="toggleAccordion()">
     <ion-list>
-      <ion-item color="primary">
-        <button ion-button clear small icon-only item-right>
-          <ion-icon color="light" [name]="icon"></ion-icon>
-        </button>
+      <ion-item lines="none">
+        <ion-button fill="clear" size="small" slot="end">
+          <ion-icon color="dark" slot="icon-only" [name]="icon"></ion-icon>
+        </ion-button>
         {{ title }}
       </ion-item>
     </ion-list>
   </ion-card-header>
   <ion-card-content #cc>
     <ng-content></ng-content>
   </ion-card-content>
-</ion-card>
+</ion-card>

accordion/accordion.scss

@@ -1,11 +1,8 @@
-accordion {
-
-    .card-header{
-        background-color: map-get($colors, primary);
-        color: #fff;
-    }
-    .card-content {
-        padding: 0px 16px; 
-        max-height: 0px;
-    }
-}
+.card-header {
+  background-color: map-get($colors, primary);
+  color: #fff;
+}
+.card-content {
+  padding: 0px 16px;
+  max-height: 0px;
+}

accordion/accordion.ts

@@ -1,46 +1,42 @@
-import { Component, ViewChild, OnInit, Renderer, Input } from '@angular/core';
+import { Component, ViewChild, OnInit, Renderer, Input } from "@angular/core";
 
-/**
- * Generated class for the AccordionComponent component.
- *
- * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
- * for more info on Angular Components.
- */
 @Component({
-  selector: 'accordion',
-  templateUrl: 'accordion.html'
+  selector: "accordion",
+  templateUrl: "./accordion.component.html",
+  styleUrls: ["./accordion.component.scss"]
 })
 export class AccordionComponent implements OnInit {
-
   accordionExapanded = false;
   @ViewChild("cc") cardContent: any;
-  @Input('title') title: string;
+  @Input("title") title: string;
 
   icon: string = "arrow-forward";
 
-  constructor(public renderer: Renderer) {
-
-  }
+  constructor(public renderer: Renderer) {}
 
   ngOnInit() {
-    console.log(this.cardContent.nativeElement);
-    this.renderer.setElementStyle(this.cardContent.nativeElement, "webkitTransition", "max-height 500ms, padding 500ms");
+    this.cardContent.el.transition = "max-height 500ms, padding 500ms";
+    this.renderer.setElementStyle(
+      this.cardContent.el,
+      "webkitTransition",
+      "max-height 500ms, padding 500ms"
+    );
   }
 
   toggleAccordion() {
     if (this.accordionExapanded) {
-      this.renderer.setElementStyle(this.cardContent.nativeElement, "max-height", "0px");
-      this.renderer.setElementStyle(this.cardContent.nativeElement, "padding", "0px 16px");
-
+      this.renderer.setElementStyle(this.cardContent.el, "max-height", "0px");
+      this.renderer.setElementStyle(this.cardContent.el, "padding", "0px 16px");
     } else {
-      this.renderer.setElementStyle(this.cardContent.nativeElement, "max-height", "500px");
-      this.renderer.setElementStyle(this.cardContent.nativeElement, "padding", "13px 16px");
-
+      this.renderer.setElementStyle(this.cardContent.el, "max-height", "500px");
+      this.renderer.setElementStyle(
+        this.cardContent.el,
+        "padding",
+        "13px 16px"
+      );
     }
 
     this.accordionExapanded = !this.accordionExapanded;
     this.icon = this.icon == "arrow-forward" ? "arrow-down" : "arrow-forward";
-
   }
-
 }

readme.md

@@ -1,7 +1,16 @@
-### Accordion Component for Ionic 3 Apps
+### Accordion Component for Ionic 4
 
-![Image Preview](https://image.prntscr.com/image/1QwOijlhRZGnkAFb1QxEmQ.png)
+![Image Preview](https://image.prntscr.com/image/lVyVb5BmTCyXd5l0q4w49Q.png)
 
-`<accordion title="Your Title"> Your Content Here </accordion>`
+## Usage
+To use this component, clone it in its components folder and then generate a file called `components.module.ts` in the root folder. Remaining a structure like the following
 
-Simple and easy to use.
+![Image](https://image.prntscr.com/image/6tl5OGfrRWSocjTqftW2oQ.png)
+
+Now in your file `components.module.ts` you must import and export your component. Your file should look like this
+
+![Image](https://image.prntscr.com/image/2jIrcUIlTkamvp8KoC1uEQ.png)
+
+On the page that you want to use the component, you must now import its component module in the `your-page.module.ts` file inside the ` imports: [] ` After having done this you can invoke the component in the following way:
+
+`<accordion title="Your Title"> Your Content Here </accordion>`