Scrollbar appears through CSS animation/transition

I am animating my ng-view in Angular with a cubic-bezier transition: /* Animations */ .slide-animation.ng-enter, .slide-animation.ng-leave { -webkit-transition:all cubic-bezier(0.250, 0.460,...

angular animated sliding panel - shows for second when view loaded

i'm trying to build animated vertical panel which suppose to be hidden and when user clicks button -panel should slide from the right. here is my code: HTML : <body ng-controller="Ctrll"> <p...

Running PHP within angular

I am using angular to create page transitions in a wordpress site. My site loads a normal wordpress page which fires its PHP and populates the page with angular elements (the body). The angular...

Proper way to create custom JS animations in angular 1.3+ with ng-animate

I want to use velocity.js in combination with ng-animate to create custom js-animations for my app. I've searched the web and found a lot of answers and tutorials which all refer to old versions...

md-sidenav toggle() is on top of the md-toolbar

I want to be able to toggle a sidenav without hiding the top left part of the md-toolbar, similiar to how Google Inbox works: (source: cbsistatic.com) It seems like the toggle function is causing...

Bootstrap collapse isn't working; hamburger menu not showing up

I am making an Angular application, and installed all my libs with Bower. When I check the console, all the sheets/scripts are loading up properly. I also have bootstrap and jQuery defined in my...

jQuery UI error - f.getClientRects is not a function

I'm trying to make jQuery UI work, but it doesn't. Here's what happens. I'm loading dependencies: <script src="assets/src/js/angular/angular.js"></script> <script...

TypeError: undefined is not a constructor

I'm very new to Angular and I'm trying to figure much of this out still. I'm writing some tests using Angular 1.5.8 which I generated from the Yeoman Generator. Specifically, I'm trying to figure...

HostBiding expression has changed after it was checked.Previous value 'hidden' current value 'hidden'

Hi I am trying to animate the height of an the host element using angulars animation api. Here is my code: import { animate, state, style, transition, trigger } from "@angular/core"; export class...

Ng-messages dynamic form and input names

tl;dr; It seems the like ng-messages directive cannot be transcluded. When you transclude it it doesn't bind correctly. I have 2 workarounds, but both have their downsides. Anyone has a better...

bootstrap 4 animate column width change

I have two columns like this: <div class="container"> <div class="row"> <div class="col-9"></div> <div class="col-3"></div> </div> </div> I am switching the classnames via angular...

getting 404 error for bower components

I am trying to run my application using gulp task runner and i have installed few bower components and angular is one of them When i try to run the application I am getting errors : In...

Animating in an element created with Renderer2

I'm using Angular 4.2.5 and I'm looking for a way to animate in an element created with Renderer2. Previously, with Renderer, there was a function .animate(), but that's not the case now. Let's...

Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Angular4

When running Karma to test my Angular4 application, I get this error Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in...

AnimateChild does not work for child :leave transition

I have angular "@angular/animations": "^4.3.0" installed in my project and i'm trying to run a childAnimation(). I two animations, one for a parent and one for a child element. Both with :enter...

Is there any way to stop Karma serving cached files?

So here's my issue. I'm trying to run a test suite for an old application of mine. However, I've stumbled upon the notorious Karma error: Executed 0 of 0 ERROR. As I turn Karma's loglevel to...

Angular Animation For Dynamically Changing Height

I've successfully gotten a panel to animate expanding and closing when entering and leaving the DOM. The problem is I now have a busy indicator inside the panel prior to showing details, and the...

Animate an image swap in Angular 4 (Was ng-animate-swap in AngularJS)

I'd like to animate an image swap in an angular 4 app. As the controller replaces the img src property the old image should fade away and the new appear. In AngularJS this was possible by changing...

Angular 4 animation not triggered, "ng-animate-queued" class added to element

I have used an angular animation (fade-in, fade-out) on a modal component in my project. The modal is set to open when clicking on a button somewhere else on a different component (using a modal...

angular :how to rotate an image with animation from component?

I have created a component called compass component in my map application , when I rotate the map , I want to programmatically rotate that compass with animation also , Im using angular animation...

Receiving `ERROR in multi styles.css` when trying to run ng test

After upgrading Angular to 7.2.6, I can successfully build using ng build but when I run ng test I get the following Error. I've tried adjusting the path to styles.css in my angular.json file, and...

Angular 7 animations causes z-index overlapping issue on webkit browsers

I have added some staggered animations to my angular 7 app for elements to animate on page load. I have encountered this weird z-index issue on one of my components. The animation code is...

Why do I keep getting this error about my closing tag?

So, I've written a sidnav component in angular but it appears to malfunction and I can't understand why. The thing is, I only want to show my sidenav when the window size is less than 992px. I've...

Ngx-Datatable will not display row data retrieved via Ajax unless mouse over or mouse leave event triggered

I really do not understand what the issue is with the Ngx-Datatable. It just will not update and display records until a mouse interaction. This happens even the first time I bind data. After the...

Is it possible to animate mat-tree? (Angular Material)

I am using mat-tree (https://material.angular.io/components/tree/overview) from Angular Materials. When expanding a parent-tree-node, I want to animate the appearance and disappearance of the...

After Importing the "Browser animation module in **Module.ts** file ( by running **npm install** @angular/animations)

After Importing the "BrowserAnimationModule in Module.ts file ( by running npm install @angular/animations) import { BrowserAnimationsModule } from...

How to remove horizontal scrollbar from slick.js

I am implemented one slider by use Slick.js. It works, but it shows the horizontal scrollbar and I can't find how to fix it. I have tried with overflow:hidden and box-sizing: border-box; but not...

Angular Material Progress Spinner not animated

I am trying to add an indeterminate spinner from Angular Material. I checked the official stack blitz example https://stackblitz.com/angular/nkabnxaenep. I compared the package jsons and cant find...

Cannot read property 'createComponent' of undefined after upgrade from angular8 to angular9

I am getting errorafter upgrading angular7 application to angular9. First i have updated to angular8 then doing 9 upgrade.Its compiling but after running the application i am getting the...

Version of TypeScript not officially supported by typescript-eslint-parser

I inherited an old AngularJs application which use the legacy tools: bower and grunt. When I run grunt serve --reload, I have the following warning message: WARNING: You are currently running a...