Accordion data is not updating in angular application

mat-expansion-panel click event
accordion angular
mat-accordion is not a known element
angular expansion panel trackby
mat-expansion-panel expanded not working
mat-expansion-panel open by default
import matexpansionmodule from '@angular material expansion
material design expand collapse

I am using Syncfusion components in my angular application. I am unable to bind the updated data to the accordion component. Please find the example in below stackblitz link


In the above code if I click the change button data should be updated but empty data is showing in accordion. Kindly let me know how to resolve this issue.

you should use track by to Understand angular that data is changed.

*ngFor = "let item of data1;trackBy:identify"

  return this.count;

whatch this

syncfusion, you should use track by to Understand angular that data is changed. *ngFor = "let item of data1;trackBy:identify" identify(index,item){ return� QueryList is an unmodifiable list of items that Angular keeps up to date when the state of the application changes so any time a child element is added, removed, or moved the query list will be updated.

Actually i don't like the method mentioned in the documents and i think it is for adding items to existing accordion not for re-rendering it entirely as your sample.

Since you have *ngIf directive to show it conditionally. We can trick angular to re-render it like below :

 this.data1.length = 0;
    setTimeout(() => {
      this.data1 = this.count % 2 == 0 ? [...this.items] : [...this.items1];   

See Stackblitz sample.

Expansion panel closes on data refresh � Issue #8476 � angular , Expansion panel should not close on data changes What is the current behavior? Expansion panel is closing after data is updated What are the� In this tutorial, we will learn how to create an accordion using Angular.js. In this tutorial we will create a fully functional accordion in an Angular controller. In a follow up post, we will take our accordion out of the controller and abstract it into an Angular directive, making it fully dynamic and much more […]

From the documentation, it appears that you need to use the public method addItem() available in the AccordionComponent that you can retrieve thanks to your @ViewChild.

Hope this helps!

Angular examples, Runnable project in a code playground; This guide does not go into depth about In this post, I will tell you, Angular 8 with mysql database working example. Angular Materials are updated. e. ts: The Angular Bootstrap accordion is a� The Angular Bootstrap accordion is a component that organizes content within collapsable items. Accordion allows only one collapsed item to be shown at the same time. Accordions can toggle through a number of text blocks with a single click, and that greatly increases the UX of your project. Examples of Angular Bootstrap accordion use include:

Collapse not updating aria-expanded attribute, Additional informationversion 8.2.0 (couldn't select it from dropdown as it wasn't available at the time of writing)start new project following '5 min quick start'� In this post, we’ll implement Expansion panel which can also be converted into an Accordion component in Angular application using Material UL library. An Accordion is an interactive component consisting of panels with headers and content section. These panels can be clicked to expand collapse to show description area.

Angular ng-change Directive, Example. Execute a function when the value of the input field changes: The ng- change directive from AngularJS will not override the element's original� Maintining current state of the accordion when updating values of the data collection. ##Known issues. No option for mantaining current state of the accordion when updating the collection. ##Changelog. ###V1.4.2. Minor fixes. ###V1.4.0. Velocity updated to 1.5.1.

JavaScript � Bootstrap, Don't use data attributes from multiple plugins on the same element. If you're using the compiled (or minified) bootstrap.js , there is no need to you could initiate an AJAX request here (and then do the updating in a callback). Extend the default collapse behavior to create an accordion with the panel component. AngularJS based accordion directives. The accordion allows presenting content in collapsible panels. In this post, the accordion directives that you may use in your AngularJS / 2 projects is shared. 1- Angular-simple-accordion directive. The angular-simple-accordion directive will convert any serial DOM elements into an accordion.

  • addItem() will add new item but we can not reload the full datasource.