I want to customise and component that have an interaction with UI. I already change all necessary files, but in my new component I am confuse how to import so the bootstrap class are recognized in typescript. I just migrate from javascript to typescript, so this is what happen.

import { Component, OnInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html'
})
export class ModalComponent implements OnInit {
  modal: any;
  shown: false;
  constructor() {
    this.modal= new bootstrap.modal('#id', {
      keyboard: true
    });
    this.shown= false;
  }

  ngOnInit(): void {
    console.log('modal on init');
  }

  onClick(): void {

  }
}

CodePudding user response：

Here is some quick guide on how to open up a ng-bootstrap modal in you application:

1. Add ng-bootstrap to your angular application by running ng add @ng-bootstrap/ng-bootstrap.
2. Add NgbModalModule to the imports array of your app.module.ts.
3. Create a new component which contains the content of your modal (by running ng g c your/component/path/componentName
4. Pass the modal service of ng-bootstrap to the component where you want to open the modal by injecting it in your constructor: constructor(private modalService: NgbModal) {}
5. In your onClick function (or whereever you want to actually open the modal), include the following code: this.modalService.open(ComponentName);