Different methods to efficiently import directives into multiple components without repeating the code

Question

Different methods to efficiently import directives into multiple components without repeating the code

As I delve into creating Web apps using Angular2 with TypeScript, one aspect that stands out is the need to import CustomElements (such as Components and Directives, Validators) in each individual Component file. This results in repetitive code like directives: [...], as shown below:

// my_component_1.component.ts
@Component({
  selector: 'my-component-1',
  directives: [
    ROUTER_DIRECTIVES,
    MyDirective1,
    MyDirective2,
    MyValidator1,
    MyValidator2,
    ...
  ],
})

// my_component_2.component.ts
@Component({
  selector: 'my-component-2',
  directives: [
    ROUTER_DIRECTIVES,
    MyDirective1,
    MyDirective2,
    MyValidator1,
    MyValidator2,
    ...
  ],
})

// my_component_3.component.ts
@Component({
  selector: 'my-component-3',
  directives: [
    ROUTER_DIRECTIVES,
    MyDirective1,
    MyDirective2,
    MyValidator1,
    MyValidator2,
    ...
  ],
})

I start pondering if there's a more efficient way to import CustomComponents without the repetitive directives: [...] declarations. Is there a method akin to event bubbling or prototype chain where child Components can inherit the imported CustomElements of their parent Components?

// parent.component.ts
@Component({
  selector: 'parent',
  directives: [MyDirective1, ...],
})

// child.component.ts
@Component({
  selector: 'child',
  template: `
    // Here, MyDirective is accessible due to being imported by ParentComponent.
    <div my-directive></div>
  `,
})

typescript angular

Answer 1

Answer №1

One way to streamline the definition of platform directives is by setting them as global constants:

export const GENERAL_DIRECTIVES: any[] = [
  ROUTER_DIRECTIVES,
  MyDirective1,
  MyDirective2,
  MyValidator1,
  MyValidator2,
  (...)
];

bootstrap(App, [
  provide(PLATFORM_DIRECTIVES, {useValue: [GENERAL_DIRECTIVES], multi: true})
]);

This eliminates the need for importing them repeatedly in your code.

If you're interested in learning more about this topic, check out the following question:

Router directives in two places for same purpose

An issue with this method is that these directives become global across all components in your application. Alternatively, you can create a custom decorator to extend component metadata and selectively include these directives where needed.

You could implement it using inheritance, such as an abstract root component.

Here's an example:

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        if (key === 'directives') {
          // merge directives attributes
          let parentDirectives = parentAnnotation[key] || [];
          let currentDirectives = annotation[key] || [];
          currentDirectives.concat(parentDirectives);
        } else {
          annotation[key] = parentAnnotation[key];
        }
      }
    });
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

and here's how you can use it:

@Component({
  directives: [
    ROUTER_DIRECTIVES,
    MyDirective1,
    MyDirective2,
    MyValidator1,
    MyValidator2,
    (...)
  ]
})
export class AbstractComponent {
}

@CustomComponent({
  selector: 'sub',
  template: `
    (...)
  `
})
export class SubComponent extends AbstractComponent {
}

@Component({
  selector: 'app',
  template: `
    <sub></sub>
  `,
  directives [ SubComponent ]
})
export class App {
}

To explore this concept further, refer to the following question:

Extending component decorator with base class decorator

Answer 2

One way to streamline the definition of platform directives is by setting them as global constants:

export const GENERAL_DIRECTIVES: any[] = [
  ROUTER_DIRECTIVES,
  MyDirective1,
  MyDirective2,
  MyValidator1,
  MyValidator2,
  (...)
];

bootstrap(App, [
  provide(PLATFORM_DIRECTIVES, {useValue: [GENERAL_DIRECTIVES], multi: true})
]);

This eliminates the need for importing them repeatedly in your code.

If you're interested in learning more about this topic, check out the following question:

Router directives in two places for same purpose

An issue with this method is that these directives become global across all components in your application. Alternatively, you can create a custom decorator to extend component metadata and selectively include these directives where needed.

You could implement it using inheritance, such as an abstract root component.

Here's an example:

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        if (key === 'directives') {
          // merge directives attributes
          let parentDirectives = parentAnnotation[key] || [];
          let currentDirectives = annotation[key] || [];
          currentDirectives.concat(parentDirectives);
        } else {
          annotation[key] = parentAnnotation[key];
        }
      }
    });
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

and here's how you can use it:

@Component({
  directives: [
    ROUTER_DIRECTIVES,
    MyDirective1,
    MyDirective2,
    MyValidator1,
    MyValidator2,
    (...)
  ]
})
export class AbstractComponent {
}

@CustomComponent({
  selector: 'sub',
  template: `
    (...)
  `
})
export class SubComponent extends AbstractComponent {
}

@Component({
  selector: 'app',
  template: `
    <sub></sub>
  `,
  directives [ SubComponent ]
})
export class App {
}

To explore this concept further, refer to the following question:

Extending component decorator with base class decorator

Answer 3

Answer №2

If you want to globally provide directives and pipes, you can do so by using the following code:

bootstrap(AppComponent, [
    provide(PLATFORM_DIRECTIVES, 
        {useValue: [
            ROUTER_DIRECTIVES, 
            MyDirective1, 
            MyDirective2, 
            MyValidator1, 
            MyValidator2
         ], multi: true}),

    provide(PLATFORM_PIPES, 
         {useValue: [RainbowizePipe], multi:true})

]);

Angular's Dependency Injection automatically flattens the arrays of directives and pipes you pass. This allows for passing nested arrays easily. For example, you can pack the directives of a module into an array and then pass an array containing all the modules' arrays to provide().

Answer 4

If you want to globally provide directives and pipes, you can do so by using the following code:

bootstrap(AppComponent, [
    provide(PLATFORM_DIRECTIVES, 
        {useValue: [
            ROUTER_DIRECTIVES, 
            MyDirective1, 
            MyDirective2, 
            MyValidator1, 
            MyValidator2
         ], multi: true}),

    provide(PLATFORM_PIPES, 
         {useValue: [RainbowizePipe], multi:true})

]);

Angular's Dependency Injection automatically flattens the arrays of directives and pipes you pass. This allows for passing nested arrays easily. For example, you can pack the directives of a module into an array and then pass an array containing all the modules' arrays to provide().

Different methods to efficiently import directives into multiple components without repeating the code

Answer №1

Answer №2

Similar questions

Implementing asynchronous form validation in Angular 2

Assign the initial value to the first parameter of a TypeScript function by referencing the second optional parameter

Meteor's Minimongo does not seamlessly sync up with MongoDB

Angular Boilerplate is experiencing difficulties in properly reading ABP

TypeScript - ensuring strict typing for particular object keys

No such module named PeopleService found in the exports - Ionic

The outcome from using Array.reduce may not always match the expected result

Sorting an array of numbers in TypeScript using the array sort function

Angular protection filter

When using the selector in Angular2, it only displays the message "loading..."

Using Angular to Trigger a Keyboard Shortcut with a Button

What are the benefits of using material-ui@next without the need for

The ESLint tool seems to be struggling to detect the package named "@typescript-eslint/eslint-plugin"

"Transforming a callback function to an asynchronous function results in an error

Combining HTTPHandler Observable with another in HTTPInterceptor (Angular 8)

Behavior of Shadow DOM role when using the <a> element without an href attribute

Concealing input special characters with Angular 8

"Navigate to another screen with the FlatList component upon press, displaying specific

Type of object is unidentified in Vuejs with Typescript error code ts(2571)

Make sure the subset interface is selected from the interface / Choose PickDeep<>?