how to save id from an item to show a specific data on the next page (angular 4)

Question

I have a school list which im getting from a web service, and a dashboard page, what i want is when the user clicks on a specific school is to open the dashboard page but it will fetch data regarding the selected school, so its kind of saving the id of the school and calling it back in the next page (dashboard) to fetch the data of the school inside it,

I want to know how can i do that in angular 4

and here are all the codes you would need

html for school list component:

<div class="col-md-12 row" style="text-align: center;">
    <div class="icon1 school-background1" routerLink="/dashboard" 
name="school" *ngFor="let school of name">
      <h6 class="online-active" >&#9679; Active</h6>
      <img src="http://crm.easyschools.org/uploads/{{school.logo}}" 
alt="{{school.name}}">
      <h6  class="logo-desc"  name="name" >{{school.name}}</h6>
    </div>
  </div>

school list ts:

export class SchoolListComponent implements OnInit {
name: any[] = []; 
id: any[] = []; 
logo: any[] = []; 

constructor(private _http: HttpClient) { 
 this.schoolList();
}

ngOnInit(): void {
}
private schoolList() {
return 



 this._http.get('http://crm.easyschools.org/api/en/getschools/getSchools')
  .subscribe(school => {
    this.logo = school.logo;
    this.id = school.data;
    this.name = school.data;
     console.log(school.data);
  });
}
}

dashboard html component

<div class="icon">
      <a routerLink="/aisattendanceteacher" style="color: black;">

      <img src="../../../../assets/Easy-school-
assets/svgs/Attendance.svg" >
      <p class="the-h4">Attendance</p>
      </a>
    </div>
    <div class="icon">
      <a routerLink="/aisgrades" style="color: black;">
        <img src="../../../../assets/Easy-school-
assets/svgs/Grades.svg" >
        <p class="the-h4">Grades</p>
      </a>
      </div>
      <div class="icon">
        <a routerLink="/transcript" style="color: black;">
          <img src="../../../../assets/Easy-school-
assets/svgs/Grades.svg" >
          <p class="the-h4">Transcripts</p>
        </a>
      </div>

dashboard ts:

export class DashBoardComponent implements OnInit {


constructor() {

}

ngOnInit(): void {

}

}

for example, i clicked on x school, so it navigates to the dashboard and will fetch at the same time the data for this school based on its id

this is the api for a single school

http://crm.easyschools.org/api/en/getschools/singleSchool

if you opened it on postman you will see that the id is required to fetch a data from a single school, you can write 1 to test

If something is not clear or you want a specific code just tell me and i will update you with any details you want

you can do it in 2 simple ways: using a globalVariable or using a postMessage to the next page. Is that what you want to do? — Luca Taccagni, Feb 07 '18 at 11:28
yes this is what i want but can you describe to me what is the postMessage? — Mohamed Wahshey, Feb 07 '18 at 11:45
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage — Luca Taccagni, Feb 07 '18 at 13:12
no, i put the route to be routerLink="/dashboard/{{school.id}}" so it saved the id of the school but when i click inside anything in the dashboard using the same method it doesnt save the id — Mohamed Wahshey, Feb 08 '18 at 12:04
i didnt try the post message yet, i read the way i used in angular doc, more easier but stuck at this part. — Mohamed Wahshey, Feb 08 '18 at 12:05
try using post message.. However, you save your ID inside a variable in dashboard? — Luca Taccagni, Feb 08 '18 at 16:51

score 0 · Answer 1 · answered Feb 07 '18 at 13:17

I'll write this answer to permit you to close your question (if solved of course) after reading my comment:

you can do it in 2 simple ways: using a globalVariable or using a postMessage to the next page.

PostMessage example

from parent window: window.postMessage(myMessage)

from child window: ngAfterViewInit(): void { window.addEventListener('message', event => { // do what you want }

remeber that Cross Origin message need to have origins specified, but you'll find everything you need here: developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

hope it helps

how to save id from an item to show a specific data on the next page (angular 4)

1 Answers1