swiper element inside swiperComponent does not exists angular13

Question

i have imported swiperComponent in my appComponent in angular13:

import { SwiperComponent } from 'swiper/angular';

and imported in the class with ViewChildren :

  @ViewChildren('swiperSlideShow') swiperSlideShow!: QueryList<SwiperComponent>;

In the template i have:

<swiper [config]="config" #swiperSlideShow>

and when i log:

    ngAfterViewInit(): void {
        console.log(this.swiperSlideShow.toArray()[0]);
    }

I get the swiper component as shown in this image

In the image is clearly visible the element swiper but when i try logging it in the console NPM trows an error which says that this property does not exist on the given object.

TS2551: Property 'swiper' does not exist on type 'SwiperComponent'.

Can anyone help me out in accessing this option?

Answer 1

You didn't mention where did you put console.log statements. I assume they are inside ngOnInit .

When you look carefully at the screenshot of console.log output you'll notice little "i" icon. It means the value may have changed. DevTools uses lazy evaluation - the value you see is evaluated when you expand the tree, not when it's printed to the console. See: https://medium.com/young-coder/why-chromes-developer-console-sometimes-lies-9487e45e91ae

Second console.log yields undefined because at that time swiper is not yet defined.

Take a look at swiper/angular code. swiper is initialized inside ngAfterViewInit hook. https://github.com/nolimits4web/swiper/blob/b8b2681de24e9b0b98cfe644e09cf281311a24f5/src/angular/src/swiper.component.ts#L533-L540

---

After a few OP edits the main purpose changed. Finally its about swiper property not being exposed on SwiperComponent from swiper/angular package.