6. Make tasks disappear

Let the service delete tasks

export class TaskService extends Service<TaskService> {
    /* ... */
    public deleteTask(id: number): void {
        this._tasks = this._tasks.filter((task: ITask) => task.id !== id);
        AppEventBus.emit('task-event', { taskId: id });
    }
}

Generate the component

npm run generate component components/task-action
# Creates src/app/components/task-action/task-action.component.ts|html|scss

Pass configuration to the component

import { Component, html } from '../../../core/index.js';

export interface ITaskActionConfig {
    callback: () => void;
    textContent: string;
}

const templateFn = (config: ITaskActionConfig) => html`__TEMPLATE_PLACEHOLDER__`;

export class TaskActionComponent extends Component {
    private _callback: () => void;

    constructor(
        mountTarget: HTMLElement,
        config: ITaskActionConfig,
        props: Nutin.ComponentProps = { /* className: '', style: '' */ },
    ) {
        super({ templateFn, mountTarget, config, props });
        this._callback = config.callback;
    }
}

Bind the callback

<div class="task-action">
    <button data-event="click:_callback">${config.textContent}</button>
</div>

Style it

.task-action {
    padding: .5rem;
    button {
        background: #FAFAF9;
        padding: 0 1rem;
        border-radius: 10px;
        border: 2px solid #D6D6D2;
        &:hover {
            border: 2px solid #B2B2AD;
        }
    }
}

Use it in the card

/* ... */
import { taskService } from '../../services/task/task.service.js';
import { TaskActionComponent } from '../task-action/task-action.component.js';

export class TaskCardComponent extends Component {
    constructor(mountTarget: HTMLElement, config: ITask) { /* ... */ }

    registerChildren(): Nutin.ComponentConfig[] {
        return [
            {
                selector: 'remove',
                factory: (el) => new TaskActionComponent(el, 
                    // config
                    {
                        callback: () => this._removeTask(),
                        textContent: 'Remove',
                    },
                    // props
                    { className: 'task-card__action-remove' },
                )
            },
        ]
    }

    private _removeTask(): void {
        taskService.deleteTask(this.config.id);
    }
}

<div class="task-card">
    <!-- ... -->
    <div data-component="remove"></div>
</div>

Customize its style

.task-card__action-remove {
    button {
        color: #B05252;
        &:hover {
            border: 2px solid #B05252;
        }
    }
}

Next step →