diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts index 927a3ca38..27ffb2298 100644 --- a/nativescript-angular/common/detached-loader.ts +++ b/nativescript-angular/common/detached-loader.ts @@ -19,7 +19,7 @@ function log(message: string) { selector: "DetachedContainer", template: `` }) -export class DetachedLoader { +export class DetachedLoader { // tslint:disable-line:component-class-suffix constructor( private resolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef, @@ -31,7 +31,7 @@ export class DetachedLoader { const componentRef = this.containerRef.createComponent( factory, this.containerRef.length, this.containerRef.parentInjector); - // Component is created, buit may not be checked if we are loading + // Component is created, buit may not be checked if we are loading // inside component with OnPush CD strategy. Mark us for check to be sure CD will reach us. // We are inside a promise here so no need for setTimeout - CD should trigger // after the promise. diff --git a/nativescript-angular/common/utils.ts b/nativescript-angular/common/utils.ts index d357145a5..9e905b5f7 100644 --- a/nativescript-angular/common/utils.ts +++ b/nativescript-angular/common/utils.ts @@ -1,4 +1,4 @@ -import {isBlank, isNumber} from "../lang-facade"; +import { isBlank, isNumber } from "../lang-facade"; export function convertToInt(value): number { let normalizedValue; diff --git a/nativescript-angular/directives/action-bar.ts b/nativescript-angular/directives/action-bar.ts index c99093f41..9901ac2fe 100644 --- a/nativescript-angular/directives/action-bar.ts +++ b/nativescript-angular/directives/action-bar.ts @@ -1,4 +1,4 @@ -import { Directive, Component, ElementRef, Optional } from "@angular/core"; +import { Directive, Component, ElementRef, Optional, OnDestroy } from "@angular/core"; import { ActionItem, ActionBar, NavigationButton } from "ui/action-bar"; import { isBlank } from "../lang-facade"; import { Page } from "ui/page"; @@ -63,7 +63,7 @@ export class ActionBarComponent { selector: "ActionBarExtension", template: "" }) -export class ActionBarScope { +export class ActionBarScope { // tslint:disable-line:component-class-suffix constructor(private page: Page) { } @@ -88,9 +88,9 @@ export class ActionBarScope { } @Directive({ - selector: "ActionItem" + selector: "ActionItem" // tslint:disable-line:directive-selector }) -export class ActionItemDirective { +export class ActionItemDirective implements OnDestroy { constructor(public element: ElementRef, @Optional() private ownerScope: ActionBarScope) { if (this.ownerScope) { this.ownerScope.onActionInit(this); @@ -105,9 +105,9 @@ export class ActionItemDirective { } @Directive({ - selector: "NavigationButton" + selector: "NavigationButton" // tslint:disable-line:directive-selector }) -export class NavigationButtonDirective { +export class NavigationButtonDirective implements OnDestroy { constructor(public element: ElementRef, @Optional() private ownerScope: ActionBarScope) { if (this.ownerScope) { this.ownerScope.onNavButtonInit(this); diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index d29cc1f55..a8b1850db 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -91,9 +91,9 @@ export class ModalDialogService { @Directive({ - selector: "[modal-dialog-host]" + selector: "[modal-dialog-host]" // tslint:disable-line:directive-selector }) -export class ModalDialogHost { +export class ModalDialogHost { // tslint:disable-line:directive-class-suffix constructor() { throw new Error("ModalDialogHost is deprecated. Call ModalDialogService.showModal() " + "by passing ViewContainerRef in the options instead."); diff --git a/nativescript-angular/directives/list-view-comp.ts b/nativescript-angular/directives/list-view-comp.ts index 0b9613c1c..aa0d6fa40 100644 --- a/nativescript-angular/directives/list-view-comp.ts +++ b/nativescript-angular/directives/list-view-comp.ts @@ -53,7 +53,6 @@ export interface SetupItemViewArgs { `, - inputs: ["items"], changeDetection: ChangeDetectionStrategy.OnPush }) export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit { @@ -72,6 +71,11 @@ export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit { @ContentChild(TemplateRef) itemTemplate: TemplateRef; + @Input() + get items() { + return this._items; + } + set items(value: any) { this._items = value; let needDiffer = true; diff --git a/nativescript-angular/directives/platform-filters.ts b/nativescript-angular/directives/platform-filters.ts index 47fcb5c8d..ba82f170f 100644 --- a/nativescript-angular/directives/platform-filters.ts +++ b/nativescript-angular/directives/platform-filters.ts @@ -1,6 +1,6 @@ -import {Component, Inject} from "@angular/core"; -import {Device, platformNames} from "platform"; -import {DEVICE} from "../platform-providers"; +import { Component, Inject } from "@angular/core"; +import { Device, platformNames } from "platform"; +import { DEVICE } from "../platform-providers"; @Component({ selector: "android", diff --git a/nativescript-angular/directives/tab-view.ts b/nativescript-angular/directives/tab-view.ts index 7b60330b9..13b7fcdc6 100644 --- a/nativescript-angular/directives/tab-view.ts +++ b/nativescript-angular/directives/tab-view.ts @@ -1,18 +1,18 @@ -import { ElementRef, Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core"; +import { ElementRef, Directive, Input, TemplateRef, ViewContainerRef, OnInit, AfterViewInit } from "@angular/core"; import { TabView, TabViewItem } from "ui/tab-view"; import * as utils from "../common/utils"; import { rendererLog } from "../trace"; import { isBlank } from "../lang-facade"; @Directive({ - selector: "TabView", - inputs: ["selectedIndex"] + selector: "TabView", // tslint:disable-line:directive-selector }) -export class TabViewDirective { +export class TabViewDirective implements AfterViewInit { public tabView: TabView; private _selectedIndex: number; private viewInitialized: boolean; + @Input() get selectedIndex(): number { return this._selectedIndex; } @@ -38,10 +38,9 @@ export class TabViewDirective { } @Directive({ - selector: "[tabItem]", - inputs: ["title", "iconSource"] + selector: "[tabItem]" // tslint:disable-line:directive-selector }) -export class TabViewItemDirective { +export class TabViewItemDirective implements OnInit { private item: TabViewItem; private _title: string; private _iconSource: string; @@ -53,7 +52,12 @@ export class TabViewItemDirective { ) { } - @Input("tabItem") config: any; + @Input("tabItem") config: any; // tslint:disable-line:no-input-rename + + @Input() + get title() { + return this._title; + } set title(value: string) { if (this._title !== value) { @@ -63,6 +67,11 @@ export class TabViewItemDirective { } } + @Input() + get iconSource() { + return this._iconSource; + } + set iconSource(value: string) { if (this._iconSource !== value) { this._iconSource = value; diff --git a/nativescript-angular/file-system/ns-file-system.ts b/nativescript-angular/file-system/ns-file-system.ts index f70381494..6a82e499a 100644 --- a/nativescript-angular/file-system/ns-file-system.ts +++ b/nativescript-angular/file-system/ns-file-system.ts @@ -1,5 +1,5 @@ -import {Injectable} from "@angular/core"; -import {knownFolders, Folder} from "file-system"; +import { Injectable } from "@angular/core"; +import { knownFolders, Folder } from "file-system"; // Allows greater flexibility with `file-system` and Angular // Also provides a way for `file-system` to be mocked for testing diff --git a/nativescript-angular/http/ns-http.ts b/nativescript-angular/http/ns-http.ts index 8e9b8e1fa..70c9d3de4 100644 --- a/nativescript-angular/http/ns-http.ts +++ b/nativescript-angular/http/ns-http.ts @@ -1,4 +1,4 @@ -import {Injectable} from "@angular/core"; +import { Injectable } from "@angular/core"; import { Http, ConnectionBackend, @@ -7,9 +7,9 @@ import { ResponseType, Response } from "@angular/http"; -import {Observable} from "rxjs/Observable"; +import { Observable } from "rxjs/Observable"; import "rxjs/add/observable/fromPromise"; -import {NSFileSystem} from "../file-system/ns-file-system"; +import { NSFileSystem } from "../file-system/ns-file-system"; export class NSXSRFStrategy { public configureRequest(_req: any) { diff --git a/nativescript-angular/package.json b/nativescript-angular/package.json index 926de7265..31cdcb8ef 100644 --- a/nativescript-angular/package.json +++ b/nativescript-angular/package.json @@ -14,11 +14,11 @@ "url": "https://github.com/NativeScript/nativescript-angular.git" }, "scripts": { - "tslint": "tslint --project tsconfig.json --config tslint.json", - "postinstall": "node postinstall.js", - "ngc": "ngc -p tsconfig.json", - "tsc": "tsc -p tsconfig.json", - "prepublish": "npm run tsc && npm run ngc" + "tslint": "tslint --project tsconfig.json --config tslint.json", + "postinstall": "node postinstall.js", + "ngc": "ngc -p tsconfig.json", + "tsc": "tsc -p tsconfig.json", + "prepublish": "npm run tsc && npm run ngc" }, "dependencies": { "nativescript-intl": "~0.0.4", @@ -38,11 +38,12 @@ "url": "0.10.3" }, "devDependencies": { + "@angular/compiler-cli": "~2.2.1", + "codelyzer": "^2.0.0-beta.1", "tns-core-modules": ">=2.4.0 || >=2.4.0-2016", - "zone.js": "^0.6.21", - "typescript": "^2.0.2", "tslint": "~4.0.1", - "@angular/compiler-cli": "~2.2.1" + "typescript": "^2.0.2", + "zone.js": "^0.6.21" }, "nativescript": {} } diff --git a/nativescript-angular/private_import_core.ts b/nativescript-angular/private_import_core.ts index b629c7c8c..58e80a668 100644 --- a/nativescript-angular/private_import_core.ts +++ b/nativescript-angular/private_import_core.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {__core_private__ as r} from "@angular/core"; +import { __core_private__ as r } from "@angular/core"; export type RenderDebugInfo = typeof r._RenderDebugInfo; export let RenderDebugInfo: typeof r.RenderDebugInfo = r.RenderDebugInfo; diff --git a/nativescript-angular/private_import_platform-browser.ts b/nativescript-angular/private_import_platform-browser.ts index 946ea58c0..a9ab67f25 100644 --- a/nativescript-angular/private_import_platform-browser.ts +++ b/nativescript-angular/private_import_platform-browser.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {__platform_browser_private__ as _} from "@angular/platform-browser"; +import { __platform_browser_private__ as _ } from "@angular/platform-browser"; export type DomAdapter = typeof _._DomAdapter; export let DomAdapter: typeof _.DomAdapter = _.DomAdapter; diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index 98403e836..9ea14b074 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -4,15 +4,15 @@ import { } from "@angular/core"; import { AnimationPlayer } from "@angular/core"; import { AnimationStyles, AnimationKeyframe } from "./private_import_core"; -import {APP_ROOT_VIEW, DEVICE} from "./platform-providers"; -import {isBlank} from "./lang-facade"; -import {View} from "ui/core/view"; +import { APP_ROOT_VIEW, DEVICE } from "./platform-providers"; +import { isBlank } from "./lang-facade"; +import { View } from "ui/core/view"; import * as application from "application"; -import {topmost} from "ui/frame"; -import {Page} from "ui/page"; -import {ViewUtil, NgView} from "./view-util"; -import {rendererLog as traceLog} from "./trace"; -import {escapeRegexSymbols} from "utils/utils"; +import { topmost } from "ui/frame"; +import { Page } from "ui/page"; +import { ViewUtil, NgView } from "./view-util"; +import { rendererLog as traceLog } from "./trace"; +import { escapeRegexSymbols } from "utils/utils"; import { Device } from "platform"; import * as nsAnimationDriver from "./animation-driver"; diff --git a/nativescript-angular/resource-loader.ts b/nativescript-angular/resource-loader.ts index 73b517245..e070aedcf 100644 --- a/nativescript-angular/resource-loader.ts +++ b/nativescript-angular/resource-loader.ts @@ -1,5 +1,5 @@ -import {path, knownFolders, File} from "file-system"; -import {ResourceLoader} from "@angular/compiler"; +import { path, knownFolders, File } from "file-system"; +import { ResourceLoader } from "@angular/compiler"; export class FileSystemResourceLoader extends ResourceLoader { resolve(url: string, baseUrl: string): string { diff --git a/nativescript-angular/router/ns-platform-location.ts b/nativescript-angular/router/ns-platform-location.ts index f4cc9513b..b941b13fe 100644 --- a/nativescript-angular/router/ns-platform-location.ts +++ b/nativescript-angular/router/ns-platform-location.ts @@ -1,7 +1,7 @@ -import {NSLocationStrategy} from "./ns-location-strategy"; -import {PlatformLocation, LocationChangeListener} from "@angular/common"; -import {Injectable} from "@angular/core"; -import {routerLog} from "../trace"; +import { NSLocationStrategy } from "./ns-location-strategy"; +import { PlatformLocation, LocationChangeListener } from "@angular/common"; +import { Injectable } from "@angular/core"; +import { routerLog } from "../trace"; @Injectable() diff --git a/nativescript-angular/router/ns-router-link-active.ts b/nativescript-angular/router/ns-router-link-active.ts index 8d434805b..b47f4b9de 100644 --- a/nativescript-angular/router/ns-router-link-active.ts +++ b/nativescript-angular/router/ns-router-link-active.ts @@ -3,12 +3,12 @@ import { ElementRef, Input, OnChanges, OnDestroy, QueryList, Renderer } from "@angular/core"; -import {Subscription} from "rxjs/Subscription"; +import { Subscription } from "rxjs/Subscription"; -import {NavigationEnd, Router, UrlTree} from "@angular/router"; -import {containsTree} from "../router-url-tree"; +import { NavigationEnd, Router, UrlTree } from "@angular/router"; +import { containsTree } from "../router-url-tree"; -import {NSRouterLink} from "./ns-router-link"; +import { NSRouterLink } from "./ns-router-link"; /** @@ -54,7 +54,7 @@ import {NSRouterLink} from "./ns-router-link"; * @stable */ @Directive({ selector: "[nsRouterLinkActive]" }) -export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentInit { +export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentInit { // tslint:disable-line:max-line-length directive-class-suffix @ContentChildren(NSRouterLink) links: QueryList; private classes: string[] = []; diff --git a/nativescript-angular/router/ns-router-link.ts b/nativescript-angular/router/ns-router-link.ts index f986d2ddd..3979922d4 100644 --- a/nativescript-angular/router/ns-router-link.ts +++ b/nativescript-angular/router/ns-router-link.ts @@ -1,12 +1,12 @@ -import {Directive, HostListener, Input, Optional, OnChanges} from "@angular/core"; -import {NavigationExtras} from "@angular/router"; -import {ActivatedRoute, Router, UrlTree} from "@angular/router"; -import {routerLog} from "../trace"; -import {PageRoute} from "./page-router-outlet"; -import {RouterExtensions} from "./router-extensions"; -import {NavigationOptions} from "./ns-location-strategy"; -import {NavigationTransition} from "ui/frame"; -import {isString} from "utils/types"; +import { Directive, HostListener, Input, Optional, OnChanges } from "@angular/core"; +import { NavigationExtras } from "@angular/router"; +import { ActivatedRoute, Router, UrlTree } from "@angular/router"; +import { routerLog } from "../trace"; +import { PageRoute } from "./page-router-outlet"; +import { RouterExtensions } from "./router-extensions"; +import { NavigationOptions } from "./ns-location-strategy"; +import { NavigationTransition } from "ui/frame"; +import { isString } from "utils/types"; /** * The nsRouterLink directive lets you link to specific parts of your app. @@ -33,7 +33,7 @@ import {isString} from "utils/types"; * And if the segment begins with `../`, the router will go up one level. */ @Directive({ selector: "[nsRouterLink]" }) -export class NSRouterLink implements OnChanges { +export class NSRouterLink implements OnChanges { // tslint:disable-line:directive-class-suffix private commands: any[] = []; @Input() target: string; @Input() queryParams: { [k: string]: any }; diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index 0cce290d5..c250506ed 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -56,8 +56,8 @@ class RefCache { } } -@Directive({ selector: "page-router-outlet" }) -export class PageRouterOutlet { +@Directive({ selector: "page-router-outlet" }) // tslint:disable-line:directive-selector +export class PageRouterOutlet { // tslint:disable-line:directive-class-suffix private viewUtil: ViewUtil; private refCache: RefCache = new RefCache(); private isInitialPage: boolean = true; diff --git a/nativescript-angular/router/router-extensions.ts b/nativescript-angular/router/router-extensions.ts index 6719571f1..62c7a3583 100644 --- a/nativescript-angular/router/router-extensions.ts +++ b/nativescript-angular/router/router-extensions.ts @@ -1,7 +1,7 @@ -import {Injectable} from "@angular/core"; -import {Router, UrlTree, NavigationExtras} from "@angular/router"; -import {NSLocationStrategy, NavigationOptions} from "./ns-location-strategy"; -import {Frame} from "ui/frame"; +import { Injectable } from "@angular/core"; +import { Router, UrlTree, NavigationExtras } from "@angular/router"; +import { NSLocationStrategy, NavigationOptions } from "./ns-location-strategy"; +import { Frame } from "ui/frame"; export type ExtendedNavigationExtras = NavigationExtras & NavigationOptions; diff --git a/nativescript-angular/trace.ts b/nativescript-angular/trace.ts index 07bf6d120..358d11a3d 100644 --- a/nativescript-angular/trace.ts +++ b/nativescript-angular/trace.ts @@ -1,4 +1,4 @@ -import {write, categories, messageType} from "trace"; +import { write, categories, messageType } from "trace"; export const rendererTraceCategory = "ns-renderer"; export const routerTraceCategory = "ns-router"; diff --git a/nativescript-angular/tslint.json b/nativescript-angular/tslint.json index e2b7eca87..90e38b36c 100644 --- a/nativescript-angular/tslint.json +++ b/nativescript-angular/tslint.json @@ -1,5 +1,24 @@ { - "rules": { + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules":{ + "directive-selector": [true, "attribute", "ns", "camelCase"], + "component-selector": [true, "element", "", "camelCase"], + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": true, + "no-input-rename": true, + "no-output-rename": true, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true, + "pipe-naming": [true, "camelCase", "ns"], + "component-class-suffix": true, + "directive-class-suffix": true, + "import-destructuring-spacing": true, + "templates-use-public": true, + "no-access-missing-member": true, + "invoke-injectable": true, "member-access": false, "no-any": false, "no-inferrable-types": false, diff --git a/nativescript-angular/value-accessors/base-value-accessor.ts b/nativescript-angular/value-accessors/base-value-accessor.ts index 844415b81..06df0584c 100644 --- a/nativescript-angular/value-accessors/base-value-accessor.ts +++ b/nativescript-angular/value-accessors/base-value-accessor.ts @@ -1,4 +1,4 @@ -import {ControlValueAccessor} from "@angular/forms"; +import { ControlValueAccessor } from "@angular/forms"; export class BaseValueAccessor implements ControlValueAccessor { constructor(public view: TView) { } @@ -23,6 +23,6 @@ export class BaseValueAccessor implements ControlValueAccessor { } registerOnTouched(_: () => void): void { - // + // } } diff --git a/nativescript-angular/value-accessors/checked-value-accessor.ts b/nativescript-angular/value-accessors/checked-value-accessor.ts index 8d7ac1b01..71214e919 100644 --- a/nativescript-angular/value-accessors/checked-value-accessor.ts +++ b/nativescript-angular/value-accessors/checked-value-accessor.ts @@ -1,8 +1,8 @@ -import {Directive, ElementRef, forwardRef } from "@angular/core"; -import {NG_VALUE_ACCESSOR} from "@angular/forms"; -import {isBlank} from "../lang-facade"; -import {BaseValueAccessor} from "./base-value-accessor"; -import {Switch} from "ui/switch"; +import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { isBlank } from "../lang-facade"; +import { BaseValueAccessor } from "./base-value-accessor"; +import { Switch } from "ui/switch"; const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckedValueAccessor), multi: true}; @@ -17,11 +17,15 @@ const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - selector: "Switch[ngModel], switch[ngModel]", - host: { "(checkedChange)": "onChange($event.value)" }, + selector: "Switch[ngModel], switch[ngModel]", // tslint:disable-line:directive-selector providers: [CHECKED_VALUE_ACCESSOR] }) -export class CheckedValueAccessor extends BaseValueAccessor { +export class CheckedValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix + @HostListener("checkedChange", ["$event"]) + checkedChangeListener(event: any) { + this.onChange(event.value); + } + onTouched = () => { }; constructor(elementRef: ElementRef) { diff --git a/nativescript-angular/value-accessors/date-value-accessor.ts b/nativescript-angular/value-accessors/date-value-accessor.ts index b37ac3481..11990c6dd 100644 --- a/nativescript-angular/value-accessors/date-value-accessor.ts +++ b/nativescript-angular/value-accessors/date-value-accessor.ts @@ -1,8 +1,8 @@ -import {Directive, ElementRef, forwardRef } from "@angular/core"; -import {NG_VALUE_ACCESSOR} from "@angular/forms"; -import {isBlank, isDate} from "../lang-facade"; -import {BaseValueAccessor} from "./base-value-accessor"; -import {DatePicker} from "ui/date-picker"; +import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { isBlank, isDate } from "../lang-facade"; +import { BaseValueAccessor } from "./base-value-accessor"; +import { DatePicker } from "ui/date-picker"; const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateValueAccessor), multi: true}; @@ -17,11 +17,15 @@ const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - selector: "DatePicker[ngModel], datePicker[ngModel], date-picker[ngModel]", - host: { "(dateChange)": "onChange($event.value)" }, + selector: "DatePicker[ngModel], datePicker[ngModel], date-picker[ngModel]", // tslint:disable-line:max-line-length directive-selector providers: [DATE_VALUE_ACCESSOR] }) -export class DateValueAccessor extends BaseValueAccessor { +export class DateValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix + @HostListener("dateChange", ["$event"]) + dateChangeListener(event: any) { + this.onChange(event.value); + } + onTouched = () => { }; constructor(elementRef: ElementRef) { diff --git a/nativescript-angular/value-accessors/number-value-accessor.ts b/nativescript-angular/value-accessors/number-value-accessor.ts index 10d29e720..3a32cf98f 100644 --- a/nativescript-angular/value-accessors/number-value-accessor.ts +++ b/nativescript-angular/value-accessors/number-value-accessor.ts @@ -1,8 +1,8 @@ -import {Directive, ElementRef, forwardRef } from "@angular/core"; -import {NG_VALUE_ACCESSOR} from "@angular/forms"; -import {isBlank, isNumber} from "../lang-facade"; -import {BaseValueAccessor} from "./base-value-accessor"; -import {Slider} from "ui/slider"; +import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { isBlank, isNumber } from "../lang-facade"; +import { BaseValueAccessor } from "./base-value-accessor"; +import { Slider } from "ui/slider"; const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumberValueAccessor), multi: true}; @@ -17,11 +17,15 @@ const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - selector: "Slider[ngModel], slider[ngModel]", - host: { "(valueChange)": "onChange($event.value)" }, + selector: "Slider[ngModel], slider[ngModel]", // tslint:disable-line:directive-selector providers: [NUMBER_VALUE_ACCESSOR] }) -export class NumberValueAccessor extends BaseValueAccessor { +export class NumberValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix + @HostListener("valueChange", ["$event"]) + valueChangeListener(event: any) { + this.onChange(event.value); + } + onTouched = () => { }; constructor(elementRef: ElementRef) { diff --git a/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts b/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts index 6f97dc62a..0987af402 100644 --- a/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts +++ b/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts @@ -1,7 +1,7 @@ -import {Directive, ElementRef, forwardRef } from "@angular/core"; -import {NG_VALUE_ACCESSOR} from "@angular/forms"; -import {BaseValueAccessor} from "./base-value-accessor"; -import {View} from "ui/core/view"; +import { Directive, ElementRef, forwardRef, AfterViewInit, HostListener } from "@angular/core"; +import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { BaseValueAccessor } from "./base-value-accessor"; +import { View } from "ui/core/view"; import * as utils from "../common/utils"; const SELECTED_INDEX_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, @@ -19,12 +19,15 @@ export type SelectableView = {selectedIndex: number} & View; * ``` */ @Directive({ - // tslint:disable:max-line-length - selector: "SegmentedBar[ngModel], segmentedBar[ngModel], segmented-bar[ngModel], ListPicker[ngModel], listPicker[ngModel], list-picker[ngModel], TabView[ngModel], tabView[ngModel], tab-view[ngModel]", - host: { "(selectedIndexChange)": "onChange($event.value)" }, + selector: "SegmentedBar[ngModel], segmentedBar[ngModel], segmented-bar[ngModel], ListPicker[ngModel], listPicker[ngModel], list-picker[ngModel], TabView[ngModel], tabView[ngModel], tab-view[ngModel]", // tslint:disable-line:max-line-length directive-selector providers: [SELECTED_INDEX_VALUE_ACCESSOR] }) -export class SelectedIndexValueAccessor extends BaseValueAccessor { +export class SelectedIndexValueAccessor extends BaseValueAccessor implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix + @HostListener("selectedIndexChange", ["$event"]) + selectedIndexChangeListener(event: any) { + this.onChange(event.value); + } + onTouched = () => { }; constructor(elementRef: ElementRef) { diff --git a/nativescript-angular/value-accessors/text-value-accessor.ts b/nativescript-angular/value-accessors/text-value-accessor.ts index e1c5bdfc7..1dc699f16 100644 --- a/nativescript-angular/value-accessors/text-value-accessor.ts +++ b/nativescript-angular/value-accessors/text-value-accessor.ts @@ -1,8 +1,8 @@ -import {Directive, ElementRef, forwardRef } from "@angular/core"; -import {NG_VALUE_ACCESSOR} from "@angular/forms"; -import {isBlank} from "../lang-facade"; -import {BaseValueAccessor} from "./base-value-accessor"; -import {View} from "ui/core/view"; +import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { isBlank } from "../lang-facade"; +import { BaseValueAccessor } from "./base-value-accessor"; +import { View } from "ui/core/view"; const TEXT_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextValueAccessor), multi: true}; @@ -19,12 +19,15 @@ export type TextView = {text: string} & View; * ``` */ @Directive({ - // tslint:disable:max-line-length - selector: "TextField[ngModel], textField[ngModel], text-field[ngModel], TextView[ngModel], textView[ngModel], text-view[ngModel], SearchBar[ngModel], search-bar[ngModel], searchBar[ngModel]", - host: { "(textChange)": "onChange($event.value)" }, + selector: "TextField[ngModel], textField[ngModel], text-field[ngModel], TextView[ngModel], textView[ngModel], text-view[ngModel], SearchBar[ngModel], search-bar[ngModel], searchBar[ngModel]", // tslint:disable-line:max-line-length directive-selector providers: [TEXT_VALUE_ACCESSOR] }) -export class TextValueAccessor extends BaseValueAccessor { +export class TextValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix + @HostListener("textChange", ["$event"]) + textChangeListener(event: any) { + this.onChange(event.value); + } + onTouched = () => { }; constructor(elementRef: ElementRef) { diff --git a/nativescript-angular/value-accessors/time-value-accessor.ts b/nativescript-angular/value-accessors/time-value-accessor.ts index c66f46a9d..4354578f9 100644 --- a/nativescript-angular/value-accessors/time-value-accessor.ts +++ b/nativescript-angular/value-accessors/time-value-accessor.ts @@ -1,8 +1,8 @@ -import {Directive, ElementRef, forwardRef } from "@angular/core"; -import {NG_VALUE_ACCESSOR} from "@angular/forms"; -import {isBlank, isDate} from "../lang-facade"; -import {BaseValueAccessor} from "./base-value-accessor"; -import {TimePicker} from "ui/time-picker"; +import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { isBlank, isDate } from "../lang-facade"; +import { BaseValueAccessor } from "./base-value-accessor"; +import { TimePicker } from "ui/time-picker"; const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TimeValueAccessor), multi: true}; @@ -17,11 +17,15 @@ const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - selector: "TimePicker[ngModel], timePicker[ngModel], time-picker[ngModel]", - host: { "(timeChange)": "onChange($event.value)" }, + selector: "TimePicker[ngModel], timePicker[ngModel], time-picker[ngModel]", // tslint:disable-line:max-line-length directive-selector providers: [TIME_VALUE_ACCESSOR] }) -export class TimeValueAccessor extends BaseValueAccessor { +export class TimeValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix + @HostListener("timeChange", ["$event"]) + timeChangeListener(event: any) { + this.onChange(event.value); + } + onTouched = () => { }; constructor(elementRef: ElementRef) {