Why set HTML element state in data object in typescript (angular)

I have been studying angular animation lately and found that there is no way to set element state in HTML other than setting the state in data object.
for example I have to animate single element withing the list of elements then there is no other way.

 export const listAnimation = trigger('listAnimation',
[

     state('before', style({
     opacity: .5
     })),
        transition('before <=> after', animate(1000)),
 ])



export class SubjectcontentComponent implements OnInit {
selectedItem:any;

subjects= [
{ id: 12, name: 'PHP', state:'before ' },
{ id: 13, name: 'Javascript' , state:'before '  },
{ id: 14, name: 'Css', state:'before '  },
{ id: 15, name: 'Angular' , state:'before '  },
{ id: 16, name: 'Laravel' , state:'before ' },
{ id: 17, name: 'java', state:'before ' },
{ id: 18, name: 'asp' , state:'before ' },
{ id: 19, name: 'python' , state:'before ' },
{ id: 20, name: 'database'  , state:'before ' }
];
 state: string='small';
 i=0;
 constructor( private subjectcontentService: SubjectcontentsService ) { }

ngOnInit(): void {
  this.subjects=this.subjects.map((subject)=> {
  subject.state='before';
  return subject;
 })
}
 toggle(subject:any){
 if(subject.state=='before')
  {
   subject.state='after';
  }
   else{
   subject.state='before';
  }


 }

}

Is there any benefit to storing the state of element in the data of regular object.