How not to show all data in browser link

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() { }
}

I think the most productive use of your time at this point would be to go through the Tour of Heroes. Its problem domain is very functionally similar to yours, and emulating its style carefully will give you instincts for idiomatic Angular and help you avoid troublesome habits like falling into the trap of abusing any.

Thank you for reply. I solved my problem .