### File

`src/tiles/expandable-tile.component.ts`

### Implements

`AfterContentInit`

### Metadata

selector | `ibm-expandable-tile`
template |
    <div
    	class="bx--tile bx--tile--expandable"
    	[ngClass]="{'bx--tile--is-expanded' : expanded}"
    	[ngStyle]="{'max-height': expandedHeight + 'px'}"
    	role="button"
    	tabindex="0"
    	(click)="onClick()">
    	<button [attr.aria-label]="(expanded ? collapse : expand).subject | async" class="bx--tile__chevron">
    		<svg *ngIf="!expanded" width="12" height="7" viewBox="0 0 12 7" role="img">
    			<title>{{expand.subject | async}}</title>
    			<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
    		</svg>
    		<svg *ngIf="expanded" width="12" height="7" viewBox="0 0 12 7" role="img">
    			<title>{{collapse.subject | async}}</title>
    			<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
    		</svg>
    	</button>
    	<div class="bx--tile-content">
    		<ng-content select=".bx--tile-content__above-the-fold"></ng-content>
    		<ng-content select=".bx--tile-content__below-the-fold"></ng-content>
    	</div>
    </div>

### Index

###### Properties
collapse element expand tileMaxHeight
###### Methods
ngAfterContentInit onClick updateMaxHeight
###### Inputs
expanded translations
###### Accessors
translations expandedHeight

### Constructor

`constructor(i18n: I18n, elementRef: ElementRef)`
Defined in src/tiles/expandable-tile.component.ts:64
Parameters :
Name | Type | Optional
i18n | `I18n` | No
elementRef | `ElementRef` | No

### Inputs

`expanded` | Default value : `false`
Defined in src/tiles/expandable-tile.component.ts:43

`translations` | Expects an object that contains some or all of:
         * {
         *        "EXPAND": "Expand",
         *        "COLLAPSE": "Collapse",
         * }
         *
Defined in src/tiles/expandable-tile.component.ts:54

### Methods

ngAfterContentInit
`ngAfterContentInit()`
Defined in src/tiles/expandable-tile.component.ts:68
Returns : `void`

onClick
`onClick()`
Defined in src/tiles/expandable-tile.component.ts:84
Returns : `void`

updateMaxHeight
`updateMaxHeight()`
Defined in src/tiles/expandable-tile.component.ts:76
Returns : `void`

### Properties

collapse
`collapse: ```
Default value : `this.i18n.getOverridable("TILES.COLLAPSE")`
Defined in src/tiles/expandable-tile.component.ts:64

element
`element: ```
Default value : `this.elementRef.nativeElement`
Defined in src/tiles/expandable-tile.component.ts:61

expand
`expand: ```
Default value : `this.i18n.getOverridable("TILES.EXPAND")`
Defined in src/tiles/expandable-tile.component.ts:63

tileMaxHeight
`tileMaxHeight: `number``
Type : `number`
Default value : `0`
Defined in src/tiles/expandable-tile.component.ts:60

### Accessors

translations
set `translations(value)`
Defined in src/tiles/expandable-tile.component.ts:54
Expects an object that contains some or all of:
         * {
         *        "EXPAND": "Expand",
         *        "COLLAPSE": "Collapse",
         * }
         *
Parameters :
Name | Optional
value | No
Returns : `void`

expandedHeight
get `expandedHeight()`
Defined in src/tiles/expandable-tile.component.ts:72

    import {
    	Component,
    	Input,
    	ElementRef,
    	AfterContentInit
    } from "@angular/core";
    import { I18n, Overridable } from "./../i18n/i18n.module";
    import { merge } from "./../utils/object";

    export interface ExpandableTileTranslations {
    	EXPAND: string;
    	COLLAPSE: string;
    }

    @Component({
    	selector: "ibm-expandable-tile",
    	template: `
    		<div
    			class="bx--tile bx--tile--expandable"
    			[ngClass]="{'bx--tile--is-expanded' : expanded}"
    			[ngStyle]="{'max-height': expandedHeight + 'px'}"
    			role="button"
    			tabindex="0"
    			(click)="onClick()">
    			<button [attr.aria-label]="(expanded ? collapse : expand).subject | async" class="bx--tile__chevron">
    				<svg *ngIf="!expanded" width="12" height="7" viewBox="0 0 12 7" role="img">
    					<title>{{expand.subject | async}}</title>
    					<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
    				</svg>
    				<svg *ngIf="expanded" width="12" height="7" viewBox="0 0 12 7" role="img">
    					<title>{{collapse.subject | async}}</title>
    					<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
    				</svg>
    			</button>
    			<div class="bx--tile-content">
    				<ng-content select=".bx--tile-content__above-the-fold"></ng-content>
    				<ng-content select=".bx--tile-content__below-the-fold"></ng-content>
    			</div>
    		</div>
    	`
    })
    export class ExpandableTile implements AfterContentInit {
    	@Input() expanded = false;
    	/**
    	 * Expects an object that contains some or all of:
    	 * ```
    	 * {
    	 *		"EXPAND": "Expand",
    	 *		"COLLAPSE": "Collapse",
    	 * }
    	 * ```
    	 */
    	@Input()
    	set translations(value: ExpandableTileTranslations) {
    		const valueWithDefaults = merge(this.i18n.getMultiple("TILES"), value);
    		this.expand.override(valueWithDefaults.EXPAND);
    		this.collapse.override(valueWithDefaults.COLLAPSE);
    	}

    	tileMaxHeight = 0;
    	element = this.elementRef.nativeElement;

    	expand = this.i18n.getOverridable("TILES.EXPAND");
    	collapse = this.i18n.getOverridable("TILES.COLLAPSE");

    	constructor(protected i18n: I18n, protected elementRef: ElementRef) {}

    	ngAfterContentInit() {
    		this.updateMaxHeight();
    	}

    	get expandedHeight() {
    		return this.tileMaxHeight + parseInt(getComputedStyle(this.element.querySelector(".bx--tile")).paddingBottom, 10);
    	}

    	updateMaxHeight() {
    		if (this.expanded) {
    			this.tileMaxHeight = this.element.querySelector(".bx--tile-content").getBoundingClientRect().height;
    		} else {
    			this.tileMaxHeight = this.element.querySelector(".bx--tile-content__above-the-fold").getBoundingClientRect().height;
    		}
    	}

    	onClick() {
    		this.expanded = !this.expanded;
    		this.updateMaxHeight();
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""