### File

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

### Description

Build application's clickable tiles using this component.

## Basic usage

     * <ibm-clickable-tile>
     *         tile content
     * </ibm-clickable-tile>
     *

### Metadata

selector | `ibm-clickable-tile`

template

    <a
    	ibmLink
    	class="bx--tile bx--tile--clickable"
    	tabindex="0"
    	(click)="navigate($event)"
    	[href]="href"
    	[attr.target]="target"
    	[attr.aria-disabled]="disabled">
    	<ng-content></ng-content>
    </a>

### Index

###### Methods

- navigate

###### Inputs

- disabled
- href
- route
- routeExtras
- target

###### Outputs

- navigation

### Constructor

`constructor(router: Router)`
Defined in src/tiles/clickable-tile.component.ts:66

Parameters :

Name | Type | Optional
router | `Router` | No

### Inputs

`disabled` | Set to `true` to disable the clickable tile. Default value : `false`
Defined in src/tiles/clickable-tile.component.ts:49

`href` | Sets the `href` attribute on the `ibm-clickable-tile` element. Default value : `"#"`
Defined in src/tiles/clickable-tile.component.ts:39

`route` | Array of commands to send to the router when the link is activated See: https://angular.io/api/router/Router#navigate Type : `any[]`
Defined in src/tiles/clickable-tile.component.ts:55

`routeExtras` | Router options. Used in conjunction with `route` See: https://angular.io/api/router/Router#navigate Type : `any`
Defined in src/tiles/clickable-tile.component.ts:61

`target` | Sets the `target` attribute on the `ibm-clickable-tile` element. Type : `string`
Defined in src/tiles/clickable-tile.component.ts:44

### Outputs

`navigation` | Emits the navigation status promise when the link is activated `$event` Type: `EventEmitter`
Defined in src/tiles/clickable-tile.component.ts:66

### Methods

navigate
`navigate(event)`
Defined in src/tiles/clickable-tile.component.ts:70

Parameters :

Name | Optional
event | No

Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	Optional
    } from "@angular/core";
    import { Router } from "@angular/router";

    /**
     * Build application's clickable tiles using this component.
     *
     * ## Basic usage
     *
     * ```html
     * <ibm-clickable-tile>
     * 		tile content
     * </ibm-clickable-tile>
     * ```
     */
    @Component({
    	selector: "ibm-clickable-tile",
    	template: `
    	<a
    		ibmLink
    		class="bx--tile bx--tile--clickable"
    		tabindex="0"
    		(click)="navigate($event)"
    		[href]="href"
    		[attr.target]="target"
    		[attr.aria-disabled]="disabled">
    		<ng-content></ng-content>
    	</a>`
    })
    export class ClickableTile {
    	/**
    	 * Sets the `href` attribute on the `ibm-clickable-tile` element.
    	 */
    	@Input() href = "#";

    	/**
    	 * Sets the `target` attribute on the `ibm-clickable-tile` element.
    	 */
    	@Input() target: string;

    	/**
    	 * Set to `true` to disable the clickable tile.
    	 */
    	@Input() disabled = false;

    	/**
    	 * Array of commands to send to the router when the link is activated
    	 * See: https://angular.io/api/router/Router#navigate
    	 */
    	@Input() route: any[];

    	/**
    	 * Router options. Used in conjunction with `route`
    	 * See: https://angular.io/api/router/Router#navigate
    	 */
    	@Input() routeExtras: any;

    	/**
    	 * Emits the navigation status promise when the link is activated
    	 */
    	@Output() navigation = new EventEmitter<Promise<boolean>>();

    	constructor(@Optional() protected router: Router) {}

    	navigate(event) {
    		if (this.router && this.route) {
    			event.preventDefault();
    			const status = this.router.navigate(this.route, this.routeExtras);
    			this.navigation.emit(status);
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""