How to hide an item?

[Sebastian Warmuz]

I am not able to hide accordion item.

this.accordeon.hideItem(0, true ) is not working at all.

[Deepa Loganathan]

Hi Sebastian,  

 

Thanks for contacting Syncfusion support. 

 

We have tested with a simple sample and can confirm that the method to hide Accordion item is working as expected. Please find the test sample for your reference.  

 

https://stackblitz.com/edit/angular-mj24zy-k8bmtc?file=default.component.ts  

 

If you are still facing difficulties using the hideItem method, kindly get back to us with below details, so that we can isolate and find the cause of the issue.  

 

1.      Are you facing any console error in the call to hideItem method, in case if the reference to Accordion object is not available in the component? 

 

2.      Exact details of your requirement 

 

3.      Component files (HTML, TS) that has Accordion component  

 

Meanwhile, please ensure if the reference of Accordion was injected properly in the component file as given below. 

 

export class DefaultAccordionComponent { 

 

    @ViewChild('acc') accordion: AccordionComponent; 

 

     

    hideAcc(){ 

      this.accordion.hideItem(0,true) 

    } 

 

     

} 

 

 

Regards,  

Deepa L. 

[Sebastian Warmuz]

Very odd?! as this is exactly what I've been doing?

[Deepa Loganathan]

Hi Sebastian, 

 

Sorry, but we were unable to predict your exact requirement. Kindly get back to us with the details requested in our last update.  

 

The details you provide will help us investigate the exact use case of this in your application and provide a prompt solution based on your needs. 

 

Thanks,
Deepa L. 

[Sebastian Warmuz]

Looks like it cannot be used in afterViewInit - I want to hide item based on argument passed with routeparams...

https://stackblitz.com/edit/angular-mj24zy-k8bmtc

[Deepa Loganathan]

Hi Sebastian,  

 

Sorry for the inconvenience. 

 

We were able to reproduce the reported issue and this is because the Accordion elements will not be compiled and available in DOM for processing in the NgAfterViewInit lifecycle hook and thus you were unable to hide the items using hideItem method.  

 

However, you can achieve this requirement in the created event of Accordion as given in the below code.  

 

[HTML] 

<ejs-accordion #acc (created)="hideAcc()"> 

        <e-accordionitems> 

          <e-accordionitem expanded='true'> 

            <ng-template #header> 

              <div>ASP.NET</div> 

            </ng-template> 

            <ng-template #content> 

              <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web 

               </div> 

            </ng-template> 

          </e-accordionitem> 

          <e-accordionitem> 

            <ng-template #header> 

              <div>ASP.NET MVC</div> 

            </ng-template> 

            <ng-template #content> 

              <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, 

               

              </div> 

            </ng-template> 

          </e-accordionitem> 

          <e-accordionitem> 

            <ng-template #header> 

              <div>JavaScript</div> 

            </ng-template> 

            <ng-template #content> 

              <div>JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers 

                </div> 

            </ng-template> 

          </e-accordionitem> 

        </e-accordionitems> 

      </ejs-accordion> 

 

 

[TS] 

 

constructor(private route: ActivatedRoute) { 

  this.sub = this.route.params.subscribe(params => { 

       this.hideItem = +params['id'];  // save the route param in a private variable 

    }); 

} 

    

 

    hideAcc(){ 

      if(this.hideItem == 5) // check the routeparam in the created event of Accordion item to hide items 

      this.accordion.hideItem(0,true) 

    } 

} 

    

 

We have edited the sample as per our suggestion. Please check and get back to us if you have any further concerns.  

 

Sample: https://stackblitz.com/edit/angular-mj24zy-trcii2?file=default.component.ts  

 

Regards,  

Deepa L.