feat: Disable components using directive #19
Conversation
✅ Deploy Preview for charming-faun-72b6b3 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Looks like it is missing DestroyedDirective |
| private readonly destroyed$ = inject(DestroyedDirective).destroyed$; | ||
|
|
||
| constructor(private readonly service: ExampleService, | ||
| @Optional() @Self() private readonly button: MatButton, |
There was a problem hiding this comment.
I think you should be able to make this more generic by doing something like
private readonly elementRef: ElementRef
as that will get the generic host element
then you could do something like
this.service.shouldDisable$
.pipe(takeUntil(this.destroyed$))
.subscribe((shouldDisable) => {
if (this.elementRef.hasOwnProperty('disabled')) {
this.elementRef.disabled = shouldDisable;
}
});Then it would work for any host element that has a disabled property.
There was a problem hiding this comment.
Good idea, to make it more generic. Will adjust it.
There was a problem hiding this comment.
I'd give it a try in a sample app. I thiiiink it will work but not positive.
There was a problem hiding this comment.
Hi guys,
@santoshyadavdev - I've added the link to the tweet about the destroyed directive.
@yharaskrik - I remembered why I once implemented it this way. Using elementRef.nativeElement.disabled = true, it doesn't work for MatSelect.
For MatButton it works in most cases, i.e. it works when we trigger the change of the enabled/disabled status change in runtime, but it doesn't work when we want the button to be disabled on init. At first glance, it looks like it's some kind of problem with change detection on the material side.
I added elementRef to the code snippet so that we can disable other elements that will allow us to do so, e.g. input, html select, or button.
There was a problem hiding this comment.
Approved @yharaskrik let me know if it looks good now?
3 participants
No description provided.