How can I know which tab is selected in hlm-tabs

[i-am-the-slime]

I'm coming from react, so I still have trouble with a lot of Angular.
My problem is that I need to conditionally render tab content only when it's actually visible because I use some image cropper component that requires the image to be rendered in order to deal with the pixels (I think).

I tried exposing [tabActivated] from the brain, but to no avail. Is there an easy way to do this?
In React terms, I'd like a "controlled" version of hlm-tabs.

[i-am-the-slime]

Looks like this works:

@Component({
	selector: 'hlm-tabs',
	standalone: true,
	hostDirectives: [
		{
			directive: BrnTabsDirective,
			inputs: ['orientation', 'direction', 'activationMode', 'brnTabs: tab'],
      outputs: ['tabActivated: tabActivated'],
		},
	],
	template: '<ng-content/>',
})
export class HlmTabsComponent {

	public readonly tab = input.required<string>();
  public readonly tabActivated = output<string>();

  constructor(private brnTabsDirective: BrnTabsDirective) {
    this.brnTabsDirective.tabActivated.subscribe((tab: string) => {
      this.tabActivated.emit(tab);
    });
  }

}