I have created this slider

Working link : https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src/app/app.component.ts,src/app/app.component.html

HTML Component :

<div >
  <ng-container>
    <div >Slide 1</div>
    <div >Slide 2</div>
  </ng-container>
</div>
<button  (click)="plusSlides(-1)">Previous</button>
<button  (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

CodePudding user response：

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!

CodePudding user response：

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  [ngClass]="className[0]">
        Slide 1
   </div>
   <div #slide   [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}