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>
seems to work great but when I run it in prod mode..
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