Модальность ng-bootstrap запущена при нажатии другого компонента

Я хочу открыть модальное окно с деталями элемента с помощью ng-bootstrap после того, как был нажат другой компонент, но у меня проблема с передачей аргумента component.

Я пробовал использовать предложение из другой темы здесь, чтобы использовать @ViewChild('content') content;, но это не работает, все, что я получаю, это пустое модальное окно.

app.component.ts:

import {Component, OnInit, ViewChild} from '@angular/core';
import {ModalComponent} from './modal/modal.component';

export class AppComponent implements OnInit {

  @ViewChild('content') content;
  @ViewChild(ModalComponent) modalCmp;
  modalBeer;

  showModal(item) {
    this.modalBeer = item;
    this.modalCmp.open(this.content);
  }

}

приложение.component.html:

<main>
  <div class="container">
    <div class="row align-items-stretch">
      <app-grid-item
        *ngFor="let item of beers"
        [beer]="item"
        (click)="showModal(item)"
        class="col-sm-4">
      </app-grid-item>
    </div>
  </div>
  <app-modal [beer]="modalBeer"></app-modal>
</main>

modal.component.ts:

import {Component, Input, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

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

  closeResult: string;

  @Input() beer;

  constructor(private modalService: NgbModal) {
  }

  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed`;
    });
  }
}

modal.component.html:

<ng-template #content let-c="close" let-d="dismiss">
[...]
</ng-template>