Resolve missing "className" property of Angular component (#29)

* chore: update reactive forms example with conditional styling

* fix: add component wide 'className' proeprty that is exposing the `nativeElement` property #27

Author: Vladimir Amiorkov

demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css

@@ -39,6 +39,10 @@ PickerPage ActionBar {
     color: white;
 }
 
+.label-bold {
+    font-weight: bold;
+}
+
 .field-name-label {
     font-size: 20;
     font-weight: bold;
@@ -52,6 +56,12 @@ PickerPage ActionBar {
     margin: 20;
 }
 
-.green-label {
+.invalid-label {
+    color: red;
+    font-size: 20;
+}
+
+.valid-label {
     color: green;
+    font-size: 20;
 }

demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html

@@ -14,9 +14,12 @@
         </ng-template>
     </PickerField>
 
-    <GridLayout row="1" col="0" colSpan="2" rows="auto, auto, auto" backgroundColor="white">
+    <StackLayout row="1" col="0" colSpan="2" backgroundColor="white">
         <Button class="submit-button" text="Submit form" (tap)="onSubmit()"></Button>
-        <Label class="centered-label" row="1" text="Picker css classes:"></Label>
-        <Label class="centered-label green-label" row="2" [text]="pickerClassName"></Label>
-    </GridLayout>
+        <Label class="centered-label label-bold" text="Picker.className:"></Label>
+        <Label class="centered-label" [text]="picker.className"></Label>
+        <Label class="centered-label label-bold" text="Picker.nativeElement.className:"></Label>
+        <Label class="centered-label" [text]="picker.nativeElement.className"></Label>
+        <Label [class]="picker.className.includes('ng-invalid') ? 'centered-label invalid-label' : 'centered-label valid-label'" text="Form status !!!"></Label>
+    </StackLayout>
 </GridLayout>>

demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.ts

@@ -1,17 +1,18 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, AfterViewInit, ViewChild } from "@angular/core";
 import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms";
 import { RouterExtensions } from "nativescript-angular/router";
 import { ObservableArray } from "tns-core-modules/data/observable-array/observable-array";
 import { PickerFieldComponent } from "nativescript-picker/angular";
 import { EventData } from "tns-core-modules/ui/core/view/view";
+import { View } from "tns-core-modules/ui/core/view";
 
 @Component({
     selector: "ns-reactive-forms-example",
     moduleId: module.id,
     styleUrls: ["reactive-forms-example.component.css"],
     templateUrl: "./reactive-forms-example.component.html"
 })
-export class ReactiveFormsExampleComponent implements OnInit {
+export class ReactiveFormsExampleComponent {
     public pickerItems: ObservableArray<Movie>;
     @ViewChild("picker", { static: false }) pickerComp: PickerFieldComponent;
 
@@ -33,14 +34,8 @@ export class ReactiveFormsExampleComponent implements OnInit {
         });
     }
 
-    ngOnInit(): void {
-        this.pickerClassName = (<any>this.pickerComp.nativeElement).className;
-    }
-
     public movieForm: FormGroup;
 
-    public pickerClassName: string;
-
     public goBack() {
         this.routerExtensions.backToPreviousPage();
     }
@@ -58,15 +53,11 @@ export class ReactiveFormsExampleComponent implements OnInit {
     }
 
     public pickerOpened(args: EventData) {
-        this.pickerClassName = (<any>args.object).className;
-
-        console.log("Picker > Opened; class:", this.pickerClassName);
+        console.log("Picker > Opened; class:", (<View>args.object).className);
     }
 
     public pickerClosed(args: EventData) {
-        this.pickerClassName = (<any>args.object).className;
-
-        console.log("Picker > Closed; class:", this.pickerClassName);
+        console.log("Picker > Closed; class:", (<View>args.object).className);
     }
 }
 

src/angular/nativescript-picker.directives.ts

@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, IterableDiffers } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, IterableDiffers, AfterContentInit, OnDestroy } from "@angular/core";
 import { TemplatedItemsComponent, TEMPLATED_ITEMS_COMPONENT } from "nativescript-angular/directives/templated-items-comp";
 import { PickerField } from "../picker";
 import { PickerValueAccessor } from "./nativescript-picker.accessors";
+import { View } from "tns-core-modules/ui/core/view";
 
 @Component({
     selector: "PickerField",
@@ -12,17 +13,40 @@ import { PickerValueAccessor } from "./nativescript-picker.accessors";
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [{ provide: TEMPLATED_ITEMS_COMPONENT, useExisting: forwardRef(() => PickerFieldComponent) }]
 })
-export class PickerFieldComponent extends TemplatedItemsComponent {
+export class PickerFieldComponent extends TemplatedItemsComponent implements AfterContentInit {
+    private _className: string;
+
     public get nativeElement(): PickerField {
         return this.templatedItemsView;
     }
 
+    public get className(): string {
+        return this._className;
+    }
+
     protected templatedItemsView: PickerField;
 
     constructor(_elementRef: ElementRef,
         _iterableDiffers: IterableDiffers) {
         super(_elementRef, _iterableDiffers);
     }
+
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.nativeElement.on("classNameChange", this.onClassNameChange.bind(this));
+    }
+
+    ngOnDestroy() {
+        if (this.nativeElement) {
+            this.nativeElement.off("classNameChange", this.onClassNameChange.bind(this));
+        }
+
+        super.ngOnDestroy();
+    }
+
+    private onClassNameChange(args) {
+        this. _className = (<View>args.object).className;
+    }
 }
 
 export const DIRECTIVES = [PickerFieldComponent, PickerValueAccessor];