CODEWITHSUNDEEP
angulartypescriptionic4
Cole
Cole

Reputation: 39

Angular: How do I reload a page or trigger a function when navigating to it again?

I have 2 pages, page 1 is a calendar view, page 2 is a form to add events to the calendar. When I add events from the form page, store them and redirect back to the calendar page, the calendar page remains empty until the page is reloaded or the app is restarted. So I need a way to trigger some code to populate the calendar, pass the added event back to the calendar view, or reload the page. Preferably the first option. How would I go about doing this? How can I tell some code to trigger after returning from page 2?

Calendar page

import { AppointmentListModal } from './../modals/appointment-list/appointment-list.page';
import { AddEventPage } from './../modals/add-event/add-event.page';
import { Component, ViewChild, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { CalendarComponent } from 'ionic2-calendar/calendar';
import { AlertController, ModalController } from '@ionic/angular';
import { Storage } from '@ionic/storage';
import { ProvidersService } from '../providers.service';
import { EventsService } from '../events.service';

@Component({
  selector: 'app-calendar',
  templateUrl: 'calendar.page.html',
  styleUrls: ['calendar.page.scss'],
})
export class CalendarPage implements OnInit {
  constructor(){}

  reloadEvents(){
     //reload event logic
  }
}

import { AddEventPage } from './../add-event/add-event.page';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { CalendarPage } from './calendar.page';
import { NgCalendarModule  } from 'ionic2-calendar';

import { AddEventPageModule } from '../add-event/add-event.module';

import { AppointmentListModalModule } from '../modals/appointment-list/appointment-list.module';
import { AddEventModalModule } from '../modals/add-event/add-event.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AppointmentListModalModule,
    AddEventModalModule,
    RouterModule.forChild([
      {
        path: '',
        component: CalendarPage
      }
    ]),
    NgCalendarModule
  ],
  declarations: [CalendarPage]
})
export class CalendarPageModule {}

import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
import { Storage } from '@ionic/storage';
import { EventsService } from '../events.service';
import {Router} from "@angular/router"

@Component({
  selector: 'app-add-event',
  templateUrl: './add-event.page.html',
  styleUrls: ['./add-event.page.scss'],
})
export class AddEventPage {

  constructor(
    private s: Storage,
    private eventService: EventsService,
    private router: Router) {
    this.storage = s;
  }

  addEvent(){
    //logic that saves the added event from a form
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { AddEventPage } from './add-event.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: AddEventPage
      }
    ])
  ],
  declarations: [
    AddEventPage
  ]
})
export class AddEventPageModule {}

I just need to know how to use processes from angular to let the page know to do something.

Upvotes: 1

Views: 1122

Answers (3)

Cole
Cole

Reputation: 39

I ended up creating a service with a subject. That subject is then passed my calendar, then when I call subject.next(event) from the service in the form page it triggers the needed function to update my calendar on the other page.

Upvotes: 1

Taodim
Taodim

Reputation: 16

If your page 2 is a dialog, one way I usually do it is using a dialog ref on page 1.

For example, in page 1, there's a function to open page 2 as a dialog

addEventForm(date: Date){
     const dialogRef = this.matDialog.open(SomeFormComponent, { //given MatDialog var
      width: '50%',
      data: date
     });

     dialogRef.afterClosed().subscribe(result => {
      if(result == 'added') reloadPage();
     }
}

And something like this in page 2 component

var eventAdded = false; //bind this to an event on html side

closeForm() { //if a the "close" button is pressed
 if(eventAdded) this.dialogRef.close('added');
 else this.dialogRef.close('cancelled');
}

The form will return "added" to Page 1, which will trigger the reloadPage() function. Go here for more information about Material Dialogs

Upvotes: 0

Reza
Reza

Reputation: 19933

You have multiple options, here is two of them

1 - create a service, with Observable and BehaviorSubject in it and a notify method, then let your calendar comp subscribe to that service observable, in your form call service.notify and pass the data (or let service fetch data again), then since your calendar is ready from service it will show latest data

2 - using ngrx (or other redux) to have central data store, and your component subscribe to store, and dispatch an action on your form

Upvotes: 1

Related Questions