How to extend angular @input decorator?

1.5k Views Asked by At

I'm trying to write custom property decorator for extending skills of angular @Input decorator.

My goal is to get Localizable property with existing property selector.

./decorators/my-decorators.ts

import {Input} from '@angular/core';
export interface InputDefinition {localizable: boolean; selector: string; }
export function MyInput(inputDefinition: InputDefinition) {
    const ngInput = Input(inputDefinition.selector);
    return function (target: any, key: string) {
        if (inputDefinition.localizable === true) {
            console.log(`loclizable input ${inputDefinition.selector}`);
            // implement localization for property.
        }
      ngInput(target, key);
    };
}

./my-component/mycomponent.ts

import { Component, Input } from '@angular/core';
import { MyInput } from '../decorators/my-decorators';

@Component({
  selector: 'my-component',
  template: `<h1>{{myInput}}</h1>`
})
export class MyComponent {
  //define input property with custom decorator 
  @MyInput({selector: 'my-input', localizable: false})
  myInput = 'input default value';
}

./app.component.html

<div style="text-align:center">
  <my-component my-input="bound value"></my-component>
</div>

ng serve enter image description here

seems to work great but when I run it in prod mode..

--ng serve --prod enter image description here

has no any build error or runtime error but property binding not working in prod build.

All kinds of suggestions will help.

thanks in advance

ng -version


Angular CLI: 6.2.4
Node: 8.11.1
OS: win32 x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, elements
... forms, http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.4
@angular-devkit/build-angular     0.8.4
@angular-devkit/build-optimizer   0.8.4
@angular-devkit/build-webpack     0.8.4
@angular-devkit/core              0.8.4
@angular-devkit/schematics        0.8.4
@angular/cli                      6.2.4
@ngtools/webpack                  6.2.4
@schematics/angular               0.8.4
@schematics/update                0.8.4
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.20.2
0

There are 0 best solutions below