Is it possible to animate the rotation of a chevron icon from left-facing to right-facing using Angular?
CSS:
.rotate-chevron {
transition: .1s linear;
}
HTML:
<button [class.button-open]="!slideOpen"
[class.button-close]="slideOpen"
(click)="changeSlide()">
<i class="rotate">{{slideOpen ? 'chevron_left' : 'chevron_right'}}</i>
</button>
TS:
changeSlide(): void {
this.slideOpen = !this.slideOpen;
}
Check out a live example on CodePen
Click on this link
.TS
@Component({
selector: 'my-app',
template: `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<button [class.button-open]="!slideOpen"
[class.button-close]="slideOpen"
(click)="changeSlide()">
<i class="fa fa-chevron-right" [class.clicked]="slideOpen"></i>
</button>`
})
class AppComponent {
slideOpen: any = false;
title="hello world angular 6";
constructor() {
// Your Angular component code goes here
}
changeSlide(): void {
this.slideOpen = !this.slideOpen;
}
}
CSS
.fa {
transition: all .5s linear;
}
.clicked {
transform:rotate(180deg);
}
When utilizing icons from a CDN, animating them directly can be tricky. However, you can achieve the desired effect by using a single SVG and rotating it using CSS transform. Here's an example:
HTML:
<button [class.button-open]="!slideOpen"
[class.button-close]="slideOpen"
(click)="changeSlide()">
<i class="rotate" [ngStyle]="getChevronStyle()>;"> chevron_left </i>
</button>
JavaScript:
getChevronStyle(){
if(this.slideOpen) {
return { 'transform': 'rotate(0deg)' }
} else {
return { 'transform': 'rotate(180deg)' }
}
}
CSS:
.rotate {
transition: all .1s linear;
}
You can verify CSS transform compatibility here: https://caniuse.com/#search=transform You can also find more information about ngStyle here: https://angular.io/api/common/NgStyle Hopefully, this solution proves helpful!
Is there a way to toggle a checked checkbox list in Angular2? I am trying to create a button that, when pressed while the full list is visible, will display only the checked items. Pressing the button again would show the entire list. Here's the Plu ...
Just a quick question, I seem to be stuck on this. Here is my Map: public checkboxOptions: Map<string, boolean>; In the render() function, I want to loop through it like this: renderCheckboxMenu(): any { let menu = <div className={`${style[ ...
Situation: I'm facing a challenge in downloading a binary file from a backend system that requires certain data to be posted as JSON-body. The goal is to save this file using File-Saver with the filename specified by the backend in the content-disposi ...
I am currently working on integrating a main module and a feature module that consists of various components. Below, I have provided the configuration for multiple routes within the feature routing file. const priorityRoutes: Routes = [ { path: &a ...
Encountering a critical error during the build process with Visual Studio 2016 update 3 Asp.Net Core. The build is interrupted with the following message: Severity Code Description Project File Line Suppression State Error MSB4018 The "FindC ...
I'm in the process of upgrading to Angular 6 As I follow the upgrade guide, I run into this issue: > ng update @angular/core Invalid range: ">=2.1.0" That's all the information I have. There are no additional warnings or ...
While working on my Angular 2 project, I utilized [ng2 smart table]. My goal was to send an API request using the http.post() method. However, upon clicking the button to confirm the data, I encountered the following error in the console: ERROR TypeErro ...
After creating an Angular project, I noticed that some key files were missing in the initial setup, such as app.modules.ts and app-routing.modules.ts The project was generated using the command ng new name Here is a screenshot displaying all the files th ...
I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...
While I was working on my project, I realized that using only pixel values in tables and sidebars was a big mistake. This caused issues because if someone had a different screen resolution, my website would look distorted and unappealing. Could you please ...
After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...
I'm going crazy over this issue. My navigation bar has three div elements, each with text aligned both vertically and horizontally at the center. However, when I insert an image (an SVG icon of a zoom lens) before the "search" text, it shifts the tex ...
I have this snippet in my .css file: .attachment-label { font-size: 10px; font-style: italic; color: rgba(0,0,0,.5); } When I try to use it in my HTML like this: <div class="card-body"> <span class=" ...
Trying to modify a specific property within my MongoDB document. This is how the document is structured: "_id" : ObjectId("57e2645e11c979157400046e"), "id" : 1651570992420, "creator" : "nameHere ...
Is it possible to define a variable in TypeScript like a string or as a Function, but with specific parameters? I am aware of how to define a string actionGetData: string; and a function actionLoaded?(event: any, ui: any): void;, but when I try to define ...
Looking to develop a functionality where an array of objects can be shown or hidden based on specific filters. The desired output should be as follows: HTML CODE: Filter: <div (click)="filter(1)"> F1 </div> <di ...
My issue lies with a checkbox that does not reflect its ngModel value. To provide some context, I have a Service managing a list of products and a component responsible for displaying this list and allowing users to select or deselect products. If a user d ...
I'm seeking assistance with an unusual issue in my Angular2 and Typescript application. Within my template, I have the following HTML utilizing ngIf: <div *ngIf="loading" class="row"> <div class="small-3 small-centered columns" > ...
I am currently testing a class called ToTest.ts, which creates an instance of another class named Irrelevant.ts and calls a method on it called doSomething. // ToTest.ts const irrelevant = new Irrelevant(); export default class ToTest { // ... some impl ...
I've encountered an issue with a simple button I created that uses two background images for normal and hover states. Upon testing in various browsers, I noticed that the images animate on hover, causing them to slide up and down. I tried eliminating ...