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.