Please add new toasts supports

[nanixne]

Recent bootstrap has new component toasts added and need us to initialize it. Could you add native support to it?

[thednp]

If you could link me to the page of their demo, that would be great.

[thednp]

I believe this isn't supported in the original plugins, so we won't implement it.

[nanixne]

https://getbootstrap.com/docs/4.2/components/toasts/

could you let me know how do you tell it original plugins or not? @thednp

[thednp]

We will analyze it and have it working in the following days or week. Seems a simple straight forward component. Thanks for the heads up.

[thednp]

I will reopen this and leave it this issue untouched until we have the original component closer to RC because I think it seems a bit unpolished.

[thednp]

OK @nanixne please download latest master and give it a test. Some considerations:

Initialization

• use var myToast = new Toast(document.querySelector('[data-dismiss="toast"]'), options );
• the <button type="button" class="close" data-dismiss="toast"> is the initialization element, it also holds initialization object
• options are/(should be) exactly the same as for the original plugin

Using Methods

• use myToast.hide(noTimer) to hide
• use myToast.show() to show
• use myToast.dispose() to hide and destroy the initialization

Events

• the events are exactly the same as for the original plugin
• the event target is the <div class="toast"> element, the parent of the <button type="button" class="close" data-dismiss="toast">

Please try and provide feedback.

[thednp]

@nanixne I'm still waiting for your approval on the new component functionality and features.

[roymilder]

hi @thednp

first of all thanks for your efforts on this library. i'm testing your toast plugin by implementing it as an angular component.

I have it working, so that looks promising. I will keep you posted on my progress, I'm going to spend the coming hours on this item, so you may expect some feedback.

I'm getting the following error message:

TypeError: globalObject[getComputedStyle] is not a function

caused by: node_modules/bootstrap.native/dist/bootstrap-native-v4.js#222

I'm probably forgetting to do something with transitionDuration, however the bootstrap docs are not mentioning this as a valid toast option.

If I manually set supportTransitions to false, everything works as expected and I can trigger a new toast by using the .show() method.

[thednp]

@roymilder I cannot confirm the issue, perhaps you have a test site? I've done a one hour translation of the original plugin into native JavaScript, did some tests and everything seem to work fine.

[roymilder]

@thednp https://github.com/roymilder/bootstrap-native-test it should be self explaining :)

[thednp]

Nop I'm not familiar with that Angular stuff ;)

[roymilder]

Lol :) just clone the repo, run npm serve browse to localhost:4200 you will see a test site with one button: hit it and you will see an error in your console.log

TypeError: globalObject[getComputedStyle] is not a function

this error relates to bootstrap-native-v4.js:218

      var duration = supportTransitions ? globalObject[getComputedStyle](element)[transitionDuration] : 0;

if you manually set

supportTransitions = false;

in bootstrap-native-v4.js

everything works well

Ah, and to explain what the button does:

    this._toast = new bsn.Toast(this.toast.nativeElement.querySelector('[data-dismiss="toast"]'), this._options);
    this._toast.show();

with this._options being:

  private _options = {
    animation: true,
    autohide: false,
    delay: 3000
  };

[roymilder]

after digging in the code; perhaps it has something to do with the angular way of selecting the element. I'll try a few things tomorrow and will let you know.

besides this one thing i have the toast component running within an angular component and it is working perfect so far.

so, thanks..

[thednp]

Alright @roymilder sorry I can't help much with Angular stuff :|

[thednp]

Any update on this guys? @roymilder & @nanixne

[roymilder]

@thednp haven't figured out the weird bug regarding the supportTransitions setting yet. However I did test the toast support and it works fine! haven't found any other bug so far.

[thednp]

@thednp haven't figured out the weird bug regarding the supportTransitions setting yet. However I did test the toast support and it works fine! haven't found any other bug so far.

Probably because there is no browser/mock-up browser in place?

[nanixne]

@thednp I tested on angular 7, it works! super duper!, I think for normal html page it should work too.

1. I tested animation, autohide and delay all three options work!
2. method show and hide work! I did not test dispose, but I think it will work as expected!

you are super! Thanks, I am ready for new release!

[nanixne]

@roymilder I took look at your code; it missed initialization part. new Toast(element, options) should be called some where before it is invoked.

[roymilder]

@roymilder I took look at your code; it missed initialization part. new Toast(element, options) should be called some where before it is invoked.

Thanks for the feedback @nanixne, however, the initialization is on line 34 of toast.component.ts. The toast is working, just the transition is failing.

[thednp]

So @roymilder perhaps your CSS3 isn't right? I haven't checked but since our component uses transitionEnd to mark the end of transitions, might explain and hopefully lead to a solution in your app.

[roymilder]

my import handling was wrong: after adding the library to my typings.d.ts and calling Toast like this: new (\<any>window).Toast(this.toast.nativeElement, this._options);

globalObject was correctly set and everything works fine.

Haven't found any bugs related to the Toast. So, thanks!

---

https://stackoverflow.com/questions/37430055/typescript-attach-module-namespaces-to-window

[thednp]

That's great, I think we can close this as solved, we implemented the component and was tested in a "real world" environment, other issues will take new threads.

Cheers.

[shamseen]

@roymilder hi, sorry i'm resurrecting this old issue but i'd like to know how you implemented bootstrap native in angular? i'm a complete newbie to angular 7 and cannot for the life of me figure it out. are you somehow importing the node module into app.component?

[roymilder]

@roymilder hi, sorry i'm resurrecting this old issue but i'd like to know how you implemented bootstrap native in angular? i'm a complete newbie to angular 7 and cannot for the life of me figure it out. are you somehow importing the node module into app.component?

Sure, not 100% sure that my way is the most correct way. But it works.

in src/typings.d.ts

add:

declare module 'bootstrap.native/dist/bootstrap-native-v4';

in angular.json add:

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.scss"
            ],
            **"scripts": [
              "node_modules/bootstrap.native/dist/bootstrap-native-v4.js"
            ]**
          },

So after including the library in your angular app, you should create a component that handles the element from your template file:

toast.component.html

<div class="toast" **#toast** role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body p-3">

toast content
  </div>
</div>

toast exposes it to the component:

@Component({
  selector: 'app-toast',
  templateUrl: './toast.component.html',
})
export class ToastComponent implements OnInit, OnDestroy, AfterViewInit {
  **@ViewChild('toast', {read: ElementRef}) toast: ElementRef;** <== here you have the element in your component
  @Input() data: ToastMessage;
  @Output() closed = new EventEmitter<boolean>();

  public _toast: any;
  private timer: any;
  private delay = 3000; // delay
  private _options = {
    animation: true
  };

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    **this._toast = new (<any>window).Toast(this.toast.nativeElement, this._options);** <= make a toast of it!

    switch (this.data.type) {
      case 'error':
      case 'warning':
        this.delay = 0;
        break;
    }
    this.show(this.delay);
  }

  ngOnDestroy() {
    this._toast.dispose();
  }

  show(delay: number) {
    this._toast.show();

    if (this.timer) {
      this.timer.cancel();
    }

    if (delay) {
      this.timer = setTimeout(() => {
        this.close();
      }, delay);
    }
  }

  close() {

    this._toast.hide();
    this._toast.dispose();
    this.closed.emit(true);
  }

Hope this is helpful!

[Lucas-Palomo]

I had this problem to open modal, but I fixed it following the instructions of @roymilder .

I declared the bootstrap.native in angular.json and just putting the code below in the click action:

const modal = document.getElementById('myModal');
const modalInstance = new  (<any>window).Modal(modal);
modalInstance.toggle();

and It works! Thank you all involved in this issue.