### File

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

### Metadata

selector | `ibm-selection-tile`
template |
    <label
    	class="bx--tile bx--tile--selectable"
    	tabindex="0"
    	[for]="id"
    	[ngClass]="{'bx--tile--is-selected' : selected}"
    	[attr.aria-label]="i18n.get('TILES.TILE') | async">
    	<input
    		#input
    		tabindex="-1"
    		class="bx--tile-input"
    		[id]="id"
    		[type]="(multiple ? 'checkbox': 'radio')"
    		[value]="value"
    		[name]="name"
    		(change)="onChange($event)"/>
    	<div class="bx--tile__checkmark">
    		<svg width="16" height="16" viewBox="0 0 16 16">
    			<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
    				fill-rule="evenodd"/>
    		</svg>
    	</div>
    	<div class="bx--tile-content">
    		<ng-content></ng-content>
    	</div>
    </label>

### Index

###### Properties
Public i18n input multiple name Static tileCount
###### Methods
onChange
###### Inputs
id selected value
###### Outputs
change
###### HostListeners
keydown
###### Accessors
selected

### Constructor

`constructor(i18n: I18n)`
Defined in src/tiles/selection-tile.component.ts:81
Parameters :
Name | Type | Optional
i18n | `I18n` | No

### Inputs

`id` | The unique id for the input. Default value : ``tile-${SelectionTile.tileCount}``
Defined in src/tiles/selection-tile.component.ts:47

`selected` | Updating the state of the input to match the state of the parameter passed in. Set to `true` if this tile should be selected. Type : `boolean`
Defined in src/tiles/selection-tile.component.ts:52

`value` | The value for the tile. Returned via `ngModel` or `selected` event on the containing `TileGroup`. Type : `string`
Defined in src/tiles/selection-tile.component.ts:64

### Outputs

`change` | Internal event used to notify the containing `TileGroup` of changes. `$event` Type: `EventEmitter<Event>`
Defined in src/tiles/selection-tile.component.ts:68

### HostListeners

keydown
Arguments : `'$event'`
`keydown(event)`
Defined in src/tiles/selection-tile.component.ts:88

### Methods

onChange
`onChange(event)`
Defined in src/tiles/selection-tile.component.ts:95
Parameters :
Name | Optional
event | No
Returns : `void`

### Properties

Public i18n
`i18n: `I18n``
Type : `I18n`
Defined in src/tiles/selection-tile.component.ts:83

input
`input: ```
Decorators : `@ViewChild('input')`
Defined in src/tiles/selection-tile.component.ts:81

multiple
`multiple: ```
Default value : `true`
Defined in src/tiles/selection-tile.component.ts:78
Defines whether or not the `SelectionTile` supports selecting multiple tiles as opposed to single tile selection.

name
`name: `string``
Type : `string`
Default value : `"tile-group-unbound"`
Defined in src/tiles/selection-tile.component.ts:73
Set by the containing `TileGroup`. Used for the `name` property on the input.

Static tileCount
`tileCount: `number``
Type : `number`
Default value : `0`
Defined in src/tiles/selection-tile.component.ts:43

### Accessors

selected
get `selected()`
Defined in src/tiles/selection-tile.component.ts:57
set `selected(value: boolean)`
Defined in src/tiles/selection-tile.component.ts:52
Updating the state of the input to match the state of the parameter passed in. Set to `true` if this tile should be selected. Parameters :
Name | Type | Optional
value | `boolean` | No
Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	ViewChild,
    	HostListener
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";
    import { I18n } from "./../i18n/i18n.module";

    @Component({
    	selector: "ibm-selection-tile",
    	template: `
    		<label
    			class="bx--tile bx--tile--selectable"
    			tabindex="0"
    			[for]="id"
    			[ngClass]="{'bx--tile--is-selected' : selected}"
    			[attr.aria-label]="i18n.get('TILES.TILE') | async">
    			<input
    				#input
    				tabindex="-1"
    				class="bx--tile-input"
    				[id]="id"
    				[type]="(multiple ? 'checkbox': 'radio')"
    				[value]="value"
    				[name]="name"
    				(change)="onChange($event)"/>
    			<div class="bx--tile__checkmark">
    				<svg width="16" height="16" viewBox="0 0 16 16">
    					<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
    						fill-rule="evenodd"/>
    				</svg>
    			</div>
    			<div class="bx--tile-content">
    				<ng-content></ng-content>
    			</div>
    		</label>
    	`
    })
    export class SelectionTile {
    	static tileCount = 0;
    	/**
    	 * The unique id for the input.
    	 */
    	@Input() id = `tile-${SelectionTile.tileCount}`;
    	/**
    	 * Updating the state of the input to match the state of the parameter passed in.
    	 * Set to `true` if this tile should be selected.
    	 */
    	@Input() set selected(value: boolean) {
    		if (!this.input) { return; }
    		this.input.nativeElement.checked = value ? true : null;
    	}

    	get selected() {
    		if (!this.input) { return; }
    		return this.input.nativeElement.checked;
    	}
    	/**
    	 * The value for the tile. Returned via `ngModel` or `selected` event on the containing `TileGroup`.
    	 */
    	@Input() value: string;
    	/**
    	 * Internal event used to notify the containing `TileGroup` of changes.
    	 */
    	@Output() change: EventEmitter<Event> = new EventEmitter();

    	/**
    	 * Set by the containing `TileGroup`. Used for the `name` property on the input.
    	 */
    	name = "tile-group-unbound";
    	/**
    	 * Defines whether or not the `SelectionTile` supports selecting multiple tiles as opposed to single
    	 * tile selection.
    	 */
    	multiple = true;	// Set to true because of the way tile group sets it up.
    						// If it is first undefined then set to true, the type will change from radio to checkbox and deselects the inputs.

    	@ViewChild("input") input;

    	constructor(public i18n: I18n) {
    		SelectionTile.tileCount++;
    	}

    	@HostListener("keydown", ["$event"])
    	keyboardInput(event) {
    		if (event.key === "Enter" || event.key === "Spacebar" || event.key === " ") {
    			this.selected = !this.selected;
    			this.change.emit(event);
    		}
    	}

    	onChange(event) {
    		this.change.emit(event);
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""