Skip to content

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.

License

Notifications You must be signed in to change notification settings

9kubczas4/directives-in-practice

Repository files navigation

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

  1. NgPlural
  2. Open External Links in the new tab
  3. Validate Password Strength
  4. Extend 3rd Party Component - Calendar (PrimeNg)
  5. Extend 3rd Party Components - Dropdown (PrimeNg)
  6. User Permission
  • display/hide elements
  • disable elements
  1. Smart Directive - Context Menu
  2. 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

Structural Directives

Directive Composition API - new feature Angular 15

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.

About

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.

Topics

Resources

License

Stars

Watchers

Forks