An in-depth analysis of how Angular directives maintain separation of concerns?

How do Angular directives maintain separation of concerns? This article will show you how to maintain separation of concerns through the Angular directive. I hope it will be helpful to you!

Suppose we have a date picker component in our application. Every time the user changes the date, an event is sent to the analytics provider. So far, we have only used it once, so this analysis interface can be placed in the component that uses it:

header-1.ts

import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroyed';

@UntilDestroy()
class FooComponent {
  timespanControl = new FormControl();

  ngOnInit() {
    this.timespanControl.valueChanges
      .pipe(untilDestroyed(this))
      .subscribe(({ preset }) => {
        this.analyticsService.track('timespan-filter apply', {
          value: preset,
        });
      });
  }
}

But, now We have more places to use this analysis interface, and we don't want to write the same code repeatedly. Someone might suggest that this code could be incorporated into a date picker and passed as an input parameter. [Related tutorial recommendations: "angular tutorial"]

data-picker-1.component.ts

class DatePickerComponent {
  @Input() analyticsContext: string;

  constructor(private analyticsService: AnalyticsService) {}

  apply() {
    this.analyticsService.track('timespan-filter apply', {
      context: this.analyticsContext,
      value: this.preset,
    });

    ...
  }
}

Indeed, this can be achieved, But this is not an ideal design. Separation of concerns means that the date picker itself has nothing to do with the analysis interface, and it does not need to know any information about the analysis interface.

In addition, because the date picker is an internal component, we can modify its source code, but what if it is a third-party component? How to solve it?

A better choice here is the Angular directive. Create a directive, obtain a reference to the form through DI, and subscribe to changes in internal values ​​to trigger analysis events. datePickerAnalytics.directive.ts

@UntilDestroy()
@Directive({
  selector: '[datePickerAnalytics]',
})
export class DatePickerAnalyticsDirective implements OnInit {
  @Input('datePickerAnalytics') analyticsContext: string;

  constructor(
    private dateFormControl: NgControl,
    private analyticsService: AnalyticsService
  ) {}

  ngOnInit() {
    this.dateFormControl
      .control.valueChanges.pipe(untilDestroyed(this))
      .subscribe(({ preset }) => {
        this.analyticsService.track(
          'timespan-filter apply',
          {
            value: preset,
            context: this.analyticsContext
          }
        );
      });
  }
}

It can now be used every time the date picker is used.

<date-picker [formControl]="control" datePickerAnalytics="fooPage"></date-picker>

English original address: https://netbasal.com/maintaining-separation-of-concerns-through-angular-directives-8362ccdf655b

Original author: Netanel Basal

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of An in-depth analysis of how Angular directives maintain separation of concerns?. For more information, please follow other related articles on the PHP Chinese website!