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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to hide an item?

Thread ID:

Created:

Updated:

Platform:

Replies:

142464 Feb 5,2019 12:43 PM UTC Feb 6,2019 10:52 AM UTC Angular - EJ 2 5
loading
Tags: Accordion
Sebastian Warmuz
Asked On February 5, 2019 12:43 PM UTC

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

Deepa Loganathan [Syncfusion]
Replied On 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. 


Sebastian Warmuz
Replied On February 5, 2019 04:59 PM UTC

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

Deepa Loganathan [Syncfusion]
Replied On 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.
 


Sebastian Warmuz
Replied On 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


Deepa Loganathan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;