[Angular] [Bootstrap] -Effect collapse open and close with just one click

Navigation
0

I'm wanting to perform a collapse effect the moment I change the item in the slider below. When I change the item, I get the service, various information reloading my child component (performed a ngFor). I would like to do the close and open effect on item change. In the bootsrap documentation, I have to click to close and another to open. Is it possible with just one click (changing the item in the slider) to perform the event of opening and closing the div being rendered?

If you have another feature of moving the div doing the loading effect in the navigation of the slider, please feel free.

I'm using the ng5-slider component link

"(valueChange)" - call my service method inside my .ts component to return the data.

Thankyouinadvanceforyourattention.

HTMLfrommySlider

<ng5-slider[(value)]="value"  (valueChange)="ServiceItem()" [options]="options"></ng5-slider>

Div that is rendered in the change while browsing the slider 

  <div id="collapseExample">
    <div *ngFor="let itemLinhas of itens" class="card-block g-pa-0">
        <app-gridcoberturas [itensProdutos]="itemLinhas"></app-gridcoberturas>
    </div>    
  </div>
    
asked by anonymous 13.12.2018 / 03:35

1 answer

1

I used a lib called ngx-bootstrap and I used the component collapse for this.

ngx-bootstrap

The Input collapse is responsible for showing / hiding the elements. So I created a control variable for each collapse. 

  isColp3 = false;
  isColp4 = true

The basic structure of the component is thus 

<div id="colp3" [collapse]="isColp3" class="card card-block card-header">
  <div class="well well-lg">Coisa aqui</div>
</div>

ng5-slider

With Output valueChange I call my function that will change collapses

HTML code: (valueChange)="mudaCollapse()" 

mudaCollapse() { 
    if( this.oldValue !== this.value){
      this.oldValue = this.value;
      this.isColp3 = !this.isColp3;
      this.isColp4 = !this.isColp4;
    }
  }

The condition if( this.oldValue !== this.value) is only to prevent valueChange from executing when the button is clicked.

The full code can be viewed at link

    
04.01.2019 / 22:21
Malloc in a string, based on the size of a FILE Firbird configuration for use in a windows server 2012