How to make owl-carousel and Angular 2 friends?

Question

Angular

The essence of this is trying to display the result of a GET request in owl-carousel.
I made friends with the library with Angular and the test example in the component template works:
Below is the code (template):

<div class="owl-carousel owl-theme">
            <div class="item">
                <h4>1</h4>
            </div>
            <div class="item">
                <h4>2</h4>
            </div>
            <div class="item">
                <h4>3</h4>
            </div>
            <div class="item">
                <h4>4</h4>
            </div>
            <div class="item">
                <h4>5</h4>
            </div>
        </div>

Component code:

ngAfterViewInit() {
        $(document).ready(function () {
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                responsiveClass: true,
                autoWidth: false,
                navText: ["Предыдущий", "Следующий"],
                responsive: {
                    0: {
                        items: 1,
                        nav: true
                    },
                    600: {
                        items: 3,
                        nav: false
                    },
                    1000: {
                        items: 5,
                        nav: true,
                        loop: false,
                        margin: 20
                    }
                }
            });
        });
    }

But this code doesn't seem to work:

<div class="owl-carousel owl-theme">
            <div class="item" *ngFor="let t of test">
                <h4>{{t.name}}</h4>
            </div>
        </div>

Answer 1

In general, the solution is this:
Create a service directive:

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

@Directive({
    selector: '[scroll]'
})
export class ScrollDirective {

    constructor() {
    }

    @Input('scroll')
    set appScroll(isReady: boolean) {
        if (isReady)
            this.ngForCallback();
    }

    ngForCallback() {
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            autoWidth: false,
            navText: ["Предыдущий", "Следующий"],
            responsive: {
                0: {
                    items: 1,
                    nav: true
                },
                600: {
                    items: 3,
                    nav: false
                },
                1000: {
                    items: 5,
                    nav: true,
                    loop: false,
                    margin: 20
                }
            }
        });

        console.log('run');
    }
}

And in the template:

.....
<div class="owl-carousel owl-theme">
    <div class="item" *ngFor="let t of test; let l=last" [scroll]="l ? true : false">
        <h4>{{t?.name}}</h4>
    </div>
</div>
.....

Judging by the console ( console.log('run') ) it works only once...