Dornhoth

<app-error-card></app-error-card>
<app-error-card>
  Another error text
  <div>
    <a href="google.com">Google it</a>
  </div>
</app-error-card>

Dornhoth

{{text}}

Dornhoth

import {
  Component,
  ChangeDetectionStrategy,
  Input,
  Output,
  EventEmitter,
  HostListener,
  ViewChild,
  ElementRef,
  forwardRef,

Dornhoth

export class MultiselectComponent implements ControlValueAccessor {
  [...]

  open = false;
  disabled = false;

  [...]

  writeValue(items: Array<ListItem>): void {
    this.selectedItems = items || [];

Dornhoth

export class MultiselectComponent implements ControlValueAccessor {
  [...]

  private onChange = (_: Array<ListItem>) => { };
  private onTouch = () => { };

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.multiselect.nativeElement.contains(targetElement);
    if (!clickedInside) {

Dornhoth

export class MultiselectComponent implements ControlValueAccessor {
  [...]

  private onChange = (_: Array<ListItem>) => { };
  private onTouch = () => { };

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.multiselect.nativeElement.contains(targetElement);
    if (!clickedInside) {

Dornhoth

export class MultiselectComponent implements ControlValueAccessor {
  
  [...]

  private onChange = (_: Array<ListItem>) => { };

  [...]

  writeValue(items: Array<ListItem>): void {
    throw new Error('Method not implemented.');

Dornhoth

<app-multiselect name="my-component" [items]="possiblePets" (itemSelected)="addPet($event)"></app-multiselect>

Dornhoth

$color-border: #adadad;
$color-selected: #d2d2d2;
$color-selected-background: #fcfcfc;

$spacing-extra-small: 4px;
$spacing-small: 8px;
$spacing-large: 12px;
$border-radius: 3px;

:host {

Dornhoth

<div #multiselect class="multiselect">
  <div class="input" (click)="toggleDropdown()">
    <span (click)="onItemClick(item)" class="selected-item" *ngFor="let item of selectedItems;trackBy: trackByFn">
      {{item.text}}
    </span>
  </div>
  <div class="dropdown-list" [hidden]="!open">
    <ul>
      <li *ngFor="let item of items" (click)="onItemClick(item)"
        [class.selected]="isItemAlreadySelected(item)">