Publications are better

src/app/shared/publication/view-publications/view-publications.module.ts

@@ -6,15 +6,27 @@ import { IonicModule } from '@ionic/angular';
 
 import { ViewPublicationsPageRoutingModule } from './view-publications-routing.module';
 import { ViewPublicationsPage } from './view-publications.page';
+import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';
+
+export class LazyLoadImageHooks extends IntersectionObserverHooks {
+setup(attributes: Attributes) {
+  attributes.offset = 10;
+  attributes.defaultImagePath = "/assets/icon/icon-no-image.svg";
+  attributes.errorImagePath = "/assets/icon/icon-no-image.svg";
+  return super.setup(attributes);
+}
+}
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    ViewPublicationsPageRoutingModule
+    ViewPublicationsPageRoutingModule,
+    LazyLoadImageModule
   ],
   exports: [ViewPublicationsPage],
-  declarations: [ViewPublicationsPage]
+  declarations: [ViewPublicationsPage],
+  providers: [{provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks}]
 })
 export class ViewPublicationsPageModule {}

src/app/shared/publication/view-publications/view-publications.page.html

@@ -39,7 +39,27 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="main-container px-20">
-    <ion-list>
+    <ion-content>
+      <ion-card *ngFor="let publication of publicationList let i = index">
+      <ion-card-content>
+        <div  class="post-img">
+          <img [lazyLoad]="publication.FileBase64">
+        </div>
+        <div class="post-content px-20">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label>{{publication.Title}}</ion-label>
+            </div>
+            <div class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | HH:mm'}}</div>
+          </div>
+          <div class="post-description">
+            <p>{{publication.Message}}</p>
+          </div>
+        </div>
+      </ion-card-content>
+      </ion-card>
+    </ion-content>
+    <!-- <ion-list>
       <div class="post-item  d-md-block mb-10 cursor-pointer"
         *ngFor="let publication of publicationList"
         (click)="viewPublicationDetail(publication.DocumentId)">
@@ -65,7 +85,7 @@
       <div class="center height-100" *ngIf="!publicationList">
         <p>{{error}}</p>
       </div>
-    </ion-list>
+    </ion-list> -->
   </div>
   <!-- fab placed to the bottom end -->
   <ion-fab vertical="bottom" horizontal="end">

src/app/shared/publication/view-publications/view-publications.page.ts

@@ -146,7 +146,7 @@ export class ViewPublicationsPage implements OnInit {
 
   getFromDB() {
     this.storage.get('view_publications').then((viewPublications) => {
-      this.getpublication = viewPublications;
+      this.publicationList = viewPublications;
     })
   }