@CustomComponent decorator in Angular 8+

I need to implement a custom decorator in angular 8+ extended from @Component. like you solved in this article http://bit.ly/2VkQ3kE with Reflection. Now Angular not used Reflection API, How do you recommend aboard this problem?

1 Like

Welcome Carlos :raised_hands:

Angular uses two JavaScript capabilities that are currently being standardized — decorators and metadata reflection API to allow declarative components definition. Currently they are not supported by the JS but both are on their track to become available in our browsers very soon.

Silly framework and library authors thinking they can influence the web. Reflection didn’t happen, decorators are being reworked again, observables aren’t happening either, TypeScript is starting to diverge from ECMAScript. What a nerve-racking time to use Angular :cold_face:

did you try to look under the hood? also, I’m wondering, why do you want to use this custom decorator?

Thanks guys, for the replies. @LayZee

Yes, i looked under the hood, but still i could not make a custom decorator.


i couldn’t call the makeDecorator function works from a @CustomComponentDecorator. I think is related with the angular compiler and that It’s no part of the public API.

For now i work around using two decorator Ex.

@CustomDecoratorExtendComponentDecorator({ metadata: forProjectBoilerplateApptLogic})
@Component({ ... })
 ...

First goal is create a decorator with boilerplate logic to extended parent a components, we have a loot of boiler plate code in our application Ex.

        @CustomComponent({ componentMetadata: {}, customComponentMetadata: {} })
        export class specificSearchComponent extend searchComponent {
          constructor(baseService: BaseService) {
            super(baseService)
          }
        }

        @Component({...})
        export class searchComponent extend baseComponent { 
               constructor(protected baseService: BaseService)
        }

The custom decorator add to the component, the implementation of properties, states, event, common methods, etc… of searchComponent and baseComponent.

Second goal is inject members using metadata providers or using Reflect data of parent clases, without declare in the constructor of the component, but yes DI in the parent component or forwardRef instance of the component or @ViewChild/@ContentChild of parent components.

third goal make more readable using only one decorator not several ones.

I hope think could help, to understand better what we like to achive…

Thanks

:slight_smile: thanks @LayZee … I really happy to start to do big thing together with the community…

You should take a look at component features

Great, work @LayZee

Works fine and this let us advance.

I have some question about your code:

Why it’s necessary a Promise?

There are other questions, but i will open later with specific use case separately.

1 Like

I think I needed to prevent the Angular AOT compiler from evaluating it at compile time. The metadata property needs to be applied after AOT compilation, or Angular will remove it when applying the Component decorator metadata.

1 Like

Awsome! :cowboy_hat_face:

@cmantilla it’d be great if you described your case and solution in an article, we could them publish it on indepth. What do you think?

1 Like

Yes will be great!, there is a place write the article draft?

Just use a google doc and send me the link to max@indepth.dev. Looking forward!

1 Like