Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app

Found this spinner example:

https://codepen.io/z-/pen/OPzNLz

spinner.component.html

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css'],
  animations: []
})
export class SpinnerComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
}
/*Your CSS code here*/
<div>
  <!-- Your HTML code here -->
</div>

Successfully displayed the spinner by copying the HTML & CSS files into a plain html and css environment.

Decided to implement it as an angular component by transferring the code, but unfortunately the spinner did not appear - without any error messages.

Confirmed that BrowserAnimationsModule is imported in app.module.ts, however, it did not make a difference.

Answer №1

The problem arose from the presence of extraneous notes within the CSS code.

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

Changing the class of a div in JavaScript from one class to another

On my HTML page, I have a div with a CSS class assigned to it. The goal is to switch the current class for another when a button is clicked. It's crucial that not a single CSS property within the class is altered - the entire class must be replaced en ...

PHP: Issues with displaying data from a SELECT * FROM query in tables

My goal is to style tables pulled from my database so that the columns in the rows align with the column names for better readability. I attempted to use PHP to achieve this by creating a table outside a while loop to display the names and then starting t ...

Error message: "The function platform_browser_dynamic_1.bootstrap does not exist in Angular 2."

I had everything set up and running smoothly until suddenly I started receiving this error out of nowhere: TypeError: platform_browser_dynamic_1.bootstrap is not a function Here's the component I've been working on: import { Component, Input, ...

Resolving the global provider in Angular2 Typescript with the help of an Interface

In the realm of my Angular2 application, I have two essential services called WebStorageService and MobileStorageService, both of which impeccably implement an interface known as IStorageService. Interestingly, in my magnificent main.component, I elegantly ...

Challenges with adjusting the value of HTML range inputs

Within my HTML, I have incorporated the following three elements: <button id="left" >Previous</button> <input id="animSlider" type="range" min="0" max="0" step="1" value="0" /> //THE MAX VALUE IS SET DYNAMICALLY UPON PAGE LOAD, NOT AS ZE ...

Mastering Nested *ngFor in Angular

I attempted to use nested for loops in Angular but I couldn't achieve the exact result I wanted. I tried different approaches, but none of them gave me the desired outcome from this nested loop function. I am looking to create a select box based on n ...

Make a <div> element that has a fixed size, but allows for scrolling text inside

I have tried searching the forum for a solution to my problem, but haven't found one yet. I am trying to create two "divs" with fixed height and internal scrolling. However, whenever I add text inside one of them, its height increases accordingly. Wha ...

The fuse-sidebar elements are not being properly highlighted by Introjs

I have recently developed an angular project that utilizes the fuse-sidebar component. Additionally, I am incorporating introjs into the project. While introjs is functioning properly, it does not highlight elements contained within the fuse-sidebar. The ...

Utilize AngularJS to compile a roster of participants

Just starting out with AngularJS, and although I have some background in JavaScript, AngularJS seems quite challenging to grasp (at least for me). My current issue is as follows... I have a list of players and I want to allow users (such as coaches or an ...

Guide on implementing a .catch method in Firebase's onSnapshot function

I have recently developed an Ionic Firebase chat application. I seem to be encountering an issue with setting up a query snapshot when initializing the message page. Here is the code snippet that I am using: ngOnInit() { this.messageService.getA ...

The compilation of the Angular application is successful, however, errors are arising stating that the property does not exist with the 'ng build --prod' command

When compiling the Angular app, it is successful but encountered errors in 'ng build --prod' ERROR in src\app\header\header.component.html(31,124): : Property 'searchText' does not exist on type 'HeaderComponent&apo ...

Deactivate the selection box feature while keeping the existing value in the post

Within my current asp.net-mvc project, there is a specific page where users can make selections from a dropdown box that triggers a post request to update multiple values. To prevent any confusion caused by delays in the postback process leading to uninten ...

Place a Button or Link Right Below the Title on the Custom Post Type Editing Page

I am currently working on customizing the backend of a WordPress site for a client by adding multiple custom post types. These custom posts are only meant to be displayed on the front-end through a specific loop on one page, preventing users from accessing ...

Using the Firefox API to determine if a tab is currently active

I remember hearing about a feature that was introduced in some recent versions of Firefox allowing developers to check if a tab is active or not using JavaScript. However, I am having trouble finding more information about it online. Can you share the li ...

Is it possible to send two parameters to a JavaScript function using HTML?

Seeking help to develop an .html page where two string inputs are passed as parameters to a .js function, which then returns the longer of the two strings based on their lengths. Initially, I successfully created a functional .js script in VS CODE. Here i ...

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

Start fresh with the count for every individual table

In my HTML document, I have multiple tables with columns that have classes "valuation" and "valuation_all". If one cell in the "valuation" column contains the text "FAIL", then the corresponding cell in the "valuation_all" column should display "FAIL"; oth ...

Issue with IntersectionObserver not detecting intersection when the root element is specified

I am encountering an issue with my IntersectionObserver that is observing an img. It works perfectly when the root is set to null (viewport). However, as soon as I change the root element to another img, the observer fails to detect the intersection betwee ...

Functionality problem with adjusting font size in jQuery date picker

Recently, I integrated jQuery and datapicker features into my ASP .NET MVC 3 (Razor) project and noticed that the font size of the datapicker is exorbitantly large. Does anyone have any suggestions on how to adjust this issue? Your help would be greatly ...

Gradually fade with JavaScript

My JavaScript code below is used to recursively reload a specific DIV with the results of a data query. The issue I'm facing is that each time the DIV, identified by id="outPut", is reloaded, all the data fades in and out due to the fadeTo function. ...