Call child component inside slider in angular

user_3653474 0
Viewed 47

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

angular typescript javascript
2 Answers

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

  1. modify the data in the component
  2. all the affected templates are updated

hopefully this helps you progress!

user_46046450

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}
user_85581860
Related