Declarative approach for streams in directives? | Angular Community | Page 1

coarse zodiac Oct 3, 2024, 12:56 PM

#

Hey guys, let's say I have the following code in a structural directive.

const controlStatus$ = this.control.statusChanges.pipe(startWith(this.control.status)) const formSubmit$ = this.formSubmitService.getFormSubmitObservable(); this.element.nativeElement.style.display = 'none combineLatest([formSubmit$, controlStatus$]) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(([submit]) => { if (this.control.status === 'INVALID' && (submit || this.control.dirty || control.touched)) { this.element.nativeElement.style.display = 'block } else { this.element.nativeElement.style.display = 'none } });

Is it possible to get rid of the subscribe and takeUntilDestroyed here by using a declarative approach? In a component it would be easy to assign the observable stream to the async pipe.
But I cannot find a similar approach for directives. In fact, I wonder if there is anything similar?

winged temple Oct 3, 2024, 1:25 PM

#

You can use toSignal to transform the observable into a signal, and use host binding rather than direct dom manipulation to set the style.

#

Oops, no. No host binding on structural directives. But is your directive really structural?

coarse zodiac Oct 3, 2024, 2:03 PM

#

here is full example

`@Directive({
selector: '[validationMessage]',
standalone: true,
})
export class ValidationMessageDirective implements OnDestroy, OnInit {
private readonly element: ElementRef = inject(ElementRef);
private readonly formSubmitService: FormSubmitService = inject(FormSubmitService);
private readonly destroyRef = inject(DestroyRef);

public accessorDirective = input(inject(HostControlDirective));

public ngOnInit(): void {
const control = this.accessorDirective().control;
const controlStatus$ = control.statusChanges.pipe(startWith(control.status));
const formSubmit$ = this.formSubmitService.getFormSubmitObservable();
this.element.nativeElement.style.display = 'none';
combineLatest([formSubmit$, controlStatus$])
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(([submit]) => {
if (control.status === 'INVALID' && (submit || control.dirty || control.touched)) {
this.element.nativeElement.style.display = 'block';
} else {
this.element.nativeElement.style.display = 'none';
}
});
}
}
`

#

so probably not structural only dom manipulation

brazen vessel Oct 3, 2024, 2:07 PM

#

You can use a host style binding instead of direct DOM manipulation. Put the display style you want in a signal and then use

@Directive({
  host: {
    'style.display': 'display()'
  }
})

coarse zodiac Oct 3, 2024, 2:26 PM

#

So i guess display is a signal of the directive and then I convert those two observables into signals as well and use it in combination with computed, where I set the display to none or block

brazen vessel Oct 3, 2024, 2:27 PM

#

For example, yes.

#

You don't have to use signals, they just make it even more declarative

coarse zodiac Oct 3, 2024, 2:28 PM

#

I know, just want to get my head around, but wouldn't it be an effect in this case?

brazen vessel Oct 3, 2024, 2:28 PM

#

No, why?

#

@Directive({
  selector: '[validationMessage]',
  standalone: true,
  host: {
    'style.display': 'display()'
  }
})
export class ValidationMessageDirective {
  public accessorDirective = input(inject(HostControlDirective));
  private readonly formSubmitService: FormSubmitService = inject(FormSubmitService);

  readonly display: Signal<string>;

  constructor() {
    const controlStatus$ = toObservable(this.accessorDirective).pipe(
      switchMap(dir => {
        return dir.control.events.pipe(
          startWith(null),
          map(() => [dir.control.status, dir.control.dirty, dir.control.touched])
        );
      }),
    );
    const formSubmit$ = this.formSubmitService.getFormSubmitObservable();
    const display$ = combineLatest([formSubmit$, controlStatus$]).pipe(
      map(([submit, [status, dirty, touched]]) => {
        if (status === 'INVALID' && (submit || dirty || touched)) {
          return 'block';
        } else {
          return 'none';
        }
      })
    );
    this.display = toSignal(display$, {initialValue: 'none' })
  }
}

coarse zodiac Oct 3, 2024, 2:36 PM

#

sorry got it with computed I always think of a number computation 😅

#

thx I will try it out

#

my first approach was to declare it directly as a member

` private display: Signal<string> = computed(() => {
const control = this.accessorDirective().control;
const controlStatus$ = control.statusChanges.pipe(startWith(control.status));
const formSubmit$ = this.formSubmitService.getFormSubmitObservable();

const controlStatusSignal = toSignal(controlStatus$);
const formSubmitSignal = toSignal(formSubmit$);

if (controlStatusSignal() === 'INVALID' && (formSubmitSignal() || control.dirty || control.touched)) {
  return 'block';
} else {
  return 'none';
}

});`

brazen vessel Oct 3, 2024, 2:39 PM

#

My usual approach if I have observables and signals is to compose stuff in the observable world and in the end do toSignal, because the other way around is ... tricky (you can't just call toSignal from anywhere).

coarse zodiac Oct 3, 2024, 2:41 PM

#

I guess i still need sometime and check out the docs a bit more, to get a full understanding. But this already helped me a lot 🙂

coarse zodiac Oct 7, 2024, 6:39 AM

#

I tried to make this work a couple of hours, but the issue I have with your approach is that, none of of those switchMap or map callbacks are ever reached 🤔
the only way I was able to make it work was with the combineLatest + subscribe

brazen vessel Oct 7, 2024, 6:40 AM

#

Did you have the toSignal at the end? It subscribes to the observable (if you don't the observable obviously does nothing).

coarse zodiac Oct 7, 2024, 6:40 AM

#

yes I have

#

constructor() { const controlStatus$ = toObservable(this.accessorDirective).pipe( switchMap((dir) => { console.log('🚀 ~ ValidationMessageDirective ~ switchMap ~ dir:', dir); return dir.control.valueChanges.pipe( startWith(null), map(() => [dir.control.status, dir.control.dirty, dir.control.touched]), tap(([status, dirty, touched]) => { console.log('🚀 ~ ValidationMessageDirective ~ map ~ status:', status); console.log('🚀 ~ ValidationMessageDirective ~ map ~ dirty:', dirty); console.log('🚀 ~ ValidationMessageDirective ~ map ~ touched:', touched); }), ); }), ); const formSubmit$ = this.formSubmitService.getFormSubmitObservable(); const display$ = combineLatest([formSubmit$, controlStatus$]).pipe( map(([submit, [status, dirty, touched]]) => { console.log('🚀 ~ ValidationMessageDirective ~ map ~ status:', status); if (status === 'INVALID' && (submit || dirty || touched)) { return 'block'; } else { return 'none'; } }), ); this.display = toSignal(display$, { initialValue: 'none' }); }

#

none of those logs are reached

#

which is weird

brazen vessel Oct 7, 2024, 6:41 AM

#

return dir.control.valueChanges.pipe( This is different from mine and this will cause controlStatus$ tonot update properly when status, dirty and touched change

#

But it is very strange that none of the logs are reached at all.

#

This getFormSubmitObservable definitely emits?

coarse zodiac Oct 7, 2024, 6:42 AM

#

ah yeah because it tells me that events does not exist on FormControl

brazen vessel Oct 7, 2024, 6:42 AM

#

Ah, you need to update Angular 😄

coarse zodiac Oct 7, 2024, 6:43 AM

#

yes it does

brazen vessel Oct 7, 2024, 6:43 AM

#

I don't see the issue right now. Would be nice if you could post a Stackblitz 🙂

coarse zodiac Oct 7, 2024, 6:43 AM

#

update angular? 😅

#

which version?

#

probably v18?

brazen vessel Oct 7, 2024, 6:44 AM

#

Yeah, I think events was added in 18

#

But don't quote me on that

#

If you can't update right now, there are some dedicated observables for status, dirty and touched I think

coarse zodiac Oct 7, 2024, 6:45 AM

#

my guess is that the controlStatus$ is the problem

brazen vessel Oct 7, 2024, 6:45 AM

#

At least this should be logged for sure:

console.log(':rocket: ~ ValidationMessageDirective ~ switchMap ~ dir:', dir);

coarse zodiac Oct 7, 2024, 6:47 AM

#

yeah but it is not logged

#

there is something weird with the accessoDirective signal

#

this is a project I was involved lately

brazen vessel Oct 7, 2024, 6:47 AM

#

It's just an input signal is it not?

coarse zodiac Oct 7, 2024, 6:48 AM

#

yes it is an input signal

brazen vessel Oct 7, 2024, 6:49 AM

#

Okay. Well, this is really hard to debug afar like this

coarse zodiac Oct 7, 2024, 6:49 AM

#

so once the element gets rendered, the switchMap should fire

brazen vessel Oct 7, 2024, 6:49 AM

#

Correct, considering you subscribed.

#

You said you made it work with manual subscription - can you show that?

coarse zodiac Oct 7, 2024, 6:51 AM

#

check my initial post

#

that was the code I put into the ngOnInit and it works

#

`export class ValidationMessageDirective implements OnDestroy, OnInit {
private readonly element: ElementRef = inject(ElementRef);
private readonly formSubmitService: FormSubmitService = inject(FormSubmitService);
private readonly destroyRef = inject(DestroyRef);

public accessorDirective = input(inject(HostControlDirective));

public ngOnInit(): void {
const control = this.accessorDirective().control;
const controlStatus$ = control.statusChanges.pipe(startWith(control.status));
const formSubmit$ = this.formSubmitService.getFormSubmitObservable().pipe(startWith(false));
this.element.nativeElement.style.display = 'none';
combineLatest([formSubmit$, controlStatus$])
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(([submit]) => {
if (control.status === 'INVALID' && (submit || control.dirty || control.touched)) {
this.element.nativeElement.style.display = 'block';
} else {
this.element.nativeElement.style.display = 'none';
}
});`
}

brazen vessel Oct 7, 2024, 6:53 AM

#

I thought you meant it was a variant of my code.

#

Something very weird is going on with that toObservable not firing.

coarse zodiac Oct 7, 2024, 6:54 AM

#

yeah It does nothing 😀

brazen vessel Oct 7, 2024, 6:55 AM

#

Well it does work fine, there is something else going on here. But I can't really tell you anything more but to please post a Stackblitz.

coarse zodiac Oct 7, 2024, 6:56 AM

#

yeah of course I will try to do that

#

when where the host bindings like this introduced?

host: {
'style.display': 'display()',
},

angular v18?

brazen vessel Oct 7, 2024, 7:04 AM

#

That syntax has existed since forever, but it used to be discouraged in favor of @HostBinding. But @HostBinding doesn't really support signals, so host is the recommended way now.

#

It still isn't super great, because it is not type-checked, but yeah.

#

That said... I just noticed I had a syntax error in my example code. It should be

@Directive({
  selector: '[validationMessage]',
  standalone: true,
  host: {
    '[style.display]': 'display()'
  }
})

#Declarative approach for streams in directives?