We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to hide an item?

I am not able to hide accordion item.
this.accordeon.hideItem(0, true ) is not working at all.

5 Replies

DL Deepa Loganathan Syncfusion Team February 5, 2019 01:12 PM UTC

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.  
 
 
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. 



SW Sebastian Warmuz February 5, 2019 04:59 PM UTC

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


DL Deepa Loganathan Syncfusion Team February 5, 2019 06:51 PM UTC

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.
 



SW Sebastian Warmuz February 5, 2019 06:57 PM UTC

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



DL Deepa Loganathan Syncfusion Team February 6, 2019 10:52 AM UTC

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.  
 
 
Regards,  
Deepa L. 


Loader.
Live Chat Icon For mobile
Up arrow icon