Fomantic-UI in Angular project: ".popup is not a function"

Question

I'm trying to create an Angular + Fomantic-UI playground but I'm experiencing problem in importing Fomantic-UI into the Angular project.

Here is my StackBlitz: https://stackblitz.com/edit/angular-hcvmam

As you can see I do import jquery, fomantic-ui-css and their related typings and I'm trying to use one of the functionalities of Fomantic-UI (popup):

$('.bell.icon', this.el.nativeElement)['popup']({
    popup: $('.ui.popup', this.el.nativeElement),
    position: 'bottom right',
    on: 'click'
});

<i class="large blue bell icon"></i>

<div class="ui popup">
    <div class="ui middle aligned divided list">
        <div class="item" *ngFor="let alert of alerts" [@expandCollapse]>
            <div class="content">
                <div class="header">
                    {{alert.title}}
                </div>
                <div>
                    {{alert.desc}}
                </div>
            </div>
        </div>
    </div>
</div>

But it doesn't work: .popup is not a function

The same happens with other F-UI modules, such as modal, transition, dropdown and so on.

Can you figure out what is missing to make it working? If you do you can also answer this.

Answer 1

It looks like there's a problem when using fomantic and jquery libraries on stackblitz. I'm not sure why they don't work, but by adding the CDN link in the index.html and using

declare var $: JQueryStatic;

instead of

import $ from 'jquery';

you can use jquery with fomantic's additions in your code.

https://stackblitz.com/edit/angular-rjet1p

I get some errors in your code when running it, but they are outside the scope of this question.