Modal Property Undefined #6576

I'm trying to create an Angular component similar to the UsersComponent. I created a modal following the example of the CreateOrEditUserModalComponent, but when I attempt to display the modal, I get the following error: "ERROR TypeError: Cannot read property 'show' of undefined"

Here is my modal:

import { Component, ViewChild, EventEmitter, ElementRef, Output, Injector } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ModalDirective } from 'ngx-bootstrap';
import { PartEditDto, PartServiceProxy, CreateOrUpdatePartInput } from '@shared/service-proxies/service-proxies';
import * as _ from 'lodash';
import { finalize } from 'rxjs/operators';

@Component({
    selector: 'createOrEditPartModal',
    templateUrl: './create-or-edit-part-modal.component.html'
})
export class CreateOrEditPartModalComponent extends AppComponentBase {

    @ViewChild('numberInput') numberInput: ElementRef;
    @ViewChild('descriptionInput') descriptionInput: ElementRef;
    @ViewChild('materialInput') materialInput: ElementRef;
    @ViewChild('createOrEditModal') modal: ModalDirective;

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any> ();

    active = false;
    saving = false;

    part: PartEditDto = new PartEditDto();

    constructor(
        injector: Injector,
        private _partService: PartServiceProxy
    ) {
        super(injector);
    }

    show(partId?: number): void {
        if (!partId) {
            this.active = true;
        }

        this._partService.getPartForEdit(partId).subscribe(partResult => {
            this.part = partResult.part;

            if (partId) {
                this.active = true;
            }

            this.modal.show();
        });
    }

    onShown(): void {
        document.getElementById('Number').focus();
    }

    save(): void {
        let input = new CreateOrUpdatePartInput();

        input.part = this.part;

        this.saving = true;
        this._partService.createOrUpdatePart(input)
            .pipe(finalize(() => { this.saving = false; }))
            .subscribe(() => {
                this.notify.info(this.l('SavedSuccessfully'));
                this.close();
                this.modalSave.emit(null);
            });
    }

    close(): void {
        this.active = false;
        this.modal.hide();
    }
}

Here are the declarations in 'main.module.ts':

declarations: [
        DashboardComponent,
        PartsComponent,
        CreateOrEditPartModalComponent
    ]

Finally, here is the component where 'createOrEditPartModal' is undefined:

import { Component, Injector, ViewChild, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import { PartServiceProxy } from '@shared/service-proxies/service-proxies';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { Paginator } from 'primeng/components/paginator/paginator';
import { Table } from 'primeng/components/table/table';
import { finalize } from 'rxjs/operators';
import { CreateOrEditPartModalComponent } from './create-or-edit-part-modal.component';

@Component({
    templateUrl: './parts.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})
export class PartsComponent extends AppComponentBase {

    @ViewChild('createOrEditPartModal') createOrEditPartModal: CreateOrEditPartModalComponent;
    @ViewChild('dataTable') dataTable: Table;
    @ViewChild('paginator') paginator: Paginator;

    //Filters
    filterText = '';

    constructor(
        injector: Injector,
        private _partServiceProxy: PartServiceProxy,
        private _activatedRoute: ActivatedRoute
    ) {
        super(injector);
        this.filterText = this._activatedRoute.snapshot.queryParams['filterText'] || '';
    }

    getParts(event?: LazyLoadEvent) {
        if (this.primengTableHelper.shouldResetPaging(event)) {
            this.paginator.changePage(0);

            return;
        }

        this.primengTableHelper.showLoadingIndicator();

        this._partServiceProxy.getParts(
            this.filterText,
            this.primengTableHelper.getSorting(this.dataTable),
            this.primengTableHelper.getMaxResultCount(this.paginator, event),
            this.primengTableHelper.getSkipCount(this.paginator, event)
        ).pipe(finalize(() => this.primengTableHelper.hideLoadingIndicator())).subscribe(result => {
            this.primengTableHelper.totalRecordsCount = result.totalCount;
            this.primengTableHelper.records = result.items;
            this.primengTableHelper.hideLoadingIndicator();
        });
    }

    reloadPage(): void {
        this.paginator.changePage(this.paginator.getPage());
    }

    createPart(): void {
        this.createOrEditPartModal.show();
    }
}

I cannot figure out what I am doing incorrectly. Is there an obvious mistake?