Disable next button => DONE

src/app/search/components/output/output-tabs.component.html

@@ -31,7 +31,7 @@
             [categoryList]="categoryList" 
             [outputList]="outputList"
             (outputListEmpty)="outputListEmpty.emit($event)"
-            (change)="emitChange($event)">
+            (change)="change.emit($event)">
         </app-output-by-family>
     </accordion-group>
 </accordion>
\ No newline at end of file

src/app/search/containers/output.component.css

+.disabled {
+    cursor: not-allowed;
+}
\ No newline at end of file

src/app/search/containers/output.component.html

@@ -11,7 +11,7 @@
             [categoryList]="categoryList | async"
             [datasetAttributeList]="datasetAttributeList | async" 
             [outputList]="outputList | async"
-            (outputListEmpty)="outputListEmpty($event)"
+            (outputListEmpty)="emitOutputListEmpty($event)"
             (change)="updateOutputList($event)">
         </app-output-tabs>
     </div>
@@ -37,9 +37,14 @@
         </a>
     </div>
     <div class="col col-auto">
-        <a routerLink="/search/result/{{datasetName | async}}" [queryParams]="queryParams | async"
-            class="btn btn-outline-primary">
+        <button *ngIf="outputListEmpty | async;else notEmpty" class="btn btn-outline-primary disabled not-allowed">
             Next <span class="fas fa-arrow-right"></span>
-        </a>
+        </button>
+        <ng-template #notEmpty>
+            <a routerLink="/search/result/{{datasetName | async}}" [queryParams]="queryParams | async"
+                class="btn btn-outline-primary">
+                Next <span class="fas fa-arrow-right"></span>
+            </a>
+        </ng-template>
     </div>
 </div>
\ No newline at end of file

src/app/search/containers/output.component.ts

@@ -20,7 +20,8 @@ interface StoreState {
 
 @Component({
     selector: 'app-output',
-    templateUrl: 'output.component.html'
+    templateUrl: 'output.component.html',
+    styleUrls: ['output.component.css']
 })
 export class OutputComponent implements OnInit {
     public outputSearchMetaIsLoading: Observable<boolean>;
@@ -39,6 +40,7 @@ export class OutputComponent implements OnInit {
     public criteriaList: Observable<Criterion[]>;
     public outputList: Observable<number[]>;
     public queryParams: Observable<SearchQueryParams>;
+    public outputListEmpty: Observable<boolean>;
 
     constructor(private store: Store<StoreState>, private scrollTopService: ScrollTopService) {
         this.outputSearchMetaIsLoading = store.select(metamodelSelector.getOutputSearchMetaIsLoading);
@@ -57,6 +59,7 @@ export class OutputComponent implements OnInit {
         this.criteriaList = this.store.select(searchSelector.getCriteriaList);
         this.outputList = this.store.select(searchSelector.getOutputList);
         this.queryParams = this.store.select(searchSelector.getQueryParams);
+        this.outputListEmpty = this.store.select(searchSelector.getOutputListEmpty);
     }
 
     ngOnInit() {
@@ -73,7 +76,9 @@ export class OutputComponent implements OnInit {
         this.store.dispatch(new searchActions.UpdateOutputListAction(outputList));
     }
 
-    outputListEmpty(outputListEmpty: boolean): void {
-        this.store.dispatch(new searchActions.OutputListEmptyAction(outputListEmpty));
+    emitOutputListEmpty(outputListEmpty: boolean): void {
+        // Create a micro task that is processed after the current synchronous code
+        // This micro task prevent the expression changed after is has been checked error
+        Promise.resolve(null).then(() => this.store.dispatch(new searchActions.OutputListEmptyAction(outputListEmpty)));
     }
 }

src/styles.css

@@ -4,7 +4,6 @@
     color: #7AC29A;
 }
 
-
 /* Custom styles for external library components */
 /* Needs to be in global stylesheet due to ViewEncapsulation */
 .custom-accordion-output .panel-body {