Nativescript Carousel is not working in Angular

plugins
ios
nativescriptcore

#1

I have used nativescript-carousel in my NS-Angular project.

Carousel item is not working.

If I try to give static carousel items, every label is shown within the first slide one above the other.

In this nativescript-carousel-issue, I am facing all issues.

I don’t know how to give carousel items dynamically and why static carousel items are not working?

My Attempt 1:

.HTML

<Carousel #carousel></Carousel>

.ts

public colorArr = [
        {"id" : 10,"color" : "red",},
        {"id" : 20,"color" : "black",},
        {"id" : 30,"color" : "blue",},
        {"id" : 40,"color" : "brown",},
        {"id" : 50,"color" : "red",},
        {"id" : 60,"color" : "black",},
        {"id" : 70,"color" : "blue",},
        ];

@ViewChild('carousel') carousl: ElementRef;

ngAfterViewInit() {
        this.buildCarousel();
    }

    private buildCarousel(): void {
        for (let photoUrl of this.colorArr) {
            const cr_Lbl = new Label();
            cr_Lbl.width = 50;
            cr_Lbl.height = 50;
            cr_Lbl.backgroundColor = photoUrl.color;
            cr_Lbl.text = photoUrl.id.toString();
            cr_Lbl.className = photoUrl.id.toString();

            const item = new CarouselItem();
            item.addChild(cr_Lbl);

            this.carousl.nativeElement.addChild(item);
        }

        this.carousl.nativeElement.backgroundColor = "brown";
        this.carousl.nativeElement.height = "200px";
        this.carousl.nativeElement.refresh();
    }

Output
36%20PM

My Attempt 2:

.HTML

<Carousel #carousel ios:indicatorOffset="0,-10" ios:finite="true" ios:bounce="false" showIndicator="true" height="100%" indicatorAnimation="SWAP"
        indicatorColor="#66ccff" indicatorColorUnselected="#cceeff" height="250" width="80%">
        <CarouselItem id="1" backgroundColor="red" height="100%">
            <Label class="h2 text-center" color="white" textWrap="true" text="1"></Label>
        </CarouselItem>
        <CarouselItem id="2" backgroundColor="red" height="100%">
            <Label class="h2 text-center" color="white" textWrap="true" text="2"></Label>
        </CarouselItem>
        
    </Carousel>

Output

34%20PM


#2

Pager seems to be working better with Angular, but you have to define templates, manual creation of items are not supported.