Issue: I am encountering a problem with a button inside a component that is supposed to open another component as a modal. The button successfully opens the modal, but I am unable to interact with any elements inside it, including inputs and the close button (cross). I have already included the component as an entryComponent in the App module:
entryComponents: [NeworderComponent]
Code snippet for the component triggering the modal window (.html)
<button type="button" class="btn btn-success text-center" (click)="openew(rank?.productId)">Order</button>
Code snippet for the component triggering the modal window (.ts)
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
export class TopproductsComponent implements OnInit {
constructor(private orderservice: OrderService,
private productService: ProductService,
private activatedRoute: ActivatedRoute,
private modalService: NgbModal,
private router: Router) { }
openew(id) {
const modalRef = this.modalService.open(NeworderComponent, {size:"lg"});
modalRef.componentInstance.title = 'neworder';
}
}
Code snippet for the modal component (.html)
<div class="modal-dialog modal-lg">
<div class="modal-header">
<h4 class="modal-title">New Order</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="mt-3">
<form #new="ngForm" class="mt-3 text-center" id="form" (ngSubmit)="onSubmit(new)">
<div class="text-center">
<div class="form-group">
<label for="prod_edit">Product</label>
<select class="form-control" [(ngModel)]="product" [ngModelOptions]="{standalone: true}">
<option *ngFor="let product of products" value="{{ product?.id }}">{{ product?.name }}</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Quantity</label>
<input type="text" name="quantity" class="form-control text-center mt-2" [(ngModel)]="quantity" [ngModelOptions]="{standalone: true}">
</div>
</div>
<button type="submit" class="btn btn-success w-50 mt-2">Submit</button>
</form>
</div>
</div>
</div>
Code snippet for the modal component (.ts)
import { Component, OnInit, Input} from '@angular/core';
import { NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-neworder',
templateUrl: './neworder.component.html',
styleUrls: ['./neworder.component.css']
})
export class NeworderComponent implements OnInit {
@Input() title = `Information`;
constructor(private orderservice: OrderService,
private productService: ProductService,
public activeModal: NgbActiveModal) { }
ngOnInit() {
this.productService.getProducts().subscribe(products => {
this.products = products;
console.log(this.products);
});
}
}