Как вы связываете состояние с элементом в угловом без ngFor?

Мне интересно, как вы могли бы сделать что-то вроде этого (это мопс вместо html):

.collapsible
      a(mat-list-item routerLink="/sites/user-gruppen" routerLinkActive="link-active") User & Gruppen
        i.material-icons((click)="changeSomeVariableForThisElement()") arrow_right
      .collapsible-body([@dropDownAnimation]="someVariable")
        a(mat-list-item routerLink="/sites/user-gruppen/user" routerLinkActive="link-active") User
.collapsible
      a(mat-list-item routerLink="/sites/hilfe" routerLinkActive="link-active") Hilfe
        i.material-icons((click)="changeSomeVariableForThisElement()") arrow_right
      .collapsible-body([@dropDownAnimation]="someVariable")
        a(mat-list-item routerLink="/sites/hilfe/faq" routerLinkActive="link-active") FAQ

Соответствующими частями являются [@dropDownAnimation] и (click)

С ngFor это было бы легко, поскольку мы могли бы просто использовать, скажем, item в случае ngFor="let item of items", а затем иметь что-то вроде item.state, с которым мы манипулируем.

Я искал 2 часа, и я не могу найти никакой документации по этому вопросу, возможно, я просто не знаю, что искать, поскольку я относительно новичок в угловом.

Как я могу изменить, например someVariable.state только для текущего элемента, но не для всех элементов?