Merge pull request #17 from silicia-apps/draft/restless-fast

fix: Fixed toolbar and title bindings in page component

libs/core/src/lib/components/page/page.component.html

@@ -1,17 +1,17 @@
 <ion-header
-  *ngIf="this.toolbar && !this.fullmode"
+  *ngIf="this.sioCorePagesComponentState.entities![this.id!]?.toolbar && !this.fullmode"
   collapse="fade"
   [translucent]="true"
   class="ion-no-border"
 >
-  <ion-toolbar [color]="this.page?.color!">
+  <ion-toolbar [color]="this.sioCorePagesComponentState.entities![this.id!]?.color!">
     <ion-buttons slot="start">
       <ng-container>
         <ion-menu-button menu="start"></ion-menu-button>
         <ion-back-button *ngIf="this.back"></ion-back-button>
       </ng-container>
     </ion-buttons>
-    <ion-title>{{ this.page?.title! | translate }}</ion-title>
+    <ion-title>{{ this.sioCorePagesComponentState.entities![this.id!]?.title! | translate }}</ion-title>
     <ion-buttons slot="end">
       <ng-content select="[slot='end']"> </ng-content>
     </ion-buttons>
@@ -26,17 +26,17 @@
   </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true" class="ion-padding">
-  <ion-header *ngIf="this.page?.toolbar!" collapse="condense">
+  <ion-header *ngIf="this.sioCorePagesComponentState.entities![this.id!]?.toolbar!" collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">{{ this.page?.title! | translate }}</ion-title>
+      <ion-title size="large">{{ this.sioCorePagesComponentState.entities![this.id!]?.title! | translate }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <div #content>
     <ng-content></ng-content>
   </div>
   <ng-container *ngIf="!content.hasChildNodes()">
     <div id="container">
-      <h1>{{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{ this.page?.title! | translate }}</h1>
+      <h1>{{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{ this.sioCorePagesComponentState.entities![this.id!]?.title! | translate }}</h1>
       <strong>{{ 'PAGE_COMPONENT_DEFAULT_2' | translate }}</strong>
       <p>
         {{ 'PAGE_COMPONENT_LINK' | translate }}

libs/core/src/lib/components/page/page.component.ts

@@ -17,12 +17,23 @@ import { SioColorType } from '../../types';
   styleUrls: ['./page.component.scss'],
 })
 export class SioCorePageComponent implements OnInit {
-  @Input() title;
   @Input() color: SioColorType;
   @Input() id: string | undefined;
 
   public page: SioCorePageComponentInterface | null = null;
 
+  @Input() set title(value: string) {
+    this.sioCorePagesComponentState.updateOne({
+      id: this.id as string,
+      changes: { title: value },
+    });
+  }
+
+  get title(): string | undefined {
+    return this.sioCorePagesComponentState.selectOne(this.page?.id as string)
+      ?.title;
+  }
+
   @AttributeBoolean() @Input() set toolbar(value: InputBoolean) {
     if (this.page) {
       this.page.toolbar = value;