Angular Rendere2, Tooltip Directive с нуля

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ก.ค. 2024
  • Для взаимодействия с DOM API в Angular рекомендуется использовать сервис Renderer2. Почему не Renderer? Да потому что Renderer устарел. В этом видео я расскажу о возможностях Renderer2 и создам Tooltip Directive для отрисовки тултипы на любом DOM элементе.
    Renderer2 создержит большое количество методов помошников для взаимодействия с DOM. Обычно я не использую его в работе, но много раз встречаю в чужом коде и должен понимать как это работает.
    Renderer2 рисует не просто верстку, а даже добавляет инкапсуляцию стилей как это делает копонент, что позволяет писать изолированные стили в родительском компоненте
    ==============================
    Код готового урока:
    github.com/MaksymGrom/angular...
    ==============================
    Инструкция по установке angular проекта:
    Вариант 1:
    Пройдите плейлист: • Как работает WEB. Мест...
    Вариант 2:
    github.com/MaksymGrom/angular...
    Загрузите зависимости (npm install)
    Можно запускать проект (ng serve)
    ==============================
    Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
    VS Code: • VS Code extensions для...
    WebStorm: • WebStorm работа с angu...
    Архитектурные елементы Angular • Angular архитектурные ...
    Основы RxJS • RxJs Теория: Observabl...
    Подробнее об OnPush • ngOnChanges vs ngDoChe...
    Немного старого видео об иммутабельности • Immutable. Неизменяемо...
    Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
    Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
    Спасибо что продолжаете смотреть меня и радовать комментариями.
    ---- Соц сети
    Телеграм, где можно узнать о новых видео и получать доп контент
    t.me/webDevGromMaxChannel
    P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
    ----
    Чтобы поддержать канал
    1) Можно поставить лайк (или дизлайк, если не понравилось видео)
    2) Оставить комментарий более 5 слов
    3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
    4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
    5) Можно стать участником моего канала на платной основе / @grommaks
    #directives #angular #grommax
    Материально поддержать канал можно следующим способом
    1) Перевод на карту send.monobank.ua/7oqmsFg3Y
    2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
    forms.gle/ZbFCKJSpDNYp4AMC6
    Оглавление
    00:00 - Введение
    00:19 - Настройка проекта
    00:37 - Создание TooltipDirective
    04:11 - Проблемы работы с DOM API
    05:18 - Renderer2 setAttribute пример
    06:58 - Методы Renderer2, теория
    11:00 - Создание логики TooltipDirective практика
    18:41 - Краткий гайд

ความคิดเห็น • 11

  • @DzhavidR
    @DzhavidR 7 หลายเดือนก่อน +1

    отлично, отлично. продолжай! один из топовых по ангуляру, если не самый топовый

  • @alexejks8468
    @alexejks8468 11 หลายเดือนก่อน +3

    Круто! Спасибо, что вернулись

  • @andreifilimonchyk8318
    @andreifilimonchyk8318 11 หลายเดือนก่อน +2

    Спасибо за видос! Все как обычно - на высоте!)

  • @G3tf
    @G3tf 11 หลายเดือนก่อน +1

    Макс привет, рад что ты дальше делаешь видео, поправь опечатку в тайм кодах: 00:37 - Создвние TooltipDirective

  • @MsEntombed
    @MsEntombed 11 หลายเดือนก่อน +1

    Спасибо за видео

  • @nouchance
    @nouchance 11 หลายเดือนก่อน +1

    Спасибо 🎉

  • @MrVIPKent
    @MrVIPKent 11 หลายเดือนก่อน +1

    Давно не було нових відео на каналі

  • @tynoheaekbat2328
    @tynoheaekbat2328 11 หลายเดือนก่อน +2

    Спасибо за прекрасное видео! В начале было упоминание тестирования компонентов и директив, планируется ли плейлист по этой нужной в разработке, но далеко не самой очевидной теме?

    • @grommaks
      @grommaks  11 หลายเดือนก่อน +4

      В планах есть, но это далеко не следующий плейлист
      Также есть в планах начать англоязычный канал :)

  • @VasjaG
    @VasjaG 11 หลายเดือนก่อน +1

    Продолжаем разгружать танкер с Ангуляром!

  • @user-ve8ux5yy7y
    @user-ve8ux5yy7y 11 หลายเดือนก่อน +1

    Hi, next video, please:)