### File

`src/accordion/accordion-item.component.ts`

### Metadata

selector | `ibm-accordion-item`

template

    <button
    	[attr.aria-expanded]="expanded"
    	[attr.aria-controls]="id"
    	(click)="toggleExpanded()"
    	class="bx--accordion__heading">
    	<ibm-icon-chevron-right16 class="bx--accordion__arrow"></ibm-icon-chevron-right16>
    	<p
    		class="bx--accordion__title"
    		[ngClass]="{
    			'bx--skeleton__text': skeleton
    		}">
    		{{!skeleton ? title : null}}
    	</p>
    </button>
    <div [id]="id" class="bx--accordion__content">
    	<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
    	<ng-template #skeletonTemplate>
    		<p class="bx--skeleton__text" style="width: 90%"></p>
    		<p class="bx--skeleton__text" style="width: 80%"></p>
    		<p class="bx--skeleton__text" style="width: 95%"></p>
    	</ng-template>
    </div>

### Index

###### Properties

- Static accordionItemCount

###### Methods

- Public toggleExpanded

###### Inputs

- ariaLevel
- expanded
- id
- skeleton
- title

###### Outputs

- selected

###### HostBindings

- attr.role
- class.bx--accordion__item
- style.display

### Constructor

`constructor()`
Defined in src/accordion/accordion-item.component.ts:47

### Inputs

`ariaLevel` | Default value : `3`
Defined in src/accordion/accordion-item.component.ts:47

`expanded` | Default value : `false`
Defined in src/accordion/accordion-item.component.ts:44

`id` | Default value : ``accordion-item-${AccordionItem.accordionItemCount}``
Defined in src/accordion/accordion-item.component.ts:39

`skeleton` | Default value : `false`
Defined in src/accordion/accordion-item.component.ts:40

`title` | Default value : ``Title ${AccordionItem.accordionItemCount}``
Defined in src/accordion/accordion-item.component.ts:38

### Outputs

`selected` | `$event` Type: `EventEmitter`
Defined in src/accordion/accordion-item.component.ts:41

### HostBindings

attr.role
`attr.role: ```
Default value : `"heading"`
Defined in src/accordion/accordion-item.component.ts:46

class.bx--accordion__item
`class.bx--accordion__item: ```
Default value : `true`
Defined in src/accordion/accordion-item.component.ts:43

style.display
`style.display: ```
Default value : `"list-item"`
Defined in src/accordion/accordion-item.component.ts:45

### Methods

Public toggleExpanded
`toggleExpanded()`
Defined in src/accordion/accordion-item.component.ts:53
Returns : `void`

### Properties

Static accordionItemCount
`accordionItemCount: `number``
Type : `number`
Default value : `0`
Defined in src/accordion/accordion-item.component.ts:37

    import {
    	Component,
    	Input,
    	HostBinding,
    	Output,
    	EventEmitter
    } from "@angular/core";

    @Component({
    	selector: "ibm-accordion-item",
    	template: `
    		<button
    			[attr.aria-expanded]="expanded"
    			[attr.aria-controls]="id"
    			(click)="toggleExpanded()"
    			class="bx--accordion__heading">
    			<ibm-icon-chevron-right16 class="bx--accordion__arrow"></ibm-icon-chevron-right16>
    			<p
    				class="bx--accordion__title"
    				[ngClass]="{
    					'bx--skeleton__text': skeleton
    				}">
    				{{!skeleton ? title : null}}
    			</p>
    		</button>
    		<div [id]="id" class="bx--accordion__content">
    			<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
    			<ng-template #skeletonTemplate>
    				<p class="bx--skeleton__text" style="width: 90%"></p>
    				<p class="bx--skeleton__text" style="width: 80%"></p>
    				<p class="bx--skeleton__text" style="width: 95%"></p>
    			</ng-template>
    		</div>
    	`
    })
    export class AccordionItem {
    	static accordionItemCount = 0;
    	@Input() title = `Title ${AccordionItem.accordionItemCount}`;
    	@Input() id = `accordion-item-${AccordionItem.accordionItemCount}`;
    	@Input() skeleton = false;
    	@Output() selected = new EventEmitter();

    	@HostBinding("class.bx--accordion__item") itemClass = true;
    	@HostBinding("class.bx--accordion__item--active") @Input() expanded = false;
    	@HostBinding("style.display") itemType = "list-item";
    	@HostBinding("attr.role") role = "heading";
    	@HostBinding("attr.aria-level") @Input() ariaLevel = 3;

    	constructor() {
    		AccordionItem.accordionItemCount++;
    	}

    	public toggleExpanded() {
    		if (!this.skeleton) {
    			this.expanded = !this.expanded;
    			this.selected.emit({id: this.id, expanded: this.expanded});
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""