Личный проект2022

Каталог курсов

Angular 13 с фильтрами и постраничной догрузкой

Что это за проект

Страница каталога курсов: шапка, поиск, сайдбар фильтров по направлениям и типу обучения, сетка карточек с цветными фонами через ngStyle, догрузка по десять и wildcard-страница 404.

Моя роль

Личный проект: интерфейс каталога целиком.

Стек

Angular 13
TypeScript
Tailwind
ng-bootstrap
LESS

Что внутри стоит посмотреть

Сайдбар фильтров и сортировка
Динамические фоны карточек через привязку стилей
Догрузка порциями без перезагрузки
Роутинг с обработкой неизвестных адресов

Технические решения

Выдержки из настоящих файлов проекта — путь к каждому указан над кодом.

Состояние догрузки в самом компоненте

Кнопка не запрашивает данные, а увеличивает счётчик, по которому шаблон режет массив. Тридцать профессий лежат в компоненте как данные с цветом и картинкой. Для учебного проекта это правильный минимум: видно понимание привязки шаблона к состоянию, и нет лишнего слоя сервисов там, где сервер не нужен.

src/app/components/card.component.tstypescript

export class CardComponent {
  a = [
    { id: 1, pro: '3D-аниматор',  len: 12, bgn: '#fbb9a4', img: '...' },
    { id: 2, pro: 'Фотограф',      len: 18, bgn: '#ffde9a', img: '...' },
    { id: 3, pro: 'TeamLead',      len: 6,  bgn: '#ffeace', img: '...' },
    // ...всего 30 профессий
  ];

  num = 10;

  aadw() {
    this.num = this.num + 10;
  }
}

Цвет карточки из данных и догрузка порциями

У каждой профессии свой фон: цвет приходит из данных и подставляется привязкой стилей, без отдельного класса на каждый оттенок. Список режется по счётчику, который увеличивает кнопка — примитивная, но работающая пагинация без запросов к серверу.

src/app/components/card.component.htmlhtml

<div *ngFor="let item of a.slice(0, this.num)" class="w-1/2 m-0">
  <div class="rounded-lg m-2 p-3 px-4 h-48" [ngStyle]="{ 'background': item.bgn }">
    <small>Профессия</small>
    <h3 class="font-bold text-xl">{{ item.pro }}</h3>
    <small><span class="font-extrabold">{{ item.len }}</span> месяцев</small>
  </div>
</div>

<button (click)="aadw()">Показать еще 10 Профессий</button>

Что не доделано

Пишу сам, до того как заметит собеседующий.

Картинки курсов — внешние ссылки на чужой CDN, поэтому не загружаются
Данные лежат в массиве в компоненте, без API

Открыть живой сайт ↗← вернуться к каталогу