Resetting or Overwriting the Angular Array for Ionic Slider implementation

Ionic Framework ionic-v3
1

Hi,
I’m trying to use Ionic Slides component.
I have a single instance on the HTML to show 2 different set of slides based on certain button pressed condition. 1 set of slide for long press and another set of slides for short press. When i erase the contents of array of image and reload it with the new image set, while sliding i see that the default values of deleted array in the new set overwriting few images.

My HTML for this component is:

<ion-slides loop class="Layer0" id='slideLayer' speed='1000'>
  <ion-slide  *ngFor="let slide of slideData">
    <img src="{{slide}}" />
  </ion-slide>
</ion-slides>
<button ion-button icon-only color='dark' id='Modebtn' (click)='modeButton()' (press)='modePress()'>
Mode</button>

in my ts file:

slideData=['/image/image1','/image/image2','/image/image3'];
longpress=['/image/image1','/image/image2','/image/image3'];
shortpress= ['/img/image1','/img/image2','/img/image3'];
short = 1;
pressTime  = 0;
long =0;

modeButton()
{

	this.slideData.length =0;
	this.slideData = [];
	if(this.short)
	{	
		this.slideData = this.shortpress;
	}
	else
	{
		this.slideData = this.longpress;
		this.short = 1;
	}
	document.getElementById('slideLayer').style.visibility = 'visible';
}
ModePress()
{
	this.long = setInterval(()=>{
		this.pressTime++;
	if(this.pressTime>6)
	{
		clearInterval(this.long);
		this.short =0;
		this.pressTime = 0;
	}	
	},100);
}

Not sure on why this is happening, Can some one help me in checking if i’m doing anything wrong, is there any better way to reset the angular array. Looking forward to hear for some comments.
Regards
Suresh

2

A couple of things: setting the array length to 0 and then overwriting it with an empty array is redundant, and there should virtually never be any need to directly access the DOM in an Angular application, certainly not to change attributes as you are doing here. Bind to [style.visibility] instead.

3

Hi Thanks for the response. I understand setting the array length and the overwriting it with a empty array is redundant and not needed, I initially tried overwriting the contents of array directly, without clearing the array, that doesn’t work either. Is it possible to have two ion-slides in same HTML, so that i can use the [style.visibility] to make one slide visible and the other slide hidden at a time.
Thanks in advance.

4

Generally this is done with ngIf as described here, although if that is not appropriate for your use case you can also bind [hidden].

5

Hi thanks for the direction, i could able to use ngIf condition for my case. I don’t understand one particular part, everytime when i switch from one loop to other, i see a error cannot read property ‘length’ of undefined.
Can you help me in checking if i’m invoking it correctly:

HTML:

<ion-content no-padding class="no-scroll">
 <button ion-button color='dark' class='Modebtn' (click)='ModeButton()' (press)='ModePress()'>Pressme
</button>	
	
<ion-slides *ngIf="!settingsFlag; else settingsSlide" loop class="Layer0" id='slideLayer' speed='1000' >
  <ion-slide *ngFor="let slide of slideData">
    <img src="{{slide.image}}" id="UpdatePic"/>
  </ion-slide>
</ion-slides>
	
  <ng-template #settingsSlide>
	<ion-slides loop class="Layer0" id='slideLayer' speed='1000' >
	<ion-slide *ngFor="let slide of slideSettings">
    	<img src="{{slide.image}}" id="UpdatePic"/>
  	</ion-slide>
	</ion-slides>

  </ng-template>
	
	
</ion-content>

TS:

  slideData = [	  	
			   		{ image:'assets/Mode/mode1.png'},
				    { image:  'assets/Mode/mode2.png'},
	  				{ image:  'assets/Mode/mode3.png'},
				    { image:  'assets/Mode/mode4.png'},
	  				{ image:  'assets/Mode/mode5.png'}  ];

 slideSettings =[{image:'assets/Mode/order_refill.png'},
			  		{image:'assets/Mode/flight_mode.png'},
			  		{image:'assets/Mode/bt.png'},
			  		{image:'assets/Mode/new_user.png'},
			  		{image:'assets/Mode/return.png'}];
  slideLength = false;
  settingsFlag =false;
  longpress =0;
 pressTime =0 ;  
constructor(public navCtrl: NavController, public platform:Platform) {
	  this.platform.ready().then(()=>{
		  	  if(this.slideSettings.length>0)
			  {	  
			  	this.slideLength = true;
			  }
		      
		  		
		  	  this.slides.spaceBetween = 0;
	  });
  }
   
   ModeButton(){
	   if(this.pressTime)
	   {
	   		clearInterval(this.longpress);
		    this.pressTime = 0;
	   }
	   this.slides.slideNext(1000);
   }

   ModePress()
   {
		this.longpress = setInterval(()=>{
		this.pressTime++;
		console.log('ModePress,pt:',this.pressTime);
		if(this.pressTime>6)
		{
			this.pressTime =0;
			console.log('settings activated:',this.settingsFlag);
			clearInterval(this.longpress);
			this.settingsFlag = !this.settingsFlag;
			this.slideLength = true;
			
		}	
		},100);
   }
}
6

I’m confused as to why this code is so complex. It seems to me like you want to show either slideData or slideSettings, but using the same markup in the template, so why can’t you just do this?

<ion-slides>
  <ion-slide *ngFor="let slide of slides">
    <img [src]="slide.image">
  </ion-slide>
</ion-slides>

dataSlides = [/*stuff*/];
settingSlides = [/*stuff*/];
slides = [];

…and then just assign either dataSlides or settingSlides to slides as circumstances change.