Advanced Angular Directives Course!

Advanced Angular Directives Course!
Published 11/2023
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz

Mastering Angular Directives: Empower Your Projects with Drag-and-Drop, Mouse Selection, and More!

What you’ll learn

Ability to create complex directives on your own

Design and implement advanced drag-and-drop filtering functionality for enhanced user experience

Develop mouse selection on tables

Requirements

Windows, macOS or Linux. Feel free to use any code editor (VSCode preferred)
Basic understanding of JavaScript, Angular, TypeScript

Description

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Drag & Drop

Lecture 2 Creating HTML structure and ListDraggable directive

Lecture 3 Defining initial properties

Lecture 4 Understanding init method through diagram

Lecture 5 Creation of init method

Lecture 6 Adding mouse movement to the dragged item

Lecture 7 Finding new target item for dropping

Lecture 8 Understanding next steps for getting mouse direction

Lecture 9 Creating methods to get Indices for drag placeholder and item

Lecture 10 Correction for getTransform method

Lecture 11 Using indices to check direction

Lecture 12 Understanding how item rearranging works through diagram

Lecture 13 Creating drag operation filter method

Lecture 14 Rearranging items during dragging

Lecture 15 Creating final listener and finishing the main functionality

Section 3: Drag & Drop – Enabling Dragging Across Multiple List Containers

Lecture 16 Creating connectedTo directive instance

Lecture 17 Adjusting init method and introducing additional CSS class

Lecture 18 Toggling between multiple instances

Lecture 19 Adjusting the mouse up method

Section 4: Mouse Selection

Lecture 20 Creating directive and table selection class instance

Lecture 21 Creating mouse down method

Lecture 23 Introducing new properties and creating mouse move method

Lecture 24 Creating core selection method

Lecture 25 Creating final mouse up method

Lecture 26 Supporting multiple types and adding list selection

Anyone who wants to elevate their Angular coding skills to the next level