Bootstrap 4.1 in angular 4

Question

How to properly install bootstrap 4 from angular cli in order for all bootstrap components to work?

I was use the following commands:

npm install --save jquery
npm install --save popper.js
npm install --save bootstrap

and config the following in angular-cli.json file:

   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]

The popover and tooltips doesn't works.. but the bootstrap css is working!

Thanks!

Take a look at ng-bootstrap. It works better with Angular than the jQuery version of the code. — ConnorsFan
@AlejoDev Try to include bootstrap.js instead of bootstrap.min.js file . — mohamedvall

Jason Goemaat Jason Goemaat · Accepted Answer · 2018-04-14T03:34:42

Tooltips are opt-in for performance reasons, so you need to call it for the elements:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

This will only set tooltips on the elements present when the call is made however. So if you just call this when your app loads, the elements in all your components don't exist yet. I think you would need to call it in NgAfterViewInit, and you would probably need a ViewChild for the element.

A better way would be to create a directive that would call it on any component the directive is placed on (stackblitz link)...

import { Directive, ElementRef } from '@angular/core';

declare var $: any;

// https://angular.io/guide/attribute-directives
@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  constructor(er: ElementRef) {
    $(er.nativeElement).tooltip();
  }
}

HTML:

<button data-placement="top" title="Tooltip on top" appTooltip>
  This button has a tooltip
</button>

Bootstrap 4.1 in angular 4

1 Answers