IgxBannerComponent - Support collapsed input

[mrentmeister-tt]

Is your feature request related to a problem? Please describe.

I have a global notification banner list component. Whenever banners need to be shown, a service manages a list of banner components to put on the page. I loop through this list in the html, and render an igx-banner component for each message that needs to be shown. Looking through the source code, I don't see any way to set the initial state of the banner component to be expanded when rendered, so that I don't have to call open() on each individual banner after it's added to the DOM.

Describe the solution you'd like

Support an input property collapsed getter/setter, or some other property name.

Describe alternatives you've considered

Currently right now I have an effect that opens the banner whenever the viewChildren signal changes. It would be nice to not have to do this though:

@for (banner of banners(); track banner.id) {
  <igx-banner
    #igxBanner
    class="tt-banner tt-banner--{{ banner.type }}"
    (closed)="bannerStore.remove(banner.id)"
  >
    @if (banner.icon) {
      <igx-icon>{{ banner.icon }}</igx-icon>
    }
    {{ banner.message }}
  </igx-banner>
}

import { explicitEffect } from 'ngxtension/explicit-effect';

export class BannerListComponent {
  protected readonly bannerStore = inject(BannerStore);
  readonly banners = this.bannerStore.prioritized;
  protected readonly bannerComponents = viewChildren(IgxBannerComponent);

  constructor() {
    explicitEffect([this.bannerComponents], ([bannerComponents]) => {
      bannerComponents.forEach(bannerComponent => {
        bannerComponent.open();
      });
    });
  }
}