Actualizacion de acordeon en FAQ

src/app/components/accordion/accordion.component.html

@@ -1,4 +0,0 @@
-<ion-card>
-    <ion-card-header style="font-weight: bold; font-size:1.25em;" color="{{ activeColor }}" (click)="toogleAction()">{{ title }}<ion-icon style="float: right" name="{{ icon }}"></ion-icon></ion-card-header>
-    <ion-card-content *ngIf="accordionExpanded" #cc style="padding-top: 1em"><ng-content></ng-content></ion-card-content>
-</ion-card>

src/app/components/accordion/accordion.component.spec.ts

@@ -1,27 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccordionComponent } from './accordion.component';
-
-describe('AccordionComponent', () => {
-  let component: AccordionComponent;
-  let fixture: ComponentFixture<AccordionComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AccordionComponent ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AccordionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/components/accordion/accordion.component.ts

@@ -1,29 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-  selector: 'app-accordion',
-  templateUrl: './accordion.component.html',
-  styleUrls: ['./accordion.component.scss'],
-})
-export class AccordionComponent implements OnInit {
-
-  @Input("title") title: string;
-  accordionExpanded: boolean = false;
-  activeColor: string = "ligth";
-  icon: string = "add";
-
-  constructor() { }
-
-  ngOnInit() {}
-
-  toogleAction() {
-    if (this.accordionExpanded) {
-      this.activeColor = "ligth";
-      this.icon = "add";
-    } else {
-      this.activeColor = "primary";
-      this.icon = "remove";
-    }
-    this.accordionExpanded = !this.accordionExpanded;
-  }
-}

src/app/components/shared-components.module.ts

@@ -1,4 +1,3 @@
-import { AccordionComponent } from './accordion/accordion.component'
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
@@ -12,7 +11,6 @@ import { IonicModule } from '@ionic/angular';
     IonicModule
   ],
   exports: [
-    AccordionComponent
   ]
 })
 export class SharedComponentsModule { }

src/app/pages/faq/faq.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
-import { SharedComponentsModule } from '../../components/shared-components.module';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -23,7 +22,6 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes),
     TranslateModule,
-    SharedComponentsModule
   ],
   declarations: [FaqPage]
 })

src/app/pages/faq/faq.page.html

@@ -9,33 +9,60 @@
 
 <ion-content>
   <h2 padding text-capitalize style="padding-bottom: 0.25em">{{'faq.header' | translate}}</h2>
-  <ion-list>
+  <ion-accordion-group [multiple]="true" [value]="['first', 'third']">
-    <app-accordion title="{{'faq.faq_1' | translate}}®?">
+    <ion-accordion>
-      {{'faq.faq_1.1' | translate}}
+      <ion-item slot="header" color="light">
-    </app-accordion>
+        <ion-label>{{'faq.faq_1' | translate}}®</ion-label>
-    <app-accordion title="{{'faq.faq_2' | translate}}">
+      </ion-item>
-      {{'faq.faq_2.1' | translate}}®.
+      <div class="ion-padding" slot="content">{{'faq.faq_1.1' | translate}}</div>
-    </app-accordion>
+    </ion-accordion>
-    <app-accordion title="{{'faq.faq_3' | translate}}">
+    <ion-accordion>
-      {{'faq.faq_3.1' | translate}}
+      <ion-item slot="header" color="light">
-    </app-accordion>
+        <ion-label>{{'faq.faq_2' | translate}}®</ion-label>
-    <app-accordion title="{{'faq.faq_4' | translate}}">
+      </ion-item>
-      {{'faq.faq_4.1' | translate}}
+      <div class="ion-padding" slot="content">{{'faq.faq_2.1' | translate}}</div>
-    </app-accordion>
+    </ion-accordion>
-    <app-accordion title="{{'faq.faq_5' | translate}}">
+    <ion-accordion>
-      {{'faq.faq_5.1' | translate}}
+      <ion-item slot="header" color="light">
-    </app-accordion>
+        <ion-label>{{'faq.faq_3' | translate}}®</ion-label>
-    <app-accordion title="{{'faq.faq_6' | translate}}">
+      </ion-item>
-      {{'faq.faq_6.1' | translate}}
+      <div class="ion-padding" slot="content">{{'faq.faq_3.1' | translate}}</div>
-    </app-accordion>
+    </ion-accordion>
-    <app-accordion title="{{'faq.faq_7' | translate}}">
+    <ion-accordion>
-      {{'faq.faq_7.1' | translate}}
+      <ion-item slot="header" color="light">
-    </app-accordion>
+        <ion-label>{{'faq.faq_4' | translate}}®</ion-label>
-    <app-accordion title="{{'faq.faq_8' | translate}}">
+      </ion-item>
-      {{'faq.faq_8.1' | translate}}
+      <div class="ion-padding" slot="content">{{'faq.faq_4.1' | translate}}</div>
-    </app-accordion>
+    </ion-accordion>
-    <app-accordion title="{{'faq.faq_9' | translate}}">
+    <ion-accordion>
-      {{'faq.faq_9.1' | translate}}
+      <ion-item slot="header" color="light">
-    </app-accordion>
+        <ion-label>{{'faq.faq_5' | translate}}®</ion-label>
-  </ion-list>
+      </ion-item>
+      <div class="ion-padding" slot="content">{{'faq.faq_5.1' | translate}}</div>
+    </ion-accordion>
+    <ion-accordion>
+      <ion-item slot="header" color="light">
+        <ion-label>{{'faq.faq_6' | translate}}®</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">{{'faq.faq_6.1' | translate}}</div>
+    </ion-accordion>
+    <ion-accordion>
+      <ion-item slot="header" color="light">
+        <ion-label>{{'faq.faq_7' | translate}}®</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">{{'faq.faq_7.1' | translate}}</div>
+    </ion-accordion>
+    <ion-accordion>
+      <ion-item slot="header" color="light">
+        <ion-label>{{'faq.faq_8' | translate}}®</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">{{'faq.faq_8.1' | translate}}</div>
+    </ion-accordion>
+    <ion-accordion>
+      <ion-item slot="header" color="light">
+        <ion-label>{{'faq.faq_9' | translate}}®</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">{{'faq.faq_9.1' | translate}}</div>
+    </ion-accordion>
+  </ion-accordion-group>
 </ion-content>

src/app/pages/faq/faq.page.scss

@@ -0,0 +1,5 @@
+ion-accordion.accordion-expanding ion-item[slot='header'],
+ion-accordion.accordion-expanded ion-item[slot='header'] {
+  --background: var(--ion-color-primary);
+  --color: var(--ion-color-primary-contrast);
+}