Post
Ask Question

Getting Started With Ionic 4, Angular And .NET Core 3

Introduction

 
In my previous articles, I talked about front-end frameworks with .NET Core 3. I decided to write an article on cross-platform which is suitable for IOS, Android, and Web, and that's why I chose Ionic 4 Framework and its back-end as .NET Core 3.
 

What is Ionic Framework?

 
Ionic Framework is an open-source UI toolkit for building performant and high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).
 
Ionic Framework is focused on the front-end user experience, or UI interaction of an app (controls, interactions, gestures, animations).
 
Currently, Ionic Framework has official integration with Angular but support for Vue and React is in development.
 

Why do developers choose the Ionic Framework?

 
There are tremendous features that help developers to choose this platform, such as Ionic Framework is completely Free and Open Source. Ionic has a beautiful default UI like native apps, reusable codes, Angular in its base, a big and helpful developer community, plug-ins powered by Cordova, ease of testing, decreased app project costs, ability to reload to the browser is live. It's easier to move across platforms.
 

Configuration for .NET Core 3

 
Download the latest version of this SDK and install it.
 
Getting Started With Ionic 4, Angular And .NET Core 3 
 
Create an API project with .NET Core 3 (csharpcornerauthorionicapi). The important files like UserController.cs, User.cs, and Startup.cs should look like below respectively.
  1. using System.Collections.Generic;  
  2. using System.Linq;  
  3. using Microsoft.AspNetCore.Cors;  
  4. using Microsoft.AspNetCore.Mvc;  
  5. using Newtonsoft.Json;  
  6.   
  7. namespace csharpcornerauthorionicapi.Controllers  
  8. {  
  9.     [Route("api/[controller]")]  
  10.     [ApiController]  
  11.     [EnableCors("charppolicy")]  
  12.     public class UserController : ControllerBase  
  13.     {  
  14.         // GET api/values  
  15.         [HttpGet("{s}/{st}/{id}")]  
  16.         public ActionResult<IEnumerable<string>> Get(string s, string st = "", int id = 0)  
  17.         {  
  18.             return Ok(JsonConvert.SerializeObject(GetAllUser(s, st, id), Formatting.Indented));  
  19.         }  
  20.   
  21.         public List<User> GetAllUser(string s, string st = "", int id = 0)  
  22.         {  
  23.             List<User> Author = new List<User>();  
  24.   
  25.             if (s == null && id == 0)  
  26.                 return Author;  
  27.   
  28.                 Author.Add(new User  
  29.                 {  
  30.                     Id = 1,  
  31.                     role = "Admin",  
  32.                     biodata = "C# Corner, Mindcracker",  
  33.                     intro = "Startup Advisor, Speaker, Author, Architecture, Innovation",  
  34.                     joineddate = "Oct 29 2004",  
  35.                     location = "Philadelphia USA",  
  36.                     name = "Mahesh Chand",  
  37.                     profilelink = "https://www.c-sharpcorner.com/members/mahesh-chand",  
  38.                     profilepicture = "https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/mahesh20160308020632.png"  
  39.                 });  
  40.                 Author.Add(new User  
  41.                 {  
  42.                     Id = 2,  
  43.                     role = "Admin",  
  44.                     biodata = "C# Corner Chief Editor and 3-times Microsoft MVP. I hold Masters degree in Computer Science and Applications and Bachelor’s degree in Mathematics. I am responsible for content publishing, product development, and migration of existing contents. I am also responsible for hiring new team members and managing the existing team",  
  45.                     intro = "Not Available",  
  46.                     joineddate = "May 16 2005",  
  47.                     location = "Noida India",  
  48.                     name = "Praveen Moosad",  
  49.                     profilelink = "https://www.c-sharpcorner.com/members/praveen-moosad",  
  50.                     profilepicture = "https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/prvn_13197120160516052234.jpg"  
  51.                 });  
  52.                 Author.Add(new User  
  53.                 {  
  54.                     Id = 3,  
  55.                     role = "Editor",  
  56.                     biodata = "Not Available",  
  57.                     intro = "Editing and writing",  
  58.                     joineddate = "Dec 30 2015",  
  59.                     location = "USA",  
  60.                     name = "TRIX MIDDLEKAUFF",  
  61.                     profilelink = "https://www.c-sharpcorner.com/members/trix-middlekauff",  
  62.                     profilepicture = "https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/26e38620180810040748.jpg"  
  63.                 });  
  64.                 Author.Add(new User  
  65.                 {  
  66.                     Id = 4,  
  67.                     role = "Editor",  
  68.                     biodata = "With an extensive hands-on experience of over 9 years, Pranav is working as Sr. Technical Editor in C# Corner team. He holds an MBA as well as a B-Tech degree in Information Technology. Here, he is responsible for editing and developing high-quality technical content, covering the news from the tech world, and editing all the day-to-day content being published on C# Corner, making it more readable and worth publishing.",  
  69.                     intro = "Content curation, Copywriting, Copyediting,Tech writing, PHP/MySq",  
  70.                     joineddate = "May 16 2016",  
  71.                     location = "Delhi India",  
  72.                     name = "PRANAV MITTAL",  
  73.                     profilelink = "https://www.c-sharpcorner.com/members/pranav14",  
  74.                     profilepicture = "https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/90108c20190521012831.jpg"  
  75.                 });  
  76.                 Author.Add(new User  
  77.                 {  
  78.                     Id = 5,  
  79.                     role = "MVP",  
  80.                     biodata = "Ankur Mistry is working as an Agile Coach, Certified Scrum Master (CSM), CSPO, He is C#Corner MVP (2018, 2017 and 2016), C#Corner Surat Chapter Lead, Speaker, CSP and Masters in Computer Application. Having 12 + years of experience in IT and his area of interest is C#, ASP.NET, SQL Server, Project Management, Scrum, Agile, crystal reports, MVC, WCF, Web Services, SSRS, HTML etc.",  
  81.                     intro = "CSPO, CSP, CSM, C#, ASP.NET, SQL Server, crystal reports, MVC",  
  82.                     joineddate = "Dec 19 2009",  
  83.                     location = "Mumbai India",  
  84.                     name = "ANKUR MISTRY",  
  85.                     profilelink = "https://www.c-sharpcorner.com/members/ansh-mistry",  
  86.                     profilepicture = "https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/ansh0603198220160402071949.jpg"  
  87.                 });  
  88.                 Author.Add(new User  
  89.                 {  
  90.                     Id = 6,  
  91.                     role = "MVP",  
  92.                     biodata = "Sr. SharePoint Developer working with Microsoft SharePoint (2010, 2013, 2016 and SharePoint Online), PowerApps, PowerBI, ASP.NET with C# and VB. Have hands on experience on Microsoft Azure. Love to remain on cutting edge of the technical knowledge",  
  93.                     intro = "SharePoint , Office365, PowerApp, Microsoft Flow, Azure, PowerBI",  
  94.                     joineddate = "Jul 29 2016",  
  95.                     location = "Surat India",  
  96.                     name = "AAKASH MAURYA",  
  97.                     profilelink = "https://www.c-sharpcorner.com/members/aakash-morya2",  
  98.                     profilepicture = "https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/d864b220180523093106.png"  
  99.                 });  
  100.                 Author.Add(new User  
  101.                 {  
  102.                     Id = 7,  
  103.                     role = "Author",  
  104.                     biodata = "A Software Engineer, experience with developing Web Application with the use of Microsoft technologies",  
  105.                     intro = "AngularJS, ASP.NET, nopCommerce,ASP.NET CORE,React js",  
  106.                     joineddate = "Jan 29 2019",  
  107.                     location = "Surat India",  
  108.                     name = "SMITEN KALATHIYA",  
  109.                     profilepicture = "https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/01d00520190609091138.jpg",  
  110.                     profilelink = "https://www.c-sharpcorner.com/members/smiten-kalathiya3"  
  111.                 });  
  112.             if (!string.IsNullOrEmpty(s))  
  113.                 Author = Author.Where(a => a.name.ToLower().Contains(s.ToLower())).ToList();  
  114.   
  115.             if(!string.IsNullOrEmpty(st))  
  116.                 Author = Author.Where(a => a.role.Contains(st)).ToList();  
  117.   
  118.             if(id != 0)  
  119.                 Author = Author.Where(a => a.Id == id).ToList();  
  120.   
  121.             return Author;  
  122.   
  123.         }  
  124.     }  
  125. }  
  1. namespace csharpcornerauthorionicapi  
  2. {  
  3.     public class User  
  4.     {  
  5.         public int Id { get; set; }  
  6.         public string name { get; set; }  
  7.         public string location { get; set; }  
  8.         public string joineddate { get; set; }  
  9.         public string biodata { get; set; }  
  10.         public string intro { get; set; }       
  11.         public string profilepicture { get; set; }  
  12.         public string profilelink { get; set; }  
  13.         public string role { get; set; }  
  14.     }  
  15. }  
  1. services.AddCors(o => o.AddPolicy("charppolicy", builder =>  
  2.             {  
  3.                 builder.AllowAnyOrigin()  
  4.                        .AllowAnyMethod()  
  5.                        .AllowAnyHeader();  
  6.             }));  
  7.   
  8.  app.UseCors("charppolicy");  
We are done with the API.
 

Configuration for Ionic 4

 
First, install Node js (I recommend to use LTS version) and install Ionic with a single command using npm.
  1. npm install -g ionic  
Let's understand with one example. My definition for this project is the C-sharp Corner member book. 
 
There are three templates that are famous for the Ionic framework. You can choose anyone as per your requirement. In my case, I am using the highlighted one.
  1. ionic start csharpcornerauthor blank  
  2. ionic start csharpcornerauthor tabs  
  3. ionic start csharpcornerauthor sidemenu  
Now, it requires 2 pages to display member names and member information and one service which would help us to connect between the API and Ionic 4. Run the below commands.
  1. ionic g page pages/author  
  2. ionic g page pages/authordetail  
  3. ionic g service services/author  
Start with the service. Add the below code in the auther.service.ts file.
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient } from '@angular/common/http';  
  3. import { Observable } from 'rxjs';  
  4. import { map } from 'rxjs/operators';  
  5.   
  6. export enum SearchType {  
  7.   all = '',  
  8.   admin = 'Admin',  
  9.   editor = 'Editor',  
  10.   mvp = 'MVP',  
  11.   author = 'Author'  
  12. }  
  13.   
  14. @Injectable({  
  15.   providedIn: 'root'  
  16. })  
  17. export class AuthorService {  
  18.   url = 'https://localhost:44369/api/User/';  
  19.   
  20.   constructor(private http: HttpClient) { }  
  21.       
  22.   searchauthor(title: string, type: SearchType): Observable<any> {  
  23.     return this.http.get(`${this.url}?s=${encodeURI(title)}&st=${type}`).pipe(      
  24.       map(results => results)  
  25.     );  
  26.   }  
  27.   
  28.   getauthorProfile(id) {  
  29.     return this.http.get(`${this.url}?id=${id}`);  
  30.   }  
  31.    
  32. }  
Below is the code for auther.page.ts and auther.page.html respectively.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { AuthorService, SearchType } from './../../services/author.service';  
  3. import { Observable } from 'rxjs';  
  4.   
  5. @Component({  
  6.   selector: 'app-author',  
  7.   templateUrl: './author.page.html',  
  8.   styleUrls: ['./author.page.scss'],  
  9. })  
  10. export class AuthorPage implements OnInit {  
  11.   
  12.   results: Observable<any>;  
  13.   searchTerm: string = '';  
  14.   type: SearchType = SearchType.all;  
  15.    
  16.   constructor(private authorservice: AuthorService) { }  
  17.    
  18.   ngOnInit() { }  
  19.   
  20.   livesearch() {    
  21.     this.results = this.authorservice.searchauthor(this.searchTerm, this.type);  
  22.   }  
  23.   
  24. }  
  1. <ion-header>  
  2.   <ion-toolbar color="primary">  
  3.     <img src="https://csharpcorner-mindcrackerinc.netdna-ssl.com/App_Themes/CSharp/Images/SiteLogo.png">  
  4.     <ion-title style="margin-left: 142px;margin-top: -34px;">MEMBER BOOK</ion-title>  
  5.   </ion-toolbar>  
  6. </ion-header>  
  7.    
  8. <ion-content>  
  9.    
  10.   <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="livesearch($event)"></ion-searchbar>  
  11.    
  12.   <ion-item>  
  13.     <ion-label>Select Searchtype</ion-label>  
  14.     <ion-select [(ngModel)]="type" (ionChange)="livesearch($event)">  
  15.       <ion-select-option value="">All</ion-select-option>  
  16.       <ion-select-option value="Admin">Admin</ion-select-option>  
  17.       <ion-select-option value="Editor">Editor</ion-select-option>  
  18.       <ion-select-option value="MVP">MVPs</ion-select-option>  
  19.       <ion-select-option value="Author">Author</ion-select-option>  
  20.     </ion-select>  
  21.   </ion-item>  
  22.    
  23.   <ion-list>  
  24.     <ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'authors', item.id]">  
  25.       <ion-avatar slot="start">  
  26.         <img [src]="item.profilepicture">  
  27.       </ion-avatar>  
  28.       <ion-label text-wrap>  
  29.         <h3>{{ item.name }}</h3>  
  30.         <ion-icon name="locate"></ion-icon>  {{ item.location }}  
  31.       </ion-label>  
  32.        <ion-icon slot="end"  name="man"></ion-icon>{{item.role}}     
  33.     </ion-item>  
  34.    
  35.   </ion-list>  
  36.    
  37. </ion-content>  
For detailed page, we have to add the code for authordetail.page.ts and authordetail.page.html. It should look like below.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { AuthorService } from './../../services/author.service';  
  3. import { ActivatedRoute } from '@angular/router';  
  4.   
  5. @Component({  
  6.   selector: 'app-authordetail',  
  7.   templateUrl: './authordetail.page.html',  
  8.   styleUrls: ['./authordetail.page.scss'],  
  9. })  
  10. export class AuthordetailPage implements OnInit {  
  11.   
  12.   information = null;  
  13.    
  14.   constructor(private activatedRoute: ActivatedRoute, private authorService: AuthorService) { }  
  15.    
  16.   ngOnInit() {  
  17.       
  18.     let id = this.activatedRoute.snapshot.paramMap.get('id');  
  19.    
  20.     this.authorService.getauthorProfile(id).subscribe(result => {  
  21.       this.information = result;  
  22.     });  
  23.   }  
  24.    
  25.   openWebsite() {  
  26.     window.open(this.information[0].profilelink, '_blank');  
  27.   }  
  28.   
  29. }  
  1. <ion-header>  
  2.   <ion-toolbar color="primary">  
  3.     <ion-buttons slot="start">  
  4.       <ion-back-button defaultHref="/"></ion-back-button>  
  5.     </ion-buttons>  
  6.     <ion-title>c-sharp corner user profile detail</ion-title>  
  7.   </ion-toolbar>  
  8. </ion-header>  
  9.    
  10. <ion-content padding>  
  11.    
  12.   <ion-card *ngFor="let item of (information)">  
  13.     <ion-card-header>  
  14.          
  15.   
  16.       <ion-card-title>  
  17.           <ion-icon name="man"></ion-icon>  
  18.         {{ item.name }}  
  19.       </ion-card-title>  
  20.       <ion-card-subtitle class="subtitle">  
  21.         {{ item.intro }}  
  22.       </ion-card-subtitle>  
  23.     </ion-card-header>  
  24.     <ion-card-content text-center>  
  25.       <img [src]="item.profilepicture" class="info-img">  
  26.         
  27.       <ion-item lines="none" style="text-align: center">           
  28.           <ion-label>{{item.location}}</ion-label>  
  29.         </ion-item>  
  30.        
  31.         <ion-item >  
  32.             <ion-icon name="book"  slot="start"></ion-icon>  
  33.            
  34.             <ion-label text-wrap >{{ item.biodata }}</ion-label>  
  35.         </ion-item>  
  36.            
  37.       <ion-item >  
  38.           <ion-icon name="calendar" slot="start"></ion-icon>  
  39.          
  40.         <ion-label>{{item.joineddate}}</ion-label>  
  41.       </ion-item>  
  42.    
  43.       <ion-item >  
  44.         <ion-icon name="albums" slot="start"></ion-icon>  
  45.         <ion-label text-wrap>{{item.role}}</ion-label>  
  46.       </ion-item>  
  47.    
  48.       <ion-button expand="full" (click)="openWebsite()" >  
  49.         <ion-icon name="open" slot="start"></ion-icon>  
  50.         Profile Detail  
  51.       </ion-button>  
  52.     </ion-card-content>  
  53.   </ion-card>  
  54.     
  55. </ion-content>  
Add HttpClientModule in the app.module.ts file.
  1. import {HttpClientModule} from '@angular/common/http';      
  2. imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule]     
The following is the screenshot of the App folder.
 
Getting Started With Ionic 4, Angular And .NET Core 3
 
So far, we are done with the API project and created service with two pages. Service helps us to call the API and give appropriate data to the Ionic app. Also, we implemented a search functionality in it. Now, it's time to run the project. The command is here. 
  1. ionic serve  
Finally, below is the output of this small application.
 
Getting Started With Ionic 4, Angular And .NET Core 3
 
Getting Started With Ionic 4, Angular And .NET Core 3
 
I hope you guys learned something new. Keep learning!
 
 
Here are the links to my previous articles.


Similar Articles