В этой статье я собираюсь показать создание небольшого приложения с помощью которого можно будет создавать пиксельные картинки, также будет возможность разместить эти картинки в галерее, проголосовать за понравившуюся. Вообщем будет блог, галерея и мастерская. Мне показалось, что это может быть интересно новичкам, которые уже немного научились Angular и пробуют делать различные приложения для того, чтобы выработать свой стиль и набить руку.   Это моя первая статья подобного рода и возможно я бы никогда ее не разместил, но моё лузерство и привычка быть обыкновенным, меня настолько раскрепостили, что я воспринимаю поражения как должное. Амбиций нет, есть только кайф от того, что я делаю, люблю созерцать, люблю что то создавать. Рад буду если это кому то принесет пользу. Надеюсь при просмотре опытными разработчиками все не окажется очень плохо и я найду в себе силы выложить следующие части. Содержание Создаем приложение Art-pixel на Angular и Nest.js. Часть 2 Создаем приложение Art-pixel на Angular и Nest.js. Часть 2.1 (ESLint) Создаем приложение Art-pixel на Angular и Nest.js. Часть 3 (Docker) А может кому то просто понравится рисовать, ссылка на демо ниже. В этой части я буду использовать Angular и CSS фреймворк от  w3schools Итак, в первой части будет описан процесс создания вот такой мастерской. Здесь можно посмотреть Demo, здесь находится код. Идем устанавливаем Ангулар. Создаем новый проект.  Подразумевается, что вы умеете это делать по этому я не буду это описывать. Наша мастерская будет создана в виде отдельного модуля. Создаем его с помощью следующих команд: ng g m canvas ng g c canvas/components/main-canvas --module canvas.module ng g c canvas/components/left-panel --module canvas.module ng g c canvas/components/canvas --module canvas.module ng g c canvas/components/form --module canvas.module Где main-canvas у нас является родителем для компонентов left-panel, canvas, form. Создаем component main-canvas code main-canvas.component.html code main-canvas.component.ts Пока в этом компоненте у нас находится единственный метод, который получает данные из компонента left-panel   который в свою очередь получает их из компонента form  и передает их в компонент canvas  где на основании отправленных данных  происходит создание рисунка.  Создаем компонент  left-panel  left-panel.cpmponent.html Здесь все просто  мы получаем данные из компонента форм left-panel.component.ts Сейчас у нас здесь единственный метод getData() который передает полученный из формы данные в родительский компонент и дальше в канвас компонент  Создаем компонент form.   form.component.html Создаем form.component.ts и наконец создаем компонент нашего ядра canvas.component canvas.component.html canvas.component.ts А теперь давайте разбираться что здесь происходит. Компонент состоит из методов: onResize(data: any), draw(), cleardraw(), create(), clearPixel() onResize(data: any) - вызывается из метода ngOnInit, когда приходит событие о том, что пользователь отправил форму создания холста. cleardraw():  подготавливает поле к перерисовке draw(): отрисовывает холст create(): восстанавливает рисунок из localStorage clearPixel(): устанавливает цвет кисти равным цвету холста ngOnInit: вызывается фреймворком Angular один раз после установки свойств компонента, которые участвуют в привязке. Выполняет инициализацию компонента. И здесь мы подписываемся на события из родительского компонента ngAfterViewInit: вызывается фреймворком Angular после инициализации представления компонента, а также представлений дочерних компонентов. Вызывается только один раз, здесь мы подписываемся на пользовательское событие клика и собственно здесь и происходит рисование На сегодня это все, иду готовить продолжение.