Directives In Practice

The application was developed to showcase different scenarios where utilizing Directives in Angular can be advantageous. In the repository, we can compare the implementations of solutions using directives versus the standard approach.

Note: It is crucial not to consider all usages of directives as 'Best Practices'. The objective of the presentation was to motivate developers and demonstrate diverse solutions where utilizing directives could be an intriguing choice.

Note: Please note that the application utilizes two UI libraries, and the rationale behind this choice is straightforward. By incorporating these libraries, I was able to showcase a broader range of use cases and demonstrate their practical applications.

Project folder structure

.
├── enums
├── helpers
├── pages                     
│   ├── directive-composition-api   # Use cases implemented using Directive Composition API
│   ├── directive-solutions         # Use cases implemented using Directive solutions
│   └── naive                       # Contains standard approach for various use cases
├── services                    
├── types                     
└── app.component.ts

Presentation - Angular Wrocław

It was presented by Paweł Kubiak on Angular Wrocław Meetup.

Link to presentation: https://docs.google.com/presentation/d/1DzGatYGiz7DA6T36QnKThWHtUwqNJ4Qr5zmvPCKpS6Q/edit?usp=sharing

Use Cases

0. NgPlural
1. Open External Links in the new tab
2. Validate Password Strength
3. Extend 3rd Party Component - Calendar (PrimeNg)
4. Extend 3rd Party Components - Dropdown (PrimeNg)
5. User Permission

• display/hide elements
• disable elements

6. Smart Directive - Context Menu
7. Directive Composition API - Context Menu

Resources

I would like to thank all the creators who inspired me to create this presentation. I used the following materials to prepare the presentation:

Attribute Directives

• Video - Angular Directives - Build a Hold-to-Delete Button by Fireship
• Article - Use Angular directives to extend components that you don't own by Tim Deschryver
• Article - Superpowers with Directives and Dependency Injection: Part 1 by Armen Vardanyan
• Article - Superpowers with Directives and Dependency Injection: Part 3 by Armen Vardanyan
• Article - Superpowers with Directives and Dependency Injection: Part 4 by Armen Vardanyan

Structural Directives

• Video - Demystified Angular Directives by Nir Kaufman
• Video - Structural Directives in Angular – How to Create Custom Directive by Dmytro Mezhenskyi
• Video - NgTemplateOutlet in Angular - Everything You Have to Know (2022) by Dmytro Mezhenskyi
• Article - Superpowers with Directives and Dependency Injection: Part 2 by Armen Vardanyan
• Article - Create a custom Structural Directive to manage permissions by Thomas Laforge

Directive Composition API - new feature Angular 15

• Video - Angular Directive Composition | Kevin Kreuzer | Angular Tiny Conf Peret 2022 by Kevin Kreuzer
• Video - Introducing the Directive Composition API in Angular v15 by Angular - new feature Angular 15
• Video - Directive Composition API Intro w/ Kristiyan Kostadinov by Kristiyan Kostadinov
• Video - Learn What the Directive Composition API Is and How To Use It in Angular 15 by Fanis Prodromou
• Article - Making DRY Conditional Structural Directives Using Angular Directive Composition API by Netanel Basal

Additional Info

This project was generated with Angular CLI version 16.0.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.