Nick Dabhi

Nick Dabhi

1573265418

How to use Ionic Responsive Grid with Angular 8?

In this Ionic 4 tutorial, we have to show you how to use Ionic Responsive Grid along with a few Angular 8 examples that might be useful for your Ionic Framework app. Sometimes, we want to create Hybrid mobile apps that have a responsive view to match the device screen size and orientation (portrait/landscape). Fortunately, Ionic 4 has built-in Responsive Grid component to achieve the responsive app layout.

Table of Contents:

The Ionic Grid is a flexbox system that matches the mobile device screen with a custom layout. Its build by 3 elements of a grid, rows, and cols. The rows are the child of the Grid and the cols are the child of the rows. Column expansion will fill the row and resize depends on the sibling’s column. Column width based on 12 column layout, its similar to the Bootstrap grid column system. The grid can customizable using CSS.

The following tools, frameworks, and modules are required for this tutorial:

  1. Ionic 4 Framework
  2. Angular 8
  3. Terminal or Command Line
  4. Text Editor

Preparation

This Ionic responsive grid example will implement in an Ionic app. So, the first time to do is create an Ionic 4 app. Before starting to create an Ionic 4 app, we have to make sure that Node.js latest and recommended version is installed. To check the version of Node.js and NPM type this command in the Terminal or Command line.

node -v
v10.15.1
npm -v
6.11.3

Next, we have to install or update the Ionic to the latest version by type this command.

sudo npm install -g ionic

You will get the latest Ionic CLI version 5 in your terminal or command line. Check the version by type this command.

ionic -v
5.4.5

Right now, we are using the latest Ionic CLI version 5.2.8. Don’t worry about the Angular version, we will use any version that generated with Ionic apps. Next, we will create an Ionic 4 app by typing this command.

ionic start ionic-grid tabs --type=angular

Next, we have to check if the Ionic 4 app is working by running this app as lab mode.

cd ./ionic-grid
ionic serve -l

If there’s a question to install @ionic/lab just type “Y” to install it immediately. Here’s the Ionic 4 app that looks like.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - Home

Basic Ionic Grid

We will implement a basic grid in one of the generated Ionic tabs. For that, open and edit src/app/tab1/tab1.page.html then add/replace the contents with these lines of HTML tags with Ionic grid, row, and col.

<ion-grid>
  <ion-row>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

That example of ion-grid, ion-row, and ion-col is Ionic Grid auto-layout which the col width distributes automatically to fit the screen width and the rest the cols put in the line.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - Simple landscape
Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - Simple portrait

Below is an example of using Ionic Grid with the attribute “ion-no-padding”.

<ion-grid class="ion-no-padding">
  <ion-row>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

We put ion-no-padding class in and to remove padding in Ionic grid and cols. Next, we will show you an example of an Ionic grid with a specific col width. In this example, you will see multiple size base on minimum screen width. Comment the previous example then add these HTML tags.

<ion-grid>
  <ion-row>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size iphone x landscape

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size ipad

This example is to push the col to right based on screen size.

<ion-grid>
  <ion-row>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push ipad

This example pulls the col to left based on screen size.

<ion-grid>
  <ion-row>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull ipad

This example is col offset.

<ion-grid>
  <ion-row>
    <ion-col size="12" size-lg="4" size-md="4" size-sm="4" offset-lg="4" offset-md="4" offset-sm="4">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size="12" size-lg="4" size-md="4" size-sm="4" offset-lg="4" offset-md="4" offset-sm="4">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset iphone x
iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset ipad

Responsive Form

This example of the responsive form is one of the most used in the mobile apps that required the long-form. The long-form in the smaller screen width will be a single column and scrollable to the bottom to the end of the form. In the wider screen width, it will become two-column or more of the form. We will use the second tab for this, open and edit src/app/tab2/tab2.page.html then replace or add the contents to these HTML tags.

<form>
  <ion-grid>
    <ion-row>
      <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Username/Email</ion-label>
          <ion-input type="email"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">First Name</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Middle Name</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Last Name</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="6" size-md="6" size-sm="12" size="12">
        <ion-item>
          <ion-label position="floating">Address Line 1</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
      </ion-col>
      <ion-col size-lg="6" size-md="6" size-sm="12" size="12">
        <ion-item>
          <ion-label position="floating">Address Line 2</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">City</ion-label>
          <ion-select value="newyork" okText="Okay" cancelText="Dismiss">
            <ion-select-option value="newyork">New York</ion-select-option>
            <ion-select-option value="tokyo">Tokyo</ion-select-option>
            <ion-select-option value="london">London</ion-select-option>
            <ion-select-option value="newdelhi">New Delhi</ion-select-option>
            <ion-select-option value="jakarta">Jakarta</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
            <ion-label position="floating">Country</ion-label>
            <ion-select value="usa" okText="Okay" cancelText="Dismiss">
              <ion-select-option value="usa">United States</ion-select-option>
              <ion-select-option value="japan">Japan</ion-select-option>
              <ion-select-option value="uk">United Kingdom</ion-select-option>
              <ion-select-option value="india">India</ion-select-option>
              <ion-select-option value="indonesia">Indonesia</ion-select-option>
            </ion-select>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Post Code</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Gender</ion-label>
          <ion-select value="male" okText="Okay" cancelText="Dismiss">
            <ion-select-option value="male">Male</ion-select-option>
            <ion-select-option value="female">female</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Age</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Height</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Weight</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Occupation</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Position</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Company</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Basic Salary</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Meal</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Transport</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="12" size-md="12" size-sm="12" size="12">
        <ion-item>
          <ion-label position="floating">Notes</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form ipad

Responsive Grid List

In this example, we will show you the responsive grid list of the articles. The grid will be a single column for the smaller screen width. For a larger screen, they will be two or more per lines. To implement this, we need to add an array of objects in src/app/tab3/tab3.page.ts. Add this line of the array before the constructor.

articles: any[] = [
  { title: 'Grails 4 Tutorial: Spring Security Core Login Example', image: './assets/imgs/article1.png' },
  { title: 'Angular Material Form Controls, Form Field and Input Examples', image: './assets/imgs/article2.png' },
  { title: 'Angular 8 Tutorial: Observable and RXJS Examples', image: './assets/imgs/article3.png' },
  { title: 'React Native Tutorial: Facebook Login Example', image: './assets/imgs/article4.png' },
  { title: 'Spring Boot Tutorial: Build an MVC Java Web App using Netbeans', image: './assets/imgs/article5.png' },
  { title: 'Ionic 4 Tutorial: Facebook Login Example', image: './assets/imgs/article6.png' },
  { title: 'View Google Maps in HTML Page', image: './assets/imgs/article7.png' },
  { title: 'Angular 8 Tutorial: REST API and HttpClient Examples', image: './assets/imgs/article8.png' },
  { title: 'MEAN Stack (Angular 8) Tutorial: Build a Simple Blog CMS', image: './assets/imgs/article9.png' },
  { title: 'MongoDB Tutorial: Aggregate Method Example', image: './assets/imgs/article10.png' },
  { title: 'Ionic 4 Tutorial: Angular 8 Multilevel Accordion Menu Example', image: './assets/imgs/article11.png' },
  { title: 'React Native Firebase Cloud Messaging (FCM) Push Notification', image: './assets/imgs/article12.png' }
];

Next, open and edit src/app/tab3/tab3.page.html then replace or add the contents with these HTML tags.

<ion-grid>
  <ion-row>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12" *ngFor="let article of articles; let i=index;">
      <ion-card>
        <img src="{{article.image}}" alt="{{article.title}}"/>
        <ion-card-header>
          <ion-card-subtitle>{{article.title}}</ion-card-subtitle>
        </ion-card-header>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list ipad

That it’s, a little example of Ionic Grid with type Angular. You can check the full source codes in our GitHub.

#angular #Ionic #mobile-app

What is GEEK

Buddha Community

How to use Ionic Responsive Grid with Angular 8?
Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Clara  Gutmann

Clara Gutmann

1598716260

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

Nick Dabhi

Nick Dabhi

1573265418

How to use Ionic Responsive Grid with Angular 8?

In this Ionic 4 tutorial, we have to show you how to use Ionic Responsive Grid along with a few Angular 8 examples that might be useful for your Ionic Framework app. Sometimes, we want to create Hybrid mobile apps that have a responsive view to match the device screen size and orientation (portrait/landscape). Fortunately, Ionic 4 has built-in Responsive Grid component to achieve the responsive app layout.

Table of Contents:

The Ionic Grid is a flexbox system that matches the mobile device screen with a custom layout. Its build by 3 elements of a grid, rows, and cols. The rows are the child of the Grid and the cols are the child of the rows. Column expansion will fill the row and resize depends on the sibling’s column. Column width based on 12 column layout, its similar to the Bootstrap grid column system. The grid can customizable using CSS.

The following tools, frameworks, and modules are required for this tutorial:

  1. Ionic 4 Framework
  2. Angular 8
  3. Terminal or Command Line
  4. Text Editor

Preparation

This Ionic responsive grid example will implement in an Ionic app. So, the first time to do is create an Ionic 4 app. Before starting to create an Ionic 4 app, we have to make sure that Node.js latest and recommended version is installed. To check the version of Node.js and NPM type this command in the Terminal or Command line.

node -v
v10.15.1
npm -v
6.11.3

Next, we have to install or update the Ionic to the latest version by type this command.

sudo npm install -g ionic

You will get the latest Ionic CLI version 5 in your terminal or command line. Check the version by type this command.

ionic -v
5.4.5

Right now, we are using the latest Ionic CLI version 5.2.8. Don’t worry about the Angular version, we will use any version that generated with Ionic apps. Next, we will create an Ionic 4 app by typing this command.

ionic start ionic-grid tabs --type=angular

Next, we have to check if the Ionic 4 app is working by running this app as lab mode.

cd ./ionic-grid
ionic serve -l

If there’s a question to install @ionic/lab just type “Y” to install it immediately. Here’s the Ionic 4 app that looks like.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - Home

Basic Ionic Grid

We will implement a basic grid in one of the generated Ionic tabs. For that, open and edit src/app/tab1/tab1.page.html then add/replace the contents with these lines of HTML tags with Ionic grid, row, and col.

<ion-grid>
  <ion-row>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col>
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

That example of ion-grid, ion-row, and ion-col is Ionic Grid auto-layout which the col width distributes automatically to fit the screen width and the rest the cols put in the line.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - Simple landscape
Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - Simple portrait

Below is an example of using Ionic Grid with the attribute “ion-no-padding”.

<ion-grid class="ion-no-padding">
  <ion-row>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

We put ion-no-padding class in and to remove padding in Ionic grid and cols. Next, we will show you an example of an Ionic grid with a specific col width. In this example, you will see multiple size base on minimum screen width. Comment the previous example then add these HTML tags.

<ion-grid>
  <ion-row>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size iphone x landscape

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - size ipad

This example is to push the col to right based on screen size.

<ion-grid>
  <ion-row>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col push-lg="6" push-md="4" push-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - push ipad

This example pulls the col to left based on screen size.

<ion-grid>
  <ion-row>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - pull ipad

This example is col offset.

<ion-grid>
  <ion-row>
    <ion-col size="12" size-lg="4" size-md="4" size-sm="4" offset-lg="4" offset-md="4" offset-sm="4">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
    <ion-col size="12" size-lg="4" size-md="4" size-sm="4" offset-lg="4" offset-md="4" offset-sm="4">
      <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset iphone x
iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - offset ipad

Responsive Form

This example of the responsive form is one of the most used in the mobile apps that required the long-form. The long-form in the smaller screen width will be a single column and scrollable to the bottom to the end of the form. In the wider screen width, it will become two-column or more of the form. We will use the second tab for this, open and edit src/app/tab2/tab2.page.html then replace or add the contents to these HTML tags.

<form>
  <ion-grid>
    <ion-row>
      <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Username/Email</ion-label>
          <ion-input type="email"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">First Name</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Middle Name</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="6" size="12">
        <ion-item>
          <ion-label position="floating">Last Name</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="6" size-md="6" size-sm="12" size="12">
        <ion-item>
          <ion-label position="floating">Address Line 1</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
      </ion-col>
      <ion-col size-lg="6" size-md="6" size-sm="12" size="12">
        <ion-item>
          <ion-label position="floating">Address Line 2</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">City</ion-label>
          <ion-select value="newyork" okText="Okay" cancelText="Dismiss">
            <ion-select-option value="newyork">New York</ion-select-option>
            <ion-select-option value="tokyo">Tokyo</ion-select-option>
            <ion-select-option value="london">London</ion-select-option>
            <ion-select-option value="newdelhi">New Delhi</ion-select-option>
            <ion-select-option value="jakarta">Jakarta</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
            <ion-label position="floating">Country</ion-label>
            <ion-select value="usa" okText="Okay" cancelText="Dismiss">
              <ion-select-option value="usa">United States</ion-select-option>
              <ion-select-option value="japan">Japan</ion-select-option>
              <ion-select-option value="uk">United Kingdom</ion-select-option>
              <ion-select-option value="india">India</ion-select-option>
              <ion-select-option value="indonesia">Indonesia</ion-select-option>
            </ion-select>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Post Code</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Gender</ion-label>
          <ion-select value="male" okText="Okay" cancelText="Dismiss">
            <ion-select-option value="male">Male</ion-select-option>
            <ion-select-option value="female">female</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Age</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Height</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="3" size-md="3" size-sm="3" size="12">
        <ion-item>
          <ion-label position="floating">Weight</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Occupation</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Position</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Company</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Basic Salary</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Meal</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
        <ion-item>
          <ion-label position="floating">Transport</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col size-lg="12" size-md="12" size-sm="12" size="12">
        <ion-item>
          <ion-label position="floating">Notes</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - form ipad

Responsive Grid List

In this example, we will show you the responsive grid list of the articles. The grid will be a single column for the smaller screen width. For a larger screen, they will be two or more per lines. To implement this, we need to add an array of objects in src/app/tab3/tab3.page.ts. Add this line of the array before the constructor.

articles: any[] = [
  { title: 'Grails 4 Tutorial: Spring Security Core Login Example', image: './assets/imgs/article1.png' },
  { title: 'Angular Material Form Controls, Form Field and Input Examples', image: './assets/imgs/article2.png' },
  { title: 'Angular 8 Tutorial: Observable and RXJS Examples', image: './assets/imgs/article3.png' },
  { title: 'React Native Tutorial: Facebook Login Example', image: './assets/imgs/article4.png' },
  { title: 'Spring Boot Tutorial: Build an MVC Java Web App using Netbeans', image: './assets/imgs/article5.png' },
  { title: 'Ionic 4 Tutorial: Facebook Login Example', image: './assets/imgs/article6.png' },
  { title: 'View Google Maps in HTML Page', image: './assets/imgs/article7.png' },
  { title: 'Angular 8 Tutorial: REST API and HttpClient Examples', image: './assets/imgs/article8.png' },
  { title: 'MEAN Stack (Angular 8) Tutorial: Build a Simple Blog CMS', image: './assets/imgs/article9.png' },
  { title: 'MongoDB Tutorial: Aggregate Method Example', image: './assets/imgs/article10.png' },
  { title: 'Ionic 4 Tutorial: Angular 8 Multilevel Accordion Menu Example', image: './assets/imgs/article11.png' },
  { title: 'React Native Firebase Cloud Messaging (FCM) Push Notification', image: './assets/imgs/article12.png' }
];

Next, open and edit src/app/tab3/tab3.page.html then replace or add the contents with these HTML tags.

<ion-grid>
  <ion-row>
    <ion-col size-lg="3" size-md="4" size-sm="6" size="12" *ngFor="let article of articles; let i=index;">
      <ion-card>
        <img src="{{article.image}}" alt="{{article.title}}"/>
        <ion-card-header>
          <ion-card-subtitle>{{article.title}}</ion-card-subtitle>
        </ion-card-header>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Here’s the result in iPhone 6/6s portrait.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list iphone 6 portrait

iPhone 6/6s landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list iphone 6 landscape

iPhone X landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list iphone x

iPad landscape.

Ionic 4 Tutorial: Ionic Responsive Grid Angular 8 Examples - list ipad

That it’s, a little example of Ionic Grid with type Angular. You can check the full source codes in our GitHub.

#angular #Ionic #mobile-app

Juned Ghanchi

1621423249

Ionic App Development Company in India, Hire Ionic Developers

We are reputed for developing well crafted and optimized Ionic apps in India and across the world. The cross-platforms Ionic apps built by our tech-savvy team are apt for a faster and efficient business development process.

Our developers are well experienced in using this powerful HTML5 SDK and are able to effectively use web technologies like HTML, CSS, and JAVASCRIPT to build the best Ionic apps.

If you are looking for the best technology services around the world, hire Ionic app developers in India. Your business will find the best app development solutions here.

#ionic app development company india #hire ionic developers india #ionic app development company #hire ionic developers #ionic app programmers #ionic app development agency

Einar  Hintz

Einar Hintz

1594631472

Pros and Cons of Ionic Development

Entrepreneurs around the world want a top-notch mobile application for their business in both Android and iOS platforms. Most of them get stuck mid-way where they struggle to pick the best technology suitable for their business. From questions such as native mobile development or cross-platform development? Flutter or Ionic or React Native?. Each technology and development approach has its own Pros and Cons from which you will need to choose the right one for your business. If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

What is Ionic Framework?

Being an open-source SDK for building Hybrid mobile applications in both Android and iOS platforms, Ionic is the best choice for building top of the line mobile applications. This Ionic framework is completely based on Apache Cordova and Angular. More precisely, Ionic is an npm module that requires the installation of Node JS to function.

One can build a full functioning mobile application in both platforms using their Javascript, HTML, and CSS knowledge without requiring the basics of Kotlin or Java. More than 5 Million mobile applications are built using this Ionic framework by leveraging its platform-specific UI elements, innumerable libraries, and more exciting features.

The applications that are built using the Ionic framework are cross-platform, web-based, and have access to native device’s APIs.

Ionic Applications are

  • Cross-platform – Single code base for both platforms (except native components)
  • Web-based – Built using web-views and can be displayed in a browser like PWAs.
  • Access to native API components – They can access native device’s camera, files, and others.

Advantages of Ionic Development

Quick Development and Time To Market

For entrepreneurs and business owners, ionic development can be beneficial if they want to develop a mobile application in both platforms in a short period of time while comparing to native applications. Building native applications specifically for each platform can be time-consuming which can imply a delay in time to market and development cost of native applications are generally expensive.

#mobile app development #ionic 4 advantages #ionic 4 best practices #ionic 5 #ionic appflow #ionic capacitor pros and cons #ionic vs react native #react native pros and cons #what is ionic app development