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!
I am currently learning CSS and HTML as I work on the CCTCcart project. When running the code in the bottom menu section, I noticed that when clicking on any menu item such as Products, the white background color merges with blue. I need to find a solution ...
I have encountered a very perplexing issue. When accessing this site on Safari, an additional 4-500px of scrollable whitespace is added. This is clearly not the intended behavior, but I am struggling to understand what is causing this space :S Upon inspe ...
I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...
Recently, I came across a mutation observer in some TypeScript code that has left me puzzled. This particular implementation of a promise within the mutation observer seems unconventional to me: const observer = new MutationObserver((mutations: MutationR ...
Currently working on constructing a biography page filled with text content, and I aim to utilize CSS GRID instead of floats. I encountered an issue in getting the text to occupy all the available white space within the layout. I have attached an image to ...
I have been attempting to implement separate guards for distinct pages. Essentially, I am checking a boolean parameter to determine if a user is logged in or not. Below are the two guard.ts codes that I am using: export class IsAuthenticatedGuard implemen ...
Currently, I am facing an issue in my Angular application that is integrated with Firebase Firestore database. The problem lies in updating a date field from a Firestore timestamp field. To provide some context, I have set up an update form which triggers ...
I'm currently working on creating a dynamic filter bar integrated with a search functionality. My data is stored in JSON format, including details such as artist name, title, source, and more. Despite successfully retrieving results through console.lo ...
I am struggling to customize the background of a specific view in Angular. When I tried to style it with the code below, the entire view disappeared. Here is the relevant code: HTML (index.html): <div class="col-md-8 col-md-offset-2"> <div ng ...
Due to the inability of a ngIf and ngFor to coexist, I added an ng-container to facilitate the loop. However, after making this change, nothing seems to be working as expected without any clear reason. Below is the code snippet that is causing trouble: Vi ...
Can someone please clarify this for me? I'm having trouble understanding why the *ngIf condition and else statement always evaluate to true unless I am completely mistaken. Here is the situation: I have an icon that should turn the background color t ...
As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...
There was an issue with rendering the form due to a TypeError: Cannot read properties of undefined (reading '0'). This error occurred at line 190 in the code for form1.vue. The error is also caught as a promise rejection. Error Occurred <inpu ...
Is there a way to create an hr line both before and after a title using Bootstrap 5? I have managed to add the lines, but I am struggling to align the title within a container class in order for the lines to span the width of the screen. My current code s ...
I'm facing a challenge where I need to handle the capturing of a div using a method called capture() within another method. Take a look at the code snippet below: theimage; // declaring the variable callcapture() { // perform certain actions t ...
I have a list of URLs, the number of which is unknown until it stops (depending on some condition). This is how I am currently using them: from(observableUrls) .pipe( mergeMap(url => callHttpService(url) , 4), retryWhen( // Looking f ...
Encountering an issue while attempting to utilize a getter and setter in my service, resulting in the following error message: Cannot invoke an expression whose type lacks a call signature. Type 'Boolean' has no compatible call signatures 2349 t ...
I am working on an Angular 6 application that has multiple page routes. My goal is to set the home component as the root URL so that when the application initially serves (ng serve -o), instead of landing on localhost:4200, which is currently just a blank ...
Imagine you have a table snippet featuring rows of individuals and their test results: <tr> <td>John Doe</td> <td>18</td> </tr> <tr> <td>Jane Dober</td> <td>28</td> </tr> < ...
Attempting to fetch data and perform a task upon success using an Angular HttpClient call has led me to the following scenario: return this.http.post('api/my-route', model).subscribe( data => ( this.data = data; ...