1 year ago

#196189

test-img

Jeroen De Groote

Combine/re-use Stencil Decorators

For some while now I am trying to figure out how to re-use Stencil Decorators. In our company we have a whole bunch of components that do all use Translations. A user of our web component should be able to pass a translations object as an attribute. We receive that attribute by using the @Prop decorator:

@Component({
   tag: "component",
})
export class Component {
   private translationService: TranslationService;

   @Prop() public translations: PersonaListTranslations;

   @Watch("translations")
   watchTranslationsHandler(newTranslations: PersonaListTranslations) {
      this.translationService.updateTranslations(newTranslations);
   }

   public render() {
      return (...)
   }
}

As mentionned we have a rather big list of components that need exactly the same code over and over again: translationService, @Prop and @Watch for that prop.

Is there a way to gather that code, put it somewhere else and re-use the same code in all the components?

Thanks in advance!

typescript

stenciljs

typescript-decorator

stencil-component

stencils

0 Answers

Your Answer

Accepted video resources