angular ngFor call javascript

Question

I having HTML code like this

<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
    <div class="owl-stage" *ngFor="let product of products; let i=index;">
        <div class="owl-item">
            <carouselFixture [stream]="product.stream" *ngIf="product.viewModelType == 'ProductSummary'" ></carouselFixture>
        </div>
    </div>
</div>

This is working fine. The problem I face is when the new product is added immediately it has to be shown in the owl carousel... actually it is loading but wrongly as shown in the image below

So to solve the problem we need to call the below add function in ngFor

$('#add').on('click', function () {
        var html = '<div class=\"item\"><carouselFixture 
        [stream]="product.stream" *ngIf="product.viewModelType == 
       'ProductSummary'" ></carouselFixture></div>';
        console.log(html);
        owl.trigger('add.owl.carousel', [html, 0])
            .trigger('refresh.owl.carousel');
    });

Can anyone tell me how to call this 'add' function...

It should work fine if you add the newly created item to `products` array. You don't need the jQuery click handler. — Gunner, Sep 10 '18 at 05:11
Its not working... You can see the screenshot and it has load like this https://owlcarousel2.github.io/OwlCarousel2/demos/events.html — Arul Joseph, Sep 10 '18 at 05:13
Can you put the code on stackblitz? Also have you tried this `https://stackoverflow.com/questions/36615073/how-to-use-owl-carousel-in-angular2` — Gunner, Sep 10 '18 at 05:17
Actually it is a big application several classes and web socket events are taking place. The application is developed using Dart language, so we can't use stackblitz — Arul Joseph, Sep 10 '18 at 05:22
Your add function will never work, because just adding the tag of your component "carouselFixture" to the DOM will not trigger angular to initialize the component (and its view). — SirDieter, Sep 10 '18 at 06:08

score 1 · Answer 1 · answered Sep 14 '18 at 20:01

AngularDart doesn't allow for dynamic components to be added to the page using pure html like that. This is for security, and performance reasons. It doesn't actually put the full angular engine in the page at runtime.

It does have other ways of doing this tho. The easiest is to add another entry onto the list and it will be displayed in the for loop.

The other possibility is to use the ComponentFactory to add it to the page https://webdev.dartlang.org/api/angular/angular/ComponentFactory-class

I'm not sure what owl is doing exactly in its call, but you could add the html without the angular component and use the component factory to insert it in the right place after owl does it's thing.

angular ngFor call javascript

1 Answers1