Merge pull request nativescript-community#1 from elena-p/master

update angular directive name and use it in demo app

Author: farfromrefug

demo-angular/app/components/app.component.html

@@ -1,7 +1,14 @@
 <ActionBar title="NativeScript-Image Angular sample app">
 </ActionBar>
-<GridLayout rows="*, auto, auto">
- <Image #imageView verticalAlignment="center" placeholderImageUri="res://ns_logo" src="https://raw.githubusercontent.com/Akylas/nativescript-image/master/examples-data/breakfast1.jpg"></Image>
- <Button text="Animate to 0" row="1" (tap)="onAnimateToZero($event)"></Button>
- <Button text="Animate to 1" row="2" (tap)="onAnimateToOne($event)"></Button>
+<GridLayout rows="*, auto, auto, auto, auto, auto">
+ <NSImg #imageView
+ verticalAlignment="center"
+ placeholderImageUri="res://ns_logo"
+ src="https://raw.githubusercontent.com/Akylas/nativescript-image/master/examples-data/breakfast1.jpg">
+ </NSImg>
+ <Button text="Set 1" row="1" (tap)="onSeOpacityTo1()"></Button>
+ <Button text="Set 0.5" row="2" (tap)="onSeOpacityTo05()"></Button>
+ <Button text="Set 0.1" row="3" (tap)="onSeOpacityTo01()"></Button>
+ <Button text="Animate to 0.1" row="4" (tap)="onAnimateTo01()"></Button>
+ <Button text="Animate to 1" row="5" (tap)="onAnimateTo1()"></Button>
 </GridLayout>

demo-angular/app/components/app.component.ts

@@ -16,17 +16,29 @@ export class AppComponent implements OnInit {
 
  }
 
- onAnimateToZero(args) {
+ onSeOpacityTo1() {
+ this.imageViewComponent.nativeElement.opacity = 1;
+ }
+
+ onSeOpacityTo01() {
+ this.imageViewComponent.nativeElement.opacity = 0.1;
+ }
+
+ onSeOpacityTo05() {
+ this.imageViewComponent.nativeElement.opacity = 0.5;
+ }
+
+ onAnimateTo01() {
  this.imageViewComponent.nativeElement.animate({
- opacity: 0,
+ opacity: 0.1,
  duration: 500
  });
  }
 
- onAnimateToOne(args) {
+ onAnimateTo1() {
  this.imageViewComponent.nativeElement.animate({
  opacity: 1,
  duration: 500
  });
  }
-}
+}

demo-angular/package.json

@@ -8,7 +8,10 @@
  "nativescript": {
  "id": "org.nativescript.imagedemoangular",
  "tns-android": {
- "version": "5.0.0"
+ "version": "5.1.0"
+ },
+ "tns-ios": {
+ "version": "5.1.0"
  }
  },
  "dependencies": {

demo-angular/tsconfig.json

@@ -7,7 +7,11 @@
  "noLib": false,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
- "lib": ["es6", "dom", "es2015.iterable"],
+ "lib": [
+ "es6",
+ "dom",
+ "es2015.iterable"
+ ],
  "pretty": true,
  "allowUnreachableCode": false,
  "allowUnusedLabels": false,
@@ -19,11 +23,22 @@
  "noFallthroughCasesInSwitch": true,
  "baseUrl": ".",
  "paths": {
- "~/*": ["app/*"],
- "*": ["./node_modules/tns-core-modules/*", "./node_modules/*"]
+ "~/*": [
+ "app/*"
+ ],
+ "*": [
+ "./node_modules/tns-core-modules/*",
+ "./node_modules/*"
+ ]
  }
  },
- "include": ["app/**/*", "references.d.ts"],
- "exclude": ["node_modules", "platforms"],
+ "include": [
+ "app/**/*",
+ "references.d.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "platforms"
+ ],
  "compileOnSave": false
-}
+}

plugin/image-common.d.ts

@@ -13,7 +13,7 @@ export declare enum ScaleType {
  FitEnd = "fitEnd",
  FitStart = "fitStart",
  FitXY = "fitXY",
- FocusCrop = "focusCrop",
+ FocusCrop = "focusCrop"
 }
 export interface AnimatedImage {
  start(): void;

src/angular/nativescript-image-directives.ts

@@ -1,7 +1,7 @@
 import { Directive } from '@angular/core';
 
 @Directive({
- selector: 'Img'
+ selector: 'NSImg'
 })
 export class ImgDirective {
  constructor() {}

src/angular/nativescript-image.module.ts

@@ -10,4 +10,4 @@ import { Img } from '../image';
 })
 export class TNSImageModule {}
 
-registerElement('Img', () => Img);
+registerElement('NSImg', () => Img);