Simplified page.

src/Squidex/app/features/apps/pages/apps-page.component.html

@@ -13,7 +13,7 @@
         <h3 class="empty-headline">You are not collaborating to any app yet</h3>
     </div>
 
-    <div class="card card-href card-app float-left" *ngFor="let app of apps" [routerLink]="['/app', app.name]">
+    <div class="card card-href card-app float-left" *ngFor="let app of appsState.apps | async" [routerLink]="['/app', app.name]">
         <div class="card-body">
             <h4 class="card-title">{{app.name}}</h4>
 
@@ -75,7 +75,7 @@
 </div>
 
 <ng-container *sqxModalView="addAppDialog;onRoot:true">
-    <sqx-app-form [template]="appTemplate"
+    <sqx-app-form [template]="addAppTemplate"
         (completed)="addAppDialog.hide()">
     </sqx-app-form>
 </ng-container>

src/Squidex/app/features/apps/pages/apps-page.component.ts

@@ -5,14 +5,11 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
 
 import {
-    AppDto,
     AppsState,
     AuthService,
-    ImmutableArray,
     ModalView,
     OnboardingService
 } from '@app/shared';
@@ -22,13 +19,9 @@ import {
     styleUrls: ['./apps-page.component.scss'],
     templateUrl: './apps-page.component.html'
 })
-export class AppsPageComponent implements OnDestroy, OnInit {
+export class AppsPageComponent implements OnInit {
-    private appsSubscription: Subscription;
-
     public addAppDialog = new ModalView();
-
+    public addAppTemplate = '';
-    public apps: ImmutableArray<AppDto> = ImmutableArray.empty();
-    public appTemplate = '';
 
     public onboardingModal = new ModalView();
 
@@ -39,26 +32,18 @@ export class AppsPageComponent implements OnDestroy, OnInit {
     ) {
     }
 
-    public ngOnDestroy() {
-        this.appsSubscription.unsubscribe();
-    }
-
     public ngOnInit() {
-        this.appsSubscription =
+        this.appsState.apps.take(1)
-            this.appsState.apps
+            .subscribe(apps => {
-                .subscribe(apps => {
+                if (this.onboardingService.shouldShow('dialog') && apps.length === 0) {
-                    if (apps.length === 0 && this.onboardingService.shouldShow('dialog')) {
+                    this.onboardingService.disable('dialog');
-                        this.onboardingService.disable('dialog');
+                    this.onboardingModal.show();
-                        this.onboardingModal.show();
+                }
-                    }
+            });
-
-                    this.apps = apps;
-                });
     }
 
     public createNewApp(template: string) {
-        this.appTemplate = template;
+        this.addAppTemplate = template;
-
         this.addAppDialog.show();
     }
 }