You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Ionic 5 Tutorial Series | Part-5 Blog Posts UI Design

Ionic 5 Tutorial Series | Part-5 Blog Posts UI Design

Loading Controller in ionic is basically a loader which is to be presented when some is being loaded like in this blog we are going to load post from our backend.

Abhishek Dana
Abhishek Dana

Hello there in this post we have successfully implemented our blog post UI design. So today we are going to learn about loading Controller , Refresh Controller In Ionic.

So before starting to code let's me first tell you what is loadingController.Loading Controller in ionic is basically a loader which is to be presented when some is being loaded like in this blog we are going to load post from our backend.I assume that you have a api which provide you blog post content, so basically we will show that loader until the Http get request doesn't get data from the server.As soon as we fetch data we stop the loading controller by using its funcation dismiss.

Now let's understand what is Refersh Controller in ionic.Refersh Controller is basically used when we want to get new blog at each time the user click or drag from top the referesh controller get excuted with event which help it that it has started and at perticular amount of time it will end.So basically to load new data from server we are going to user refersh controller.

Also in this blog we have user API key and API Url so in ionic, angular or any programming language we store this keys and url somewhere here we store them in our environment.ts and environment.prod.ts file.

Now let's get started with our design part so in previous blog we have implemented login and there was home page already created now we will first make import some neccessary modules that is HTTPClientModule in app.module.ts in imports part.

import { AuthService } from "./services/auth.service";
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouteReuseStrategy } from "@angular/router";

import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
import { StatusBar } from "@ionic-native/status-bar/ngx";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { HttpClientModule } from "@angular/common/http";
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({ mode: "md" }),
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AuthService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now let's move back to home page html file and add our header so here is the sample code of header

<ion-header class="ion-padding">
  <ion-toolbar>
    <ion-avatar slot="start">
      <img
        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
      />
    </ion-avatar>
    <ion-card-content>
      <h4
        style="
          font-weight: 600;
          color: rgba(39, 39, 39, 0.81);
          font-size: 16px;
        "
      >
        Marko Phiply
      </h4>
      <h6 style="font-weight: 600; color: rgb(133, 133, 133); font-size: 14px;">
        User
      </h6>
    </ion-card-content>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="ellipsis-vertical-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

After adding header you will get output something like this..

This is our header Now let's add content to <ion-content></ion-content> so here is the sample code of the container which hold image with blog title and some description so bascically you need to add some scss also.

Now add the above sample code in home.page.html in <ion-content></ion-content>


<ion-content class="ion-padding">
  <ion-refresher
    slot="fixed"
    (ionRefresh)="doRefresh($event)"
    pullFactor="0.8"
    pullMin="60"
    pullMax="120"
  >
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-grid>
    <ion-row>
      <ion-col
        size-lg="4"
        size-md="6"
        size-sm="12"
        size="12"
      >
        <div class="container">
          <div class="container-header-image">
            <a>
              <img class="img" src="https://images.unsplash.com/photo-1581287053822-fd7bf4f4bfec?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" />
            </a>
            <div
              class="colored-shadow"
              [ngStyle]="{'background-image': 'url('https://images.unsplash.com/photo-1581287053822-fd7bf4f4bfec?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ')' , 'opacity': 1}"
            ></div>
          </div>
          <div class="container-header-content">
            <h3 class="title">
              Ionic 5 Tutorial Series | Part-3 Ionic UI Components
            </h3>
            <p>Here comes your description of the blog that you have made with some extra content of length range from 0 to 255 characters,</p>
          </div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Now add some scss to make Our blog application look similar to the image as shown in previour blog.

.container {
  position: relative;
  margin: 1rem auto;
  &-header-image {
    position: relative;
    padding: 0;
    z-index: 1;

    border-radius: 6px;

    & a {
      display: block;

      & img {
        border-radius: 10px;

        width: 100%;
      }
    }
    & .colored-shadow {
      transform: scale(0.94);
      top: 0px;
      filter: blur(12px);
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      z-index: -1;
      transition: opacity 0.45s;
      opacity: 0;
    }
  }

  &-header-content {
    & h3 {
      font-weight: 600;
      color: #000000c9;
    }

    & p {
      text-transform: capitalize;
      color: #3636366e;
    }
  }
}

That's it here is the output of our ionic blog post card.

The final output of the home page UI will look something like

Hurray, we have successfully created the similar UI of our home page design as shown in previour blog.

So that's it for this blog we will be building blog detail page in our next blog.

Stay tuned 😊😊