1

I'm trying to build a small accordion using Angular Material and I want to make an input field so that whenever the user types something, the accordion's panels are automatically expanded if they have "subitems" which contain that string. Here's a sample of my code so far:

Accordion example

If you type in '1', you'll see the 'bar' panel expand because it has a subitem (123) which contains '1'.

Currently whenever a user types some input and thus expands the matching panels, if the user manually clicks on an unexpanded panel and afterwards inputs an additional symbol, the manually expanded panel will not close even if it does not have any "subitem" that contains the input substring. For example, if you type in '1', then manually expand the unexpanded 'foo' panel, and finally type in an additional symbol, i.e. 'x', the 'bar' panel closes correctly, but the 'foo' panel doesn't. I want to make it so that it does, i.e. override in a way the manual user click on a panel after each input. How could I do that?

Robert
  • 178
  • 1
  • 8
  • MatExpansionPanel (https://material.angular.io/components/expansion/api#MatExpansionPanel) has open and close methods that you can perform manually. You can use ViewChild and execute as you want – Kalamarico Nov 04 '18 at 02:06
  • 1
    Thank you so much, I was able to make it work after a few initial errors here and there :) If anyone else is wondering how exactly to do it, I've updated the link. – Robert Nov 04 '18 at 11:57
  • Great! I'm glad to hear that was helpful – Kalamarico Nov 04 '18 at 19:56

0 Answers0