I have created this slider
Working link : https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
HTML Component :
<div class="slideshow-container">
<ng-container>
<div class="mySlides animated fadeInRight">Slide 1</div>
<div class="mySlides animated fadeInRight">Slide 2</div>
</ng-container>
</div>
<button class="btn ansbtn" (click)="plusSlides(-1)">Previous</button>
<button class="btn ansbtn" (click)="plusSlides(1)">Next</button>
i have to call child component inside slider like
<ng-container *ngFor="let o of list; let i=index">
<child-component-1 *ngIf="i==0"> </child-component-1>
<child-component-2 *ngIf="i==1"> </child-component-2>
..
<child-component-n *ngIf="i==n"> </child-component-n>
</ng-container>
Getting this error on click of next button :
ERROR Error: Cannot read properties of undefined (reading 'className')
Any solution to call child component inside slider and fix the error, Thanks
you have this code on your stackbitz:
var dots = this.elem.nativeElement.querySelectorAll('.dot');
and there are no elements with a "dot" class in your templates.
so when you do this:
dots[this.slideIndex - 1].className += ' active';
the value of of dots[this.slideIndex - 1] is undefined;
this then gives you the error
Cannot read properties of undefined (reading 'className')
To fix it, my suggestion is for you to never use a querySelectorAll in any of your angular code...
I will assume you have a variable in your actual component which is some sort of array which generates elements with this "dot" class. so when clicking the button, you should manipulate this array variable, and not do a query on the template for its results.
The ideal angular flow is
hopefully this helps you progress!
Angular is not only javascript. You should re-think your carousel using variables and [class.active]="variable" to change the class and template reference variables and @ViewChildren() to get the nativeElements if was neccesary.
Disclamer: It's only an uncompleted (and possibly erroneous) e.g. of using variables in .ts that are using in the .html makes more "readable" and "friendly angular" that use a "javascript style" using document.querySelectorAll and className.replace
In briefly, if you has, e.g. some like
<div #slide class="mySlides animated fadeInRight" [ngClass]="className[0]">
Slide 1
</div>
<div #slide class="mySlides animated fadeInRight" [ngClass]="className[1]">
Slide 2
</div>
You can define some like
@ViewChildren('slide') slides:QueryList<ElementRef>
className:string[]=[]
selectedIndex:number=0;
And use some like
slides.forEach((x,index)=>{
this.className[index]=index==selectedIndex?'block active'
:'none'
})
Using a .css like
.active{...}
.none{display:none}
.block{display:block}