Структурні директиви

Структурні директиви змінюють структуру DOM за допомогою додавання або видалення HTML-елементів. Структурні директиви позначаються зірочкою *

Розглянемо три структурні директиви: ngIf, ngSwitch і ngFor.

ngIf

Дозволяє видалити або, навпаки, відобразити елемент за певної умови.

app.component.html

<p *ngIf="true">Title</p>

ngSwitch

Дозволяє вбудувати в шаблон конструкцію switch..case і в залежності від результату її виконання виводить той чи інший блок.

app.component.html

<div [ngSwitch]="'Angular'">
  <p *ngSwitchCase="'Angular'">Angular Course</p>
  <p *ngSwitchCase="'TypeScript'">TypeScript Course</p>
  <p *ngSwitchCase="'JavaScript'">JavaScript Course</p>
  <p *ngSwitchDefault>HTML Course</p>
</div>

ngFor

Дозволяє перебрати в шаблоні елементи масиву.

app.component.html

<p *ngFor="let item of items">{{item}}</p>

Також при роботі з директивою ngFor можна користатися змінною індекс, яка при першій ітерації циклу, має значення 0 і збільшується на 1 при кожній наступній.

app.component.html

<p *ngFor="let item of items; let i = index">{{i + ' ' + item}}</p>

Це вбудовані структурні директиви. Також ми можемо створювати і власні структурні директиви.

Завдання.

• Створити папку core

• В папці core створити папку interfaces

• В папці interfaces створити файл todo.interfase.ts

todo.interface.ts

export class Todo {
  id: number;
  title: string;
  description: string;
  isDone: boolean;
}

• В паку interfaces додати барл файл index.ts (barrel file)

index.ts

export * from './todo.interface';

• Створити компонент todos

cmd

ng g c pages/todos

• Додати список - todoList.

• З допомогою структурної директиви ngFor вивести список todoList.

• Додати кнопку show/hide details та кнопку delete.

• Показувати "No Data" якщо todoList відсутній.

• Виконані todo відобразити перекресленеми (з допомогою CSS).

• Додати іконки чекбоксів.

• Додати bootstrap стилі до списку.

todos.component.html

<section class="container app-todos">
  <ul class="list-group list-group-flush todos-list"
      *ngIf="todoList">
    <li class="list-group-item todos-item"
        *ngFor="let item of todoList">
      <header class="todo-header">
        <div class="d-flex">
          <i class="material-icons check-box">
            {{ item.isDone ? 'check_box' : 'check_box_outline_blank' }}
          </i>

          <h5 [class.is-done]="item.isDone">
            {{item.title}}
          </h5>
        </div>

        <div class="todo-btn-group">
          <button class="btn btn-primary"
                  [disabled]="!item.description">show/hide details</button>

          <button class="btn btn-danger">del</button>
        </div>
      </header>

      <div class="todo-description">
        {{item.description}}
      </div>
    </li>
  </ul>

  <div class="text-center"
       *ngIf="!todoList">
    <p>No Data.</p>
  </div>
</section>

todos.component.css

.is-done {
    text-decoration: line-through;
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.check-box {
  margin-right: 15px;
  cursor: pointer;
}

.todo-btn-group button:not(:last-child) {
  margin-right: 5px;
}

.todo-description {
  padding: 10px 0px;
}

todos.component.ts

import { Component, OnInit } from '@angular/core';
import { Todo } from 'src/app/core/interfaces';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.scss']
})
export class TodosComponent implements OnInit {
  todoList: Array<Todo>;
  
  constructor() {
  }
  
  ngOnInit() {
    this.todoList = todoData;
  }
}

const todoData = [{
  id: 1,
  title: 'Learn JS',
  description: '',
  isDone: true
  }, {
  id: 2,
  title: 'Learn Angular',
  description: 'Test description text',
  isDone: false
}];

Приклад дизайну.

Самостійна робота.

• Todo List має бути адаптивним. Адекватно відображатися на екранах мобільних телефонів, планшетів та ноутбуків. Діапазон ширини дисплея від 320px до 1980px.

• Показувати "Todo list is empty. Please create your first todo." якщо todoList пустий.

• Створити компоненту todo-item в папці todos.