Hi I’m really new in Ionic. I am developing university mobile app which is use PHP for backend. I was able to create university page that display list of universities.
My problem is fetching specific data by ID from MySQL database through api without showing all data in browser link. When user click one of the university, it will display details on selected university. But in browser link, it shows all data that I pass.
I just want to pass ID when click university, and it will display all the details of selected university.
home1page.html
<ion-header>
<ion-toolbar color="primary">
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="ion-padding-horizontal wrapper">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-baseline">
<ion-col size="6">
<h4 class="title">
Education Level
</h4>
</ion-col>
<ion-col size="6">
<h4 class="more ion-text-end">
Show more
</h4>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col size="14.5">
<ion-slides [options]="categories">
<ion-slide *ngFor="let educategory of educategorys">
<ion-card class="category" color="warning">
<ion-card-header class="ion-text-center">
<ion-icon src=""></ion-icon>
<ion-card-title>{{educategory.eduName}}</ion-card-title>
<ion-card-subtitle></ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<div class="ion-padding wrapper">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-baseline">
<ion-col size="6">
<h4 class="title">
Universities
</h4>
</ion-col>
<ion-col size="6" (click)="goToUniversity()">
<h4 class="more ion-text-end">
View more
</h4>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col size="12">
<ion-slides [options]="options">
<ion-slide *ngFor="let university of universitys">
<ion-card class="card" >
<ion-card-content class="ion-text-left" >
<div class="img-wrapper">
<ion-img src="http://localhost/crud_api/image/universityPIC/{{university.Image}}" alt="Snow" (click)="getUniversitys(university)"></ion-img>
</div>
<ion-card-title class="title"> {{university.uniName}}</ion-card-title>
<ion-card-subtitle> {{university.description}}</ion-card-subtitle>
<ion-card-subtitle>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</ion-card-subtitle>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<div class="ion-padding-horizontal wrapper">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-baseline">
<ion-col size="6">
<h4 class="title">
Courses
</h4>
</ion-col>
<ion-col size="6">
<h4 class="more ion-text-end">
Show more
</h4>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col size="12">
<ion-slides [options]="options">
<ion-slide *ngFor="let course of course" >
<ion-card class="card">
<ion-card-content class="ion-text-left">
<div class="img-wrapper">
<ion-img src="https://images.pexels.com/photos/109275/pexels-photo-109275.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"></ion-img>
</div>
<ion-card-title class="title">{{course.course_Name}}</ion-card-title>
<ion-card-subtitle>{{course.description}}</ion-card-subtitle>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
home1page.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';
import { NavController, NavParams } from '@ionic/angular';
import { University, UniversityService } from '../services/university.service';
import { EducategoryService } from '../services/educategory.services';
import { CourseService } from '../course/course.servicess';
@Component({
selector: 'app-home1',
templateUrl: './home1.page.html',
styleUrls: ['./home1.page.scss'],
providers: [NavParams]
})
export class Home1Page {
universitys: any;
uniID:any;
educategorys: any;
course: any[];
constructor(private route: Router, public navCtrl: NavController, private service : UniversityService, private services: EducategoryService, private servicess: CourseService, public params: NavParams) {
}
getUniversitys(uniID){
console.log(uniID)
const navigationExtras: NavigationExtras= {
queryParams:{
data:JSON.stringify(uniID)
}
}
this.route.navigate(['universityDetails'], navigationExtras)
}
goToUniversity(){
this.route.navigate(['/university'])
}
options = {
centeredSlides: true,
slidesPerView: 1,
spaceBetween: -50,
};
categories = {
slidesPerView: 2.0,
};
ngOnInit() {
this.service.getAll().subscribe(response =>{
console.log(response);
this.universitys = response;
});
this.services.getAll().subscribe(response =>{
console.log(response);
this.educategorys= response;
});
this.servicess.getAll().subscribe(response =>{
console.log(response);
this.course= response;
});
}
}
universityDetails.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NavParams } from '@ionic/angular';
import { UniversityDetailsService } from '../services/universitydetails.service';
@Component({
selector: 'app-universityDetails',
templateUrl: './universityDetails.page.html',
styleUrls: ['./universityDetails.page.scss'],
providers: [NavParams]
})
export class UniversityDetailsPage implements OnInit {
universitys: any;
uniID: any;
data: any;
constructor(public params: NavParams, private service: UniversityDetailsService, private activatedRoute: ActivatedRoute, private router: Router) {
this.activatedRoute.queryParams.subscribe(params =>{
if ( params.data ){
this.uniID= JSON.parse(params.data);
console.log(this.uniID);
console.log(params.data);
}
});
}
ngOnInit() { }
}
1 post - 1 participant