How to create dismissable Clarity labels? - label

Question

In the Clarity Components documentation there is a working example for "Dimissing labels", but unfortunately there is no example code for this case.
See https://v2.clarity.design/labels
The documentation says - A label can be dismissed. Use a close icon at the right-most side of a label to dismiss it.
How do I create the label in the example?
I tried the following without success (just hoping for the best)
<span class="label" >james#test.com<clr-icon shape="close" ></clr-icon></span>

Answer 1

There is not an implementation of this behavior, rather it is just a CSS/HTML example that shows what the pattern would look like. It is up to the application to handle the 'dismissing' of the label by removing the label on click of the close button.

Answer 2

You can write a directive, say dismissable and have it add a X icon to labels, and which could emit an event whenever user clicks the X.
import { Directive, ElementRef, Renderer2, AfterViewInit, Output, EventEmitter } from '#angular/core';
#Directive({
selector: '[dismissable]'
})
export class DismissabelDirective implements AfterViewInit {
#Output()
close = new EventEmitter();
constructor(private renderer: Renderer2, private elRef: ElementRef) {
}
ngAfterViewInit() {
let icon = this.renderer.createElement('clr-icon');
icon.setAttribute('shape', 'close');
icon.style.margin = '1rem;'
this.renderer.setStyle(icon, 'margin-left', '0.5rem');
this.renderer.setStyle(icon, 'margin-right', '-0.25rem');
this.renderer.setStyle(icon, 'cursor', 'pointer');
this.renderer.appendChild(this.elRef.nativeElement, icon);
this.renderer.listen(icon, 'click', () => {this.close.emit(); return true;})
}
}
You could use it like below:
app.component.html
<div class="container">
<span class="label" dismissable (close)="delete(item)" *ngFor="let item of items">{{item}}</span>
</div>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
items = ['Apple', 'Orange', 'Banana'];
delete(item) {
const index: number = this.items.indexOf(item);
if (index !== -1) {
this.items.splice(index, 1);
}
}
}
Here is complete StackBlitz: https://stackblitz.com/edit/clarity-light-theme-v2-dismissable-labels