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...

Answer 1

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.