Refresh tab from another

Question

I develop an Angular application using Typescript and I wonder how to refresh a tab from another.

I have two pages A and B: I have a button in A to reach B and when I clicked this button I want to reload B

page A

import {Component, OnInit} from '@angular/core';
import {UserDto} from '../api/models/user-dto';
import {UserService} from '../services/user.service';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage  implements OnInit{
  user: UserDto;
  win: any;
  newTab: any;

  constructor(
      private userService: UserService,
  ) {}

  display(){
    return localStorage.getItem('userMail') != null;
  }

  ngOnInit(): void {
    if (localStorage.getItem('userMail') !== null) {
      this.getUser();
    }
  }
  getUser() {
    this.userService.getUserByEmail(localStorage.getItem('userMail'))
        .subscribe(user => this.user = user,
            error => console.log('error'),
            () => console.log('complete'));
  }

  refreshMatch() {
    //i want to refresh match page (page B) here
  }
}

//html part

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab2"  *ngIf="display()" (click)="refreshMatch()">
      <ion-icon name="chatbox-ellipses-outline"></ion-icon>
      <ion-label>Matchs</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab1">
      <ion-icon name="home-outline"></ion-icon>
      <ion-label>Accueil</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="me"  *ngIf="display()">
      <ion-icon name="person-circle-outline"></ion-icon>
      <ion-label>Moi</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

page B

import {Component, ElementRef, OnInit, Renderer2, ViewChild, } from '@angular/core';
import {UserDto} from '../api/models/user-dto';
import {UserService} from '../services/user.service';


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

  matchs = [];

  // replace with user
  match = 'utilisateur';

  user: UserDto;

  constructor(private userService: UserService, ) {}

  async ngOnInit() {
    if (localStorage.getItem('userMail') !== null) {
      this.getUser();
      this.matchs = await this.getMatchs();
      console.log(this.matchs);
    }
  }

  getMatchs() {
    return this.userService.getUserMatch(localStorage.getItem('userMail')).toPromise();
  }

  getUser() {
    this.userService.getUserByEmail(localStorage.getItem('userMail'))
        .subscribe(user => this.user = user,
            error => console.log('error'),
            () => console.log('complete'));
  }

  refresh(): void {
    window.location.reload();
  }
}

//html

<ion-header [translucent]="true">
  <ion-toolbar><ion-title>Matchs</ion-title></ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-button shape="round" size="small" (click)="refresh()"><ion-icon name="reload-outline"></ion-icon>refresh</ion-button>

  <ion-card *ngFor="let user of matchs">
    <ion-card-title>{{user.name}} {{user.family | uppercase}}</ion-card-title>
    <ion-card-content>
      <ion-label>{{user.country}}</ion-label>
    </ion-card-content>
  </ion-card>

</ion-content>

I have a method to generate components which I call in ngOnInit method but I want to call the method which generate component in a OnShow style method

How can I do that in Typescript, please