### File

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

### Implements

`AfterContentInit` `OnDestroy`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: TileGroup, multi: true }`
selector | `ibm-tile-group`
template |
    <ng-content select="ibm-selection-tile"></ng-content>

### Index

###### Properties
onChange onTouched selectionTiles Static tileGroupCount Protected unsubscribe$ Protected unsubscribeTiles$
###### Methods
ngAfterContentInit ngOnDestroy registerOnChange registerOnTouched writeValue
###### Inputs
multiple name
###### Outputs
selected
###### HostBindings
class.bx--tile-group

### Constructor

`constructor()`
Defined in src/tiles/tile-group.component.ts:59

### Inputs

`multiple` | Set to `true` to support multiple tile selection Default value : `false`
Defined in src/tiles/tile-group.component.ts:38

`name` | The tile group `name` Default value : ``tile-group-${TileGroup.tileGroupCount}``
Defined in src/tiles/tile-group.component.ts:34

### Outputs

`selected` | Emits an event when the tile selection changes. Emits an object that looks like:
         * {
         *     value: "something",
         *     selected: true,
         *     name: "tile-group-1"
         * }
         *
`$event` Type: `EventEmitter<TileSelection>`
Defined in src/tiles/tile-group.component.ts:52

### HostBindings

class.bx--tile-group
`class.bx--tile-group: ```
Default value : `true`
Defined in src/tiles/tile-group.component.ts:54

### Methods

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

ngOnDestroy
`ngOnDestroy()`
Defined in src/tiles/tile-group.component.ts:100
Returns : `void`

registerOnChange
`registerOnChange(fn: any)`
Defined in src/tiles/tile-group.component.ts:120
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/tiles/tile-group.component.ts:124
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

writeValue
`writeValue(value: any)`
Defined in src/tiles/tile-group.component.ts:109
Parameters :
Name | Type | Optional
value | `any` | No
Returns : `void`

### Properties

onChange
`onChange: ```
Default value : `(_: any) => { }`
Defined in src/tiles/tile-group.component.ts:65

onTouched
`onTouched: ```
Default value : `() => { }`
Defined in src/tiles/tile-group.component.ts:67

selectionTiles
`selectionTiles: `QueryList<SelectionTile>``
Type : `QueryList<SelectionTile>`
Decorators : `@ContentChildren(SelectionTile)`
Defined in src/tiles/tile-group.component.ts:56

Static tileGroupCount
`tileGroupCount: `number``
Type : `number`
Default value : `0`
Defined in src/tiles/tile-group.component.ts:30

Protected unsubscribe$
`unsubscribe$: ```
Default value : `new Subject<void>()`
Defined in src/tiles/tile-group.component.ts:58

Protected unsubscribeTiles$
`unsubscribeTiles$: ```
Default value : `new Subject<void>()`
Defined in src/tiles/tile-group.component.ts:59

    import {
    	Component,
    	AfterContentInit,
    	Input,
    	Output,
    	EventEmitter,
    	HostBinding,
    	ContentChildren,
    	QueryList,
    	OnDestroy
    } from "@angular/core";
    import { SelectionTile } from "./selection-tile.component";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";
    import { TileSelection } from "./tile-selection.interface";
    import { Subject } from "rxjs";
    import { takeUntil } from "rxjs/operators";

    @Component({
    	selector: "ibm-tile-group",
    	template: `<ng-content select="ibm-selection-tile"></ng-content>`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: TileGroup,
    			multi: true
    		}
    	]
    })
    export class TileGroup implements AfterContentInit, OnDestroy {
    	static tileGroupCount = 0;
    	/**
    	 * The tile group `name`
    	 */
    	@Input() name = `tile-group-${TileGroup.tileGroupCount}`;
    	/**
    	 * Set to `true` to support multiple tile selection
    	 */
    	@Input() multiple = false;

    	/**
    	 * Emits an event when the tile selection changes.
    	 *
    	 * Emits an object that looks like:
    	 * ```javascript
    	 * {
    	 * 	value: "something",
    	 * 	selected: true,
    	 * 	name: "tile-group-1"
    	 * }
    	 * ```
    	 */
    	@Output() selected: EventEmitter<TileSelection> = new EventEmitter();

    	@HostBinding("class.bx--tile-group") tileGroupClass = true;

    	@ContentChildren(SelectionTile) selectionTiles: QueryList<SelectionTile>;

    	protected unsubscribe$ = new Subject<void>();
    	protected unsubscribeTiles$ = new Subject<void>();

    	constructor() {
    		TileGroup.tileGroupCount++;
    	}

    	onChange = (_: any) => { };

    	onTouched = () => { };

    	ngAfterContentInit() {
    		const updateTiles = () => {
    			// remove old subscriptions
    			this.unsubscribeTiles$.next();

    			// react to changes
    			// setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
    			setTimeout(() => {
    				this.selectionTiles.forEach(tile => {
    					tile.name = this.name;
    					tile.change
    						.pipe(takeUntil(this.unsubscribeTiles$))
    						.subscribe(() => {
    							this.selected.emit({
    								value: tile.value,
    								selected: tile.selected,
    								name: this.name
    							});
    							this.onChange(tile.value);
    						});
    					tile.multiple = this.multiple;
    				});
    			});
    		};
    		updateTiles();

    		this.selectionTiles.changes
    			.pipe(takeUntil(this.unsubscribe$))
    			.subscribe(_ => updateTiles());
    	}

    	ngOnDestroy() {
    		this.unsubscribe$.next();
    		this.unsubscribe$.complete();

    		// takes care of tile subscriptions when tile-group dies
    		this.unsubscribeTiles$.next();
    		this.unsubscribeTiles$.complete();
    	}

    	writeValue(value: any) {
    		if (!this.selectionTiles) { return; }
    		this.selectionTiles.forEach(tile => {
    			if (tile.value === value) {
    				tile.selected = true;
    			} else {
    				tile.selected = false;
    			}
    		});
    	}

    	registerOnChange(fn: any) {
    		this.onChange = fn;
    	}

    	registerOnTouched(fn: any) {
    		this.onTouched = fn;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""