``The issue with the functionality of Angular animation stagger not performing correctly

I'm currently facing an issue with the new animation features in Angular 4.2, specifically the query and stagger functionalities.

Anticipated behavior: I expect that when I click on the Toggle button, every element with the attribute [animate-bar] will animate sequentially.

Actual outcome: Unfortunately, only the first element with the attribute [animate-bar] animates.

If you'd like to take a look at the code, you can find it on this Plunker link: http://plnkr.co/edit/qaJpj4Maf0QobAv8bXe6?p=preview

angulartypescriptanimation

Answer №1

After some trial and error, I came up with a solution for this issue. Utilizing animateChild along with another animation seems to do the trick.

trigger('listAnimation', [
    transition('* => *', [
        query('@slideIn', [
            stagger(30, [
                animateChild()
            ]),
        ], { optional: true })
    ]),
])

If you want to check it out, here's the link to the plunkr example: http://plnkr.co/edit/QWgiE4tYLN3O2Tnx1E7j?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to successfully transfer a document

I am looking to upload a file onto my server. Here is what I have attempted: <input (change)="uploadImage($event.target)" hidden accept="image/*" #uploadProfileImage type="file"> uploadImage(event) { const profileImage = event.files.item(0); t ...

javascriptangulartypescript

Changing the color of an input field in Angular Material to red

Below is an example of Angular code where the mat-form will turn red automatically if no value is entered. <mat-form-field> <input matInput placeholder="Enter your email" [formControl]="email" required> </mat-form-field> In the scenar ...

angularangular-material

Tips for maintaining enum order in graphql

In the server, I have defined an enum called BlocksType. export enum BlocksType { TEXT = "TEXT", LINK = "LINK", GALLERY = "GALLERY", CONTACT = "CONTACT", EMAIL = "EMAIL", RESIDENCE = ...

typescriptenumstypegraphql

Quickly send off an Angular 4 HTTP POST request and move on

I've been experimenting with making a fire and forget request, but none of my attempts seem to be working as expected. The situation is that after completing one subscribable request, I need to redirect to another page. However, before the redirectio ...

angularhttp-post

Ways to bypass browser pop-up blockers when using the window.open function

I am displaying an HTML retrieved from the backend. printHtml(htmlContent) { var windowToPrint = window.open('', '_blank'); windowToPrint.document.write(htmlContent); setTimeout(function () { windowToPrint.document ...

javascriptjquerytypescriptbrowsercross-browser

Unable to capture errors during input validation in Angular 6

My form is designed to validate user input to check if it meets minimum length requirements, displaying an alert if it doesn't. While there may be additional validation checks needed in the future, the initial check for minlength is not functioning co ...

angularvalidationforms

rxjs - monitoring several observables and triggering a response upon any alteration

Is there a way to watch multiple observables and execute a function whenever any of them change? I am looking for a solution similar to the functionality of zip, but without requiring every observable to update its value. Also, forkJoin isn't suitable ...

typescriptrxjs

Issue with Angular table display cell overloading(produces excessive rendering of cells)

In my project, I am working with 3 arrays of data - DATA_CENT, DATA_NORTH, and DATA_WEST. Each of these arrays contains another array called data, which I need to extract and display in a table format. For each new column, I create a new table and then po ...

javascripthtmlcssangular

strophe js is designed to handle the reception of individual messages specifically within the context of Angular

I am currently utilizing Strophe.js for establishing a connection with an XMPP server in an Angular 4 application. When using the connection.addHandler() method, I can successfully receive a single message within my listener function after the connection h ...

angularxmppejabberdstrophe.js

Angular 2 tutorial on best practices for using const variables in your code base

The Angular Style Guide for angular2 suggests spelling const variables in lower camel case. It mentions that the practice of using UPPER_SNAKE_CASE for constants was more common before modern IDEs made it easier to identify constant declarations. TypeScrip ...

angular

Encountered a problem with loading external SCSS files in style.scss using Angular CLI 6 due to issues with postcss-loader and raw-loader in node_modules

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) (Emitted value instead of an instance of Error) CssSyntaxError: /Users/src/assets ...

angularsassangular-cli-v6

Setting a Default Value for Angular Material Date Range Picker

My goal is to determine the default month that the date-picker opens up on, based on values obtained from a calendar event. For instance, if it's currently April and I click to the next month on the calendar, when I select the date-picker, it should o ...

angulardatepickerangular-material2

Import the current primary, secondary, and default color schemes from Angular MDBootstrap Pro into a .scss file

In my work with MDBootstrap Pro, I have incorporated a "Skin Picker" feature that allows me to easily choose a skin and dynamically change the color scheme of my application. However, I've noticed that some components, like mdb-select, do not update ...

angularsassbootstrap-4mdbootstrap

Having trouble getting Jest transformers to play nice with a combination of Typescript, Webpack, and PEGJS

In my current NPM project: { "scripts": { "test": "jest --config=jest.config.js" }, "devDependencies": { "@types/pegjs": "0.10.3", "@types/jest": "29.1.1", ...

node.jstypescriptwebpackjestjsts-jest

Incorporate a personalized button within the actions column of ng2-smart-table for Angular 2 development

Within the context of an ng2-smart-table component in Angular 2, I am attempting to include a new button within the actions column that, when clicked, will navigate to another page. Despite my efforts to implement this new button alongside the existing add ...

angulartypescriptng2-bootstrap

Tips for incorporating Extract<T, U> with a nested variant?

I've encountered an issue with generated types. A particular API is providing me with two types, and I want to create distinct aliases for each. In TypeScript, we can utilize Extract<> to assist with this: type Add = { type: 'add' ...

typescript

Issues with Angular 2 loading properly on Internet Explorer 11

We are currently running an Asp.net MVC 5 web application integrated with Angular 2. The application functions smoothly on Chrome, Firefox, and Edge browsers, but encounters loading issues on IE 11, displaying the error illustrated in the image below: ht ...

javascriptasp.net-mvcangulartypescriptinternet-explorer

How can I retrieve List<T> from a Razor Page using TypeScript?

Within my ViewModel, I have an Items collection: public class ItemViewModel{ public List<Item> Items {get;set;} } In the Index.cshtml file: @if(Model.Items != null){ <li><a id="item-id-link" href="#" data-items="@Model.Items"> ...

asp.net-mvctypescriptrazor

How can I store the status of checked and unchecked checkboxes in an array of objects using Angular 7?

I have a set of checkboxes with a parent-child structure, and their values are generated dynamically in a loop. When I click the submit button, I want to capture the selected or unselected values in the specified format (as shown in the commented output) ...

javascriptangulartypescript

I'm curious to know the purpose of 'as never' in this particular code snippet

I'm having trouble understanding the concept of 'as never' in this particular code snippet. I've come across the definition that it signifies something that never occurs or excludes other types, but I can't seem to grasp its usage ...

typescript