Use Angular directives to extend components that you don't own

[utterances-bot]

Use Angular directives to extend components that you don't own - Tim Deschryver

Angular directives allow us to extend components without changing their internal code. This is useful to bring a consistent UX to 3rd party components. The directive can be configured to always be applicable, or can be used in an opt-in or opt-out basis.

https://timdeschryver.dev/blog/use-angular-directives-to-extend-components-that-you-dont-own

[carlos-gomez-espinosa]

Hi, how do you use these new ones directives on your HTML?
Do you need some import?, or in app.module?

Can you explain it?
Thank you very much

[timdeschryver]

Good question @carlos-gomez-espinosa
To use these directives, add the directive to the module (or component if you're using standalone components) where it's consumed. This is similar to components.
For more info, see the Angular docs.

[rafal21-ops]

Hello, great content. I also notice that directive are often underrated. I am on my third commercial project and across all of them directive were very rarely.

[timdeschryver]

That's great to hear, thanks for the feedback @rafal21-ops !

[st-clair-clarke]

Is it deliberate that the name of the directive is the same as the prime-ng component selector? It works but linting shows that it should be used as a selector?

[st-clair-clarke]

...should be used as an attribute (correction)

[timdeschryver]

Great question!
It was done this way because we had a "shared" module that contained some of these directives, and we wanted to automatically register them (thus we used the same name as the prime component selector).
Currently, we updated it to be more explicit, and we're using attributes now. This also works nicer with the standalone API imho.

[mconner]

Very Helpful!
Can you provide any suggestions on how to set the value of the component. I was playing around with a stackblitz. While I can get the value in the component (i.e.: see it displayed) if I wait till ngAfterViewInit() (and then in setTimeout), it is not updating the model (I've got a get date()/set date() and set is never called). I've tried setting (In the directive) this.calendar.value, and also this.calendar.writeValue(newDate).

[NsdHSO]

For me the worst thing is that I can't modify HTML, add new elements myself, modify element. this is the biggest problem, if for example you have a wrapper (jumbotron) and you want to put the calendar and a few more buttons in it, this part seems complicated to me, do you have any ideas?

[timdeschryver]

Sorry @NsdHSO , I'm afraid I can't help with that. I suppose it also depends on the library you're using.

[NsdHSO]

I think I was misunderstood, I'm not referring to a library, or something like that, but internally between components, HTML cannot be inherited :(

I created a stackblitz.
stack

[timdeschryver]

As far as I know you cannot inherit the HTML of a component.

[NsdHSO]

yes, I knew that too..., but the open-closed principle remains only for TS.

[NsdHSO]

This article is very useful, Tnx

[danbeo95]

Very helpfull

[timdeschryver]

Thank you @danbeo95

[NsdHSO]

so I want to override a spinner when startRequest,

I did it with the selector: 'spinner', it overwrote it the first time, but not after that! spinner component has ngIf inside. How should I proceed in this case, I want to overwrite all the time