How to create custom draw button for ngx-leaflet with ngx-leaflet-draw

I want to create a custom button, which enables the Polyline drawer on click. it's similar to How to click a button and start a new polygon without using the Leaflet.draw UI, but I want to do that with angular (7), ngx-leaflet and ngx-leaflet-draw.

Here is my adapted code from the link for my angular project:

// app.component.ts
import * as L from 'leaflet';

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

    allDrawnItems = new L.FeatureGroup();
    options = {
        layers: [
            tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {         maxZoom: 18, attribution: '...' })
        ],
        zoom: 5,
        center: latLng(51.9487949, 7.6237527)
    };
    drawOptions = {
        position: 'bottomright',
        draw: {
            circlemarker: false,
            polyline: true
        },
        featureGroup: this.allDrawnItems
    }

    constructor() {}
    ngOnInit() {
        this.options = {
            layers: [
               tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '...' })
            ],
            zoom: 12,
            center: latLng(51.9487949, 7.6237527)
        };
        this.drawOptions = {
            position: 'bottomright',
            draw: {
                circlemarker: false,
                polyline: true
            },
            featureGroup: this.allDrawnItems
        }
    }

    btn_drawPolygon() {
        var polylineDrawer = new L.Draw.Polyline(this.map); // <-- throws error
        polylineDrawer.enable(); 
    }

    onDrawReady(event) {
        console.log(event.layer);
    }
}

and here is my html:

// app.component.html
<div style="text-align:center; margin-top: 64px;" fxFlex>
    <div fxFlex
         leaflet 
         [leafletOptions]="options">
         <div
            leafletDraw
            [leafletDrawOptions]="drawOptions"
            (leafletDrawCreated)="onDrawReady($event)"></div>
</div>
<button (click)="btn_drawPolygon()" mat-raised-button color="primary" fxFlex style="height: 38px;">draw polyline</button>

If I click the "draw polyline" button, I get the error:

ERROR TypeError: Cannot read property 'overlayPane' of undefined at NewClass.initialize (leaflet.draw.js:8) at NewClass.initialize (leaflet.draw.js:8) at new NewClass (leaflet-src.js:301)

What's wrong at my code?

alright. I forgot to bind the map using the leafletMapReady function:

// app.component.html
<div fxFlex
     leaflet 
     [leafletOptions]="options"
     (leafletMapReady)="onMapReady($event)">       <!-- added -->
     <div
        leafletDraw
        [leafletDrawOptions]="drawOptions"
        (leafletDrawCreated)="onDrawReady($event)"></div>

and after making use of the onMapReady-function and binding the map to this.map, it works like a charm:

onMapReady(map: L.Map) {
    console.log("ON MAP READY CALLED");
    console.log(this.map);
    this.map = map;
};