Template rendering sync problem fixed(completed)

source/components/student-application-form/application.form.main.html

-<div class = "loading" *ngIf="showLoader$ | async"></div>
+<div class = "loading" *ngIf="(criteria$ | async).size === 0"></div>
 
-<div class="row equal">
- <div class="col-md-12">
   <form novalidate  [formGroup]="studentDataGroup" #form>
     <form [formGroup]="applicantDataGroup">
       <table>
@@ -18,8 +16,6 @@
       </table>
     </form>
 
-    <div *ngFor="let studentDataField$ of studentDataFields$ | async; "> </div>
-
     <div class="form-group">
         <label for="name">Όνομα μαθητή</label><input class="form-control" type="text" formControlName="name">
     </div>
@@ -173,7 +169,7 @@
 
     </form>
 
-    <div class="row" style="margin-top: 20px;" *ngIf="!(showLoader$ | async)">
+    <div class="row" style="margin-top: 20px;" *ngIf="(criteria$ | async).size > 0">
         <div class="col-md-6">
             <button type="button" class="btn-primary btn-lg pull-left" (click)="navigateBack()">
                 <i class="fa fa-backward"></i>
@@ -188,4 +184,3 @@
     </div>
 
   </form>
-</div>

source/components/student-application-form/application.form.main.ts

-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Subscription } from 'rxjs/Rx';
 import { Injectable } from "@angular/core";
 import { Router } from '@angular/router';
 import { NgRedux, select } from 'ng2-redux';
@@ -9,6 +9,8 @@ import { CriteriaActions } from '../../actions/criteria.actions';
 import { ICriter } from '../../store/criteria/criteria.types';
 import { IAppState } from '../../store/store';
 import { VALID_NAMES_PATTERN, VALID_ADDRESS_PATTERN, VALID_ADDRESSTK_PATTERN, VALID_DIGITS_PATTERN } from '../../constants';
+import { STUDENT_DATA_FIELDS_INITIAL_STATE } from '../../store/studentdatafields/studentdatafields.initial-state';
+import { CRITERIA_INITIAL_STATE } from '../../store/criteria/criteria.initial-state';
 
 import {
     FormBuilder,
@@ -25,9 +27,11 @@ import {
 
 @Injectable() export default class StudentApplicationMain implements OnInit {
 
-    private studentDataFields$: Observable<IStudentDataFields>;
-    private criteria$: Observable<ICriter>;
-    private showLoader$: Observable<boolean>;
+    private studentDataFields$: BehaviorSubject<IStudentDataFields>;
+    private criteria$: BehaviorSubject<ICriter>;
+
+    private studentDataFieldsSub: Subscription;
+    private criteriaSub: Subscription;
 
     public studentDataGroup: FormGroup;
     public applicantDataGroup: FormGroup;
@@ -41,6 +45,9 @@ import {
                 private _sdfb: CriteriaActions,
                 private _ngRedux: NgRedux<IAppState>,
                 private router: Router) {
+
+        this.studentDataFields$ = new BehaviorSubject(STUDENT_DATA_FIELDS_INITIAL_STATE);
+        this.criteria$ = new BehaviorSubject(CRITERIA_INITIAL_STATE);
         this.studentDataGroup = this.fb.group({
             epaluser_id: [,[]],
             name: ['ΝΙΚΟΣ', [Validators.pattern(VALID_NAMES_PATTERN),Validators.required]],
@@ -70,7 +77,7 @@ import {
 
     ngOnInit() {
 
-        this.studentDataFields$ = this._ngRedux.select(state => {
+        this.studentDataFieldsSub = this._ngRedux.select(state => {
             if (state.studentDataFields.size > 0) {
                 state.studentDataFields.reduce(({}, studentDataField) => {
                     this.studentDataGroup.setValue(studentDataField);
@@ -78,10 +85,10 @@ import {
                 }, {});
             }
             return state.studentDataFields;
-        });
+        }).subscribe(this.studentDataFields$);
 
         this._sdfb.getCriteria(true);
-        this.criteria$ = this._ngRedux.select(state => {
+        this.criteriaSub = this._ngRedux.select(state => {
             if (state.criter.size > 0) {
                 state.criter.reduce(({}, criteria) => {
                     //this.studentCriteriaGroup.setValue(criteria);
@@ -93,9 +100,13 @@ import {
                 }, {});
             }
             return state.criter;
-        });
-        this.showLoader$ = this.criteria$.map(criter => criter.size === 0);
+        }).subscribe(this.criteria$);
+
+    }
 
+    ngOnDestroy() {
+        if (this.studentDataFieldsSub) this.studentDataFieldsSub.unsubscribe();
+        if (this.criteriaSub) this.criteriaSub.unsubscribe();
     }
 
     navigateBack() {
@@ -139,9 +150,5 @@ import {
       else
       // Null means valid, believe it or not
         return null;
-
-
-}
-
-
+    }
 }

source/store/criteria/criteria.initial-state.ts

@@ -2,4 +2,4 @@ import { List } from 'immutable';
 import { ICriteria } from './criteria.types';
 
 
-export const INITIAL_STATE = List<ICriteria>();
+export const CRITERIA_INITIAL_STATE = List<ICriteria>();

source/store/criteria/criteria.reducer.ts

 import { ICriteria, ICriter } from './criteria.types';
-import { INITIAL_STATE } from './criteria.initial-state';
+import { CRITERIA_INITIAL_STATE } from './criteria.initial-state';
 import { Seq } from 'immutable';
 
 import {
@@ -7,7 +7,7 @@ import {
   CRITERIA_SAVE
 } from '../../constants';
 
-export function criteriaReducer(state: ICriter = INITIAL_STATE, action): ICriter {
+export function criteriaReducer(state: ICriter = CRITERIA_INITIAL_STATE, action): ICriter {
   switch (action.type) {
     case CRITERIA_RECEIVED:
         let newCriter = Array<ICriteria>();

source/store/criteria/criteria.types.ts

 import { List } from 'immutable';
 
 export interface ICriteria {
-  /*
-  orphanmono: boolean;
-  orphantwice: boolean;
-  threechildren: boolean;
-  manychildren: boolean;
-  twins: boolean;
-  disability: boolean;
-  studies: boolean;
-  income: string;
-  */
-
   id: string;
   name: string;
   mutual_disabled_id: string,

source/store/logininfo/logininfo.initial-state.ts

@@ -2,4 +2,4 @@ import { List } from 'immutable';
 import { ILoginInfoToken } from './logininfo.types';
 
 // export const INITIAL_STATE = List<ICourseField>([new CourseFieldRecord({})]);
-export const INITIAL_STATE = List<ILoginInfoToken>();
+export const LOGININFO_INITIAL_STATE = List<ILoginInfoToken>();

source/store/logininfo/logininfo.reducer.ts

 import { ILoginInfo, ILoginInfoToken } from './logininfo.types';
-import { INITIAL_STATE } from './logininfo.initial-state';
+import { LOGININFO_INITIAL_STATE } from './logininfo.initial-state';
 import { Seq } from 'immutable';
 
 import {
@@ -7,7 +7,7 @@ import {
   LOGININFO_INIT
 } from '../../constants';
 
-export function loginInfoReducer(state: ILoginInfo = INITIAL_STATE, action): ILoginInfo {
+export function loginInfoReducer(state: ILoginInfo = LOGININFO_INITIAL_STATE, action): ILoginInfo {
   switch (action.type) {
     case LOGININFO_SAVE:
 		let loginInfoTokens = Array<ILoginInfoToken>();
@@ -19,7 +19,7 @@ export function loginInfoReducer(state: ILoginInfo = INITIAL_STATE, action): ILo
         return Seq(loginInfoTokens).map(n => n).toList();
 
     case LOGININFO_INIT:
-        return INITIAL_STATE;
+        return LOGININFO_INITIAL_STATE;
     default:
         return state;
   }