angular-animations

I'm getting this error after importing NoopAnimationsModule for my Angular 6 app ERROR TypeError: this.driver.matchesElement is not a function at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.processLeaveNode (browser.js:2976) This happened to me a few hours ago, and was probably caused by some outdated modules. Running npm update --save fixed it. @angular/core and @angular/animations should be same version. Especially look for "^" symbol in package name in package.json . It should be "@angular/core": "6.0.5", "@angular/animations"

I just want the view to fade in and out on route change. I have setup the component correctly it seems but need to get the animation syntax correct I think. This is my current animation attempt. I import this animation to my component: import {trigger, state, animate, style, transition} from '@angular/animations'; export function routerTransition() { return fadeInAndOut(); } function fadeInAndOut() { return trigger('routerTransition', [ transition(':enter', [ style({opacity: 0}), animate(3000, style({opacity: 1})) ]), transition(':leave', [ animate(3000, style({opacity: 0})) ]) ]); } This is

I am trying to create an input field that expands at least in width dynamically with the length of the string the user entered, probably even multiline. Is that possible with an input element in Angular Material 2? With the textarea field from Angular Material 2 I only managed to expand the textarea in height, not in width with the following code: <mat-form-field (keydown.enter)="onEnter()" floatPlaceholder="never"> <textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="8"> </textarea> </mat-form-field> also on StackBlitz . In case of

I've written plunk to illustrate my issue: LINK I need to animate parent component, and at the same time I want to make some animation in child component. It seems that angular is blocking animation on child component, and then simply jumps states after parent animation ends without any transition. Is there any way to make animations work in parallel, or at least chain without using callbacks? @Component({ selector: 'outer', template: ` <div [@state]="state" (mouseenter)="state='wide'" (mouseleave)="state='narrow'" style="background-color: red;"> <inner [stateInner]="state"></inner> </div>`,

I am trying to animate my page but have the following issue: I have content div on my page, and a button that opens another div above the content. I would like that div to fade and slide in, and the div bellow to slide down/up as well. I created the animation I wanted for the div above that opens on click, but don't understand what to do with content div, example code bellow: <div class="wrapper"> <button (click)="animated = !animated"></button> <div *ngIf="animated" [@slideInOutAnimation] class="animated-div"> THIS DIV IS ANIMATED</div> <div class="content">THIS IS CONTENT DIV</div> </div>

Angular 2 RC2 just came out and I am wondering whether it already supports staggered animations for *ngFor ? The DSL language documentation mentions group and sequence but no stagger of any kind? Is staggered animation not included in RC2? wootencl I'm not sure if I agree with Günter that the ng-conf features are in the newest RC.3 or for that matter in the RC.4 release. A stagger feature would be excellent but as of current that doesn't look like it's slated for RC.5. It will definitely be in the Angular 2 Final release as you can see on this animation tracking ticket . With that being said