leaflet map doesn't render properly in stepper

The solution with *ngIf should resolve the problem. You need to hide the map when switching to another step and show it again to reinvoke the (leafletMapReady) event. You may also need to wrap the code in the onMapReady method in setTimeout.

Here is an example:

HTML:

<mdb-stepper #stepper (stepChange)="onStepChange($event)">
    <mdb-step name="Step 1" [stepForm]="firstFormGroup">
      <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
    </mdb-step>
    <mdb-step name="Step 2" [stepForm]="secondFormGroup">
        <div *ngIf="showMap" style="height: 300px" leaflet [leafletOptions]="leafletOptions" (leafletMapReady)="onMapReady($event)"></div>
      <button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
      <button mdbBtn size="sm" color="secondary" (click)="stepper.previous()">BACK</button>
    </mdb-step>
    <mdb-step name="Step 3" label="Step 3 label">
      <p class="pl-2">Finish!</p>
      <div class="step-actions">
        <button mdbBtn  size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
      </div>
    </mdb-step>
  </mdb-stepper>

TS:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { latLng, tileLayer } from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  showMap = false;

  leafletOptions = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
  };

  ngOnInit() {
    this.firstFormGroup = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email])
    });
    this.secondFormGroup = new FormGroup({
      password: new FormControl('', Validators.required)
    });
  }

  get email() { return this.firstFormGroup.get('email'); }
  get password() { return this.secondFormGroup.get('password'); }

  onSubmit() {
    // do something here
  }

  onMapReady(map: any) {
    setTimeout(() => {
      map.invalidateSize();
    }, 0);
  }

  onStepChange(event: any) {
    if (event.activeStepIndex === 1) {
      this.showMap = true;
    }
  }
}