3. See your tasks

Generate the view

npm run generate view views/task-catalog
# Creates src/app/views/task-catalog/task-catalog.view.ts|html|scss

Render your tasks

import { View, html } from '../../../core/index.js';
import { TaskCardComponent } from '../../components/task-card/task-card.component.js';

const template = html`__TEMPLATE_PLACEHOLDER__`;

export class TaskCatalogView extends View {
    private _tasks: ITask[] = [
        {
            id: 1,
            name: 'First task',
            content: 'This is the first task.'
        },
        {
            id: 2,
            name: 'Second task',
        }
    ];

    constructor() { /* ... */ }

    registerChildren(): Nutin.ComponentConfig[] {
        // One TaskCardComponent is created for each task.
        return this.createCatalogComponents({
            items: this._tasks,
            selector: 'task-cards',
            elementName: 'task-card',
            component: TaskCardComponent,
            elementTag: 'article'
        })
    }
}

Add the target in the template

<div class="task-catalog">
    <h1>Nutin Todo</h1>
    <div class="task-catalog__body">
        <!-- data-catalog attribute = "selector" target -->
        <div data-catalog="task-cards" class="task-catalog__task-cards"></div>
    </div>
</div>

Style it a bit

.task-catalog {
    h1 {
        font-size: 2.5rem;
    }
}

.task-catalog__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
  @media (max-width: 993px) {
      grid-template-columns: repeat(1, 1fr);
  }
}

.task-catalog__task-cards {
    padding: 2rem;
    display: grid;
    gap: 12px;
}

Add the route

// src/app/routes.ts
/* ... */
import { TaskCatalogView } from './views/task-catalog/task-catalog.view.js';

export const appRoutes: Nutin.Routes = {
    // Make your new page the landing page
    '/': () => new TaskCatalogView(),
    /* ... */
}

Remove the default HomeView

rm -rf src/app/views/home

• Remove its import in src/app/routes.ts.

Next step →