I am working with an angular bloc contained within a container that displays based on a *ngIf condition.
<div class="simulation-bloc">
<ng-container *ngIf="type==='simulation'">
// bloc content
</ng-container>
</div>
Is there a way to add an animation to this bloc so that its height changes when it is shown?
Here is a custom animation created using the built-in Angular library:
//slideDown-animation.ts
import { animate, style, group, state, transition, trigger } from '@angular/animations';
export const slideDownAnimation = trigger('slideDownAnimation', [
state('in', style({
'max-height': '1000px', 'opacity':1, 'overflow': 'visible'
})),
state('out', style({
'max-height': '0px', 'opacity':1, 'overflow': 'hidden'
})),
transition('in => out', [group([
animate('300ms ease-in-out', style({
'opacity': '0'
})),
animate('300ms ease-in-out', style({
'max-height': '0px'
})),
animate('300ms ease-in-out', style({
'visibility': 'hidden'
}))
]
)]),
transition('out => in', [group([
animate('300ms ease-in-out', style({
'visibility': 'visible'
})),
animate('300ms ease-in-out', style({
'max-height': '500px'
})),
animate('300ms ease-in-out', style({
'opacity': '1'
}))
]
)])
]);
//in component.ts
import { slideDownAnimation } from "src/app/shared/animations/slideDown-animation";
@Component({
selector: 'app-checkout',
templateUrl: './checkout.component.html',
styleUrls: ['./checkout.component.css'],
animations: [modalAnimations,slideDownAnimation]
})
export class...
<!-- component.html -->
<div [@slideDownAnimation]="YourBooleanVariable?'in':'out'"></div>
Check out a demo of this animation in action: https://stackblitz.com/edit/angular-ivy-ppyssn?file=src/app/slide.animation.ts
As a complete beginner in programming, I am excited to share that I have recently embarked on this journey and had only a few classes so far. Currently, I am working on developing a new website just for fun. It is intended for me and my colleagues at work ...
I successfully integrated the Bing map with Angular using the angular-map package, and now I want to draw a circle around a given latitude and longitude. To achieve this, I installed the following npm packages: npm install --save angular-maps npm ins ...
When a user enters or inserts a value into one textarea, I want it to automatically update the other textarea field as well. I thought about using the change function to achieve this, but when I tried to use ng-model with the control name, I encountered a ...
I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...
I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...
Is there a way in HTML to designate a set of divs so that they automatically align from left to right for languages that read left to right, and alternatively, flow from right to left for languages that read right to left? This means that the direction of ...
Here is the structure of my modules: https://i.sstatic.net/zO9dE.png The HTTP interceptor I provided in core.module.ts is affecting the HTTP client in the translation.module.ts. This is how my core module is set up: @NgModule({ declarations: [DefaultLa ...
I am attempting to create a functionality where the text box will replace the timer when it reaches 0, and then the timer will be hidden. I am seeking a straightforward solution using either the 'v-show' or 'destroy' property in vue.js ...
I am seeking guidance on how to modify a specific class attribute in CSS/JS/JQuery when hovering over a different element. Here is an example: <h1 class="result">Lorium</h1> <h1 class="result">Ipsum</h1> <h1 class="result">Do ...
I am having trouble with my form appearing clean without validation error messages after using the reset() function. Initially, my form looks clean as expected: https://i.sstatic.net/HLKPq.png However, if a user clicks the register button and encounters a ...
Struggling with creating a grid layout that looks like the one in this image. I initially thought of setting up a row with 2 divided columns, then adding another row+column within each of those 2 columns to place a card inside. This is an excerpt of my c ...
How can we determine the common nodes between two specific nodes in SQL, using the following example: Count the occurrences of <li> tags between <h2 id="vgn">VGN A </h2> and <h2 id="vgn">VGN </h2>, as well as the total number ...
I've hit a roadblock while working on a project and can't seem to find the right solution. I've already created a design in Photoshop to illustrate what I'm trying to achieve: Photoshop Design. Basically, I want the main content inside ...
I am currently working with the FullCalendar library and I have a unique request. I need to create a rolling 30-day view using the month grid style, complete with day headers. Additionally, I need the flexibility to set the starting day in the grid. For ...
I have successfully generated JSON data using PHP: $arr = []; foreach($userinfo as $record) { $arr[] = array( 'BAid' => $record->getBAid(), 'BCid' => $record->getBCid(), 'BA ...
I am currently working on implementing a disappearing form feature for a small web application. The idea is that once the initial form is submitted, it will be replaced by a new form. While my current code somewhat works, it only lasts for a brief moment b ...
We are currently working on implementing a maximum size limit of 2mb for images using ng2-file-upload. Below is the code snippet: uploader: FileUploader = new FileUploader({ url: URL, disableMultipart: true }); ... ... OnFileSelected(event) { ...
Is there a way to click on an element that is contained within a span tag? I have attached a screenshot for reference. https://i.sstatic.net/FkhDB.jpg I would greatly appreciate any help on how to successfully click on that specific element. ...
I am facing an issue with displaying a mat-selection-list based on a condition. Since adding the ngif condition, the data is consistently being set to undefined. I am struggling to identify the root cause of this problem. Thank you in advance for your assi ...
I have a table on my jsp page with multiple rows and columns. I want to ensure that visitors can easily follow along when they interact with the table - by highlighting the row or column they hover over with a different background color. Although the **hov ...