CODEWITHSUNDEEP
angulartypescriptbootstrap-5
javadandroid
javadandroid

Reputation: 5

Cannot find name 'bootstrap'

When I Want to add boot strap toast in angular Component It says: "Cannot find name 'bootstrap'"

HTML(Like BootstrapDocumentation):

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

angular ts file code:

      ngOnInit(): void {
    const toastTrigger = document.getElementById('liveToastBtn')
    const toastLiveExample = document.getElementById('liveToast')
    if (toastTrigger) {
      toastTrigger.addEventListener('click', () => {
        const toast = new bootstrap.Toast(toastLiveExample)

        toast.show()
      })
    }
  }

Error ScreenShot

Upvotes: 0

Views: 1156

Answers (1)

metodribic
metodribic

Reputation: 1729

Since you probably didn't import or initialize bootstrap anywhere and it is not a global variable either, typescript compiler can not find it anywhere and hence the error. Import Toast directly from bootstrap and use it without bootstrap prefix:

import { Toast } from 'bootstrap';

and then

const toast = new Toast(toastLiveExample)

Most likely you will also have to install @types/bootstrap

Upvotes: 1

Related Questions