रनटाइम के दौरान कोणीय एनीमेशन कैसे बदलें?

मेरे कोणीय घटक में एक तालिका को लाइन से लाइन प्रदर्शित किया जाएगा, फिर कुछ सेकंड प्रतीक्षा करें, टेबल लाइनों को हटा दें और अगली लाइनें दिखाएं। यह अब तक अच्छा काम करता है।

लेकिन अब मेरे पास एनिमेशन के साथ दो "छोटे" मुद्दे हैं:

1. यह सुनिश्चित करने के लिए कि पिछला :leave समाप्त हो गया है, मुझे "प्रतीक्षा" (नीचे कोड देखें) डालने की आवश्यकता है। अन्यथा नई लाइनों की छपाई पुरानी लाइनों को हटाने के साथ ओवरलैपिंग कर रही है। समस्या अब यह है कि यह "प्रतीक्षा" पहले ही रन पर भी लागू होता है। मैं कैसे बच सकता हूं कि पहले रन पर "प्रतीक्षा" कहा जाता है? या यह सुनिश्चित करने का कोई और तरीका है कि एक नया एनीमेशन केवल तभी शुरू होता है जब अन्य एनिमेशन किए गए हों (तब मैं उस "प्रतीक्षा" को हटा सकता हूं)?

एक कार्यशील डेमो यहां है https://stackblitz .com/edit/angular-list-animations-gsfhsv?file=app%2Fapp.component.ts

    import { trigger, transition, style, animate, query, stagger, state, keyframes, group } from '@angular/animations';
    
    export const listAnimation = trigger('listAnimation', [
        transition('* => *', [
            // each time the binding value changes
            group([
                query(
                    ':leave',
                    [
                        stagger(100, [
                            animate('500ms', keyframes([style({ filter: 'blur(12px) opacity(0%)' })])),
                        ]),
                    ],
                    { optional: true }
                ),
                query(
                    ':enter',
                    [
                        style({ opacity: 0, height: 0, visibility: 'hidden' }),
                        stagger(100, [
                            animate('0ms 1200ms', style({})), // <--- wait - otherwise flicker and animations are overlapping
                            style({ height: '*', visibility: 'visible' }),
                            animate('500ms', style({ opacity: 1 })),
                        ]),
                    ],
                    { optional: true }
                ),
            ]),
        ]),
    ]);

1. मैं रनटाइम के दौरान एनीमेशन कैसे बदल सकता हूं? विचार विभिन्न :enter और :leave एनिमेशन का एक समूह बनाना है और उपयोगकर्ता यह चुन सकता है कि कौन सा लागू किया जाएगा। लेकिन मुझे रनटाइम के दौरान एनीमेशन बदलने का कोई तरीका नहीं मिला।