sunbirded-mobile-app documentation
  1. Components
  2. AccordionListComponent

File

src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts

Implements

OnInit

Metadata

selector app-accordion-list
styleUrls ./accordion-list.component.scss
templateUrl ./accordion-list.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:12

Inputs

data
Type : any
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:8
showCard
Type : boolean
Default value : true
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:10
title
Type : any
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:9

Outputs

actionEvent
Type : EventEmitter
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:11

Methods

action
action(event)
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:17
Parameters :
Name Optional
event No
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:15
Returns : void
toggleAccordion
toggleAccordion()
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:20
Returns : void

Properties

isListItemOpened
Type : boolean
Default value : false
Defined in src/app/manage-learn/shared/components/accordion-list/accordion-list.component.ts:12
 
import { Component, OnInit, Input, Output, EventEmitter,ViewChild } from '@angular/core';
@Component({
  selector: 'app-accordion-list',
  templateUrl: './accordion-list.component.html',
  styleUrls: ['./accordion-list.component.scss'],
})
export class AccordionListComponent implements OnInit {
  @Input() data: any;
  @Input() title: any;
  @Input() showCard :boolean = true;
  @Output() actionEvent = new EventEmitter();
  isListItemOpened : boolean = false;
  constructor() { }

  ngOnInit() { }

  action(event) {
    this.actionEvent.emit(event)
  }
  toggleAccordion(): void {
    this.isListItemOpened = !this.isListItemOpened;
  }
}

<ion-card class="sb-dt-card accordian-card">
  <ion-card-header  (click)="toggleAccordion()">
    <ion-item lines="none">
      <ion-label>{{title | translate}}</ion-label>
      <ion-icon *ngIf="isListItemOpened" name="arrow-up-circle-outline" slot="end" color="primary"></ion-icon>
      <ion-icon *ngIf="!isListItemOpened" name="arrow-down-circle-outline" slot="end" color="primary"></ion-icon>
    </ion-item>
  </ion-card-header>
  <ion-card-content *ngIf="isListItemOpened" >
    <div *ngIf="showCard">
    <ion-card slot="content" *ngFor="let content of data">
      <ion-item lines="none" (click)="action(content)">
        <ion-label>{{content?.name}}</ion-label>
        <ion-icon md="caret-forward-circle" ios="chevron-forward-circle" slot="end" color="primary"></ion-icon>
      </ion-item>
    </ion-card>
    </div>
    <div *ngIf="!showCard">
      <div  *ngFor="let content of data" class="ion-padding">
       <p> > {{content?.name}} </p>
        </div>
      </div>
  </ion-card-content>
</ion-card>

./accordion-list.component.scss 

.accordian-card{
    margin: 0 0 1rem !important;
    ion-card-header{
        padding:0px;
    }
    ion-card-content{
        padding:0px;
    }
        ion-item{
            --background: var(--app-white) !important;
            ion-icon{
                font-size: 1.875rem;
            }
        }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""