### File

`src/tag/tag-filter.component.ts`

### Extends

`Tag`

### Metadata

selector | `ibm-tag-filter`

template

    <ng-content></ng-content>
    <svg
    	(click)="close.emit()"
    	focusable="false"
    	preserveAspectRatio="xMidYMid meet"
    	style="will-change: transform;"
    	xmlns="http://www.w3.org/2000/svg"
    	aria-label="Clear filter"
    	width="16"
    	height="16"
    	viewBox="0 0 16 16"
    	role="img">
    	<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
    </svg>

### Index

###### Inputs

- class
- type

###### Outputs

- close

###### HostBindings

- attr.class
- attr.class

### Inputs

`class` | Default value : `""`
Inherited from `Tag`
Defined in Tag:34

`type` | type of the tag determines the styling Reference `TagType` for v9 applications, and `TagTypeExperimental` for v10/v9 experimental mode applications Type : `TagType` Default value : `"gray"`
Inherited from `Tag`
Defined in Tag:32

### Outputs

`close` | Function for close/delete the tag `$event` Type: `EventEmitter`
Defined in src/tag/tag-filter.component.ts:32

### HostBindings

attr.class
`attr.class: ```
Defined in src/tag/tag-filter.component.ts:34

attr.class
`attr.class: ```
Inherited from `Tag`
Defined in Tag:36

    import {
    	Component,
    	Output,
    	EventEmitter,
    	HostBinding
    } from "@angular/core";
    import { Tag } from "./tag.component";

    @Component({
    	selector: "ibm-tag-filter",
    	template: `
    		<ng-content></ng-content>
    		<svg
    			(click)="close.emit()"
    			focusable="false"
    			preserveAspectRatio="xMidYMid meet"
    			style="will-change: transform;"
    			xmlns="http://www.w3.org/2000/svg"
    			aria-label="Clear filter"
    			width="16"
    			height="16"
    			viewBox="0 0 16 16"
    			role="img">
    			<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
    		</svg>
    	`
    })
    export class TagFilter extends Tag {
    	/**
    	 * Function for close/delete the tag
    	 */
    	@Output() close = new EventEmitter<any>();

    	@HostBinding("attr.class") get attrClass() {
    		return `bx--tag bx--tag--filter bx--tag--${this.type} ${this.class}`;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""