Remove header and footer


I wanted to know how to remove the footer and the header only on one page, to remove the two white blocks on the top and the bottom of my page

  constructor(  private router: Route) {
      (event: any) => {
        if (event instanceof NavigationEnd) {
          if (this.router.url == 'login') {
           this.show_footer = false;
          this.show_header = false;


<app-header *ngIf="show_header"></app-header>
<app-footer *ngIf="show_footer"></app-footer>

How is your Page designed? Normally Header and Footer are included in the HTML, so you can just remove them. Please post the HTML of this specific Page.

This is my HTML :

<div class="padding">
  <ion-buttons style="margin-top: 5vw;">
    <ion-button (click)="closeModal()">
      <ion-icon slot="icon-only" style="color: black;" name="close"></ion-icon>
    <div class="logo">
      <ion-icon color="light" name="person-circle"></ion-icon>
      <!-- <ion-icon color="light" name="contact"></ion-icon> -->
      <!-- <ion-icon color="light" name="cloudy-night"></ion-icon> -->
      <!-- <img src="../../assets/logo.png"> -->
    <form [formGroup]="myGroup" (ngSubmit)="submitForm()" novalidate>
    <ion-item >
      <ion-label color="light">Email</ion-label>
      <ion-input color="light" name="email" type="mail" placeholder=""></ion-input>

      <ion-label color="light">Mot de passe</ion-label>
      <ion-input color="light" name="password" type="password" placeholder="Mot de passe"></ion-input>

    <ion-item lines="none">
      <ion-button color="light" slot="end" fill="clear">Mot de passe oublié ?</ion-button>

    <ion-button type="submit" color="light" expand="block" shape="round" fill="outline">Connexion</ion-button>
    <ion-button color="dark" expand="block" shape="round">Inscription</ion-button>

Where do you create Header and Footer?

It is a modal I deleted the header. And the footer, no basic idea when I generate the page it does not appear

If you can create a reproducable repo i can have a look

remove margin-top on your modal close button its generate white space in your header area.

try to debug your footer space, it is same as the header

It’s done for the header, it works perfectly.

On the other hand for the footer, I can’t see where it could come from

try to run your application in the browser and find unnecessary white space using inspect element tool

In my browser I don’t have this space…

connect your mobile using data cable and then type this url “chrome://inspect/#devices.
then you will find whats wrong with your app

I solved the problem by forcing my app to be in portrait :smile: