Search code examples
angularangular-directive

Angular4 - Is there a way to make directives transparent?


I'm using a vendor directive (primeng) in some places. However, I would like to have a way to quickly switch between vendors, as in the future I will experiment with others. This is very easy to do when I'm using the vendor components, but seemingly impossible when using directives.

Simply put, instead of doing:

<input type="text" vendorDirective/>

I would like to do:

<input type="text" myDirective/>

While having no code in myDirective besides relevant inputs/outputs, behaving somewhat like an interface.

I'm using Angular6.


Solution

  • There are many ways to do this. One way to do it would be to extend that class in your own directive, and apply the logic as needed. It would look something like this:

    export class MyDirective extends PrimeNGDirective {
    
    
    }
    

    That will give you access to everything that the vendor directive can do, while using your own directive. Though, keep in mind, it's going to take a lot more configuration than this, I'm just giving a small example.