I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right.
What I'm aiming for is to have the images appear from right to left when a button is clicked.
<div class="padding-10px" *ngFor="let flag of addedlanguage">
<img class="flag" [src]="flag" />
</div>
The flags are coming from an array.
For those looking to add some animations, check out this code snippet:
@Component({
selector: 'my-component',
template: `
<div class="padding: -10px" *ngFor="let flag of addedlanguage.reverse()">
<img class="flag" style="position: relative;" [src]="flag" [@flagAnimation]="flag" />
</div>
`,
animations: [
trigger('flagAnimation', [
state('*', style({
opacity: 1,
left: '*',
})),
state('void', style({
opacity: 0,
left: '100px',
})),
transition(':enter', animate('100ms ease-out')),
transition(':leave', animate('100ms ease-in'))
])
]
})
export class MyComponent {/* ... */}
This piece of code will nicely position your images on the right side and give them a smooth animation effect upon appearing.
Consider using addedlanguage.reverse() within the component.ts file that retrieves flag information
One potential approach is to reverse the order of elements in the array.
Here's an example:
<div class="box-20px" *ngFor="let item of reversedArray">
<p>{{ item }}</p>
</div>
If you want to align items from left to right or vice versa in CSS, you can utilize the float property.
To implement this in your code, you can create a class called "rightToLeft":
.rightToLeft{
float:right;
}
Then simply add this class to your div:
<button (click)="btnFlag=!btnFlag"></button>
<div class="padding-10px" [ngClass]={'righttoLeft':btnFlag} *ngFor="let flag of addedlanguage">
<img class="flag" [src]="flag" />
</div>
In your component.ts file, declare a variable
btnFlag:boolean.
For more information on floats, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Try out a demo here: https://jsfiddle.net/avinash2618/aotpaeuk/
My sidebar item's right border appears differently in Mozilla and Chrome. How can I resolve this issue? Here are the images from both browsers: https://i.stack.imgur.com/YGkkz.png https://i.stack.imgur.com/JxNs3.png "use client"; import { ...
I'm currently working on developing a basic single page application to monitor people's movements. While I've made good progress, I've encountered an issue with the click function in the child elements of each person div. When I try to ...
I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...
As I'm configuring a Pyramid back-end along with an Angular front-end application, I encounter an issue. When Angular sends an http GET request to Pyramid, the data received on the Angular side is not as expected. It seems like the id is being recogni ...
When using the Chrome Browser on mobile to open a news link from Google News, a new tab is opened. To return to Google News, users can click on the white-highlighted "left arrow" below or find a small header with a "<" symbol above to navigate back. Ho ...
I am new to AngularJS and I have a requirement to assign CSS properties to a component at the JavaScript file level. When I debug my code after applying the CSS styles to the component, I can see that all the applied CSS properties are behaving as expected ...
Check out the snippet of code I'm working with: removeAlert() : Observable<boolean> { Swal.fire({ title: 'delete this file ?', text: 'sth', icon: 'warning', showCancelButton: true, ...
One Angular 4 component that I have is like this: export class MenuComponent { constructor(private menuService: MenuService) { } @Input(nodes):any; getMenu(path:string): void { this.menuService.getData(path).subscribe(data => { // Re ...
I'm facing an issue with uploading a file using jQuery AJAX. Although I can see all the details of the file object such as its name and size, when I check the console with formdata.get("files"), the context.request.files size always shows zero. It see ...
My issue is: I am facing a problem with a dynamically generated table on my page using ajax-jquery My table consists of 3 <td> elements: 1 for name and 2-3 for checkboxes representing parameters I have set up an event for all input checkboxes to d ...
I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...
Currently, I am working on a mockup using Bootstrap 4 and have encountered an unusual element inside the container where the background extends beyond the container. I'm not sure how to address this issue effectively. I attempted to use position: abso ...
I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...
I'm having some trouble creating a dropdown menu. The submenu I've created is appearing behind my wrapper, page, and content. I've attempted to adjust the z-index of various elements and have even tried setting the z-index of my menu and sub ...
Currently working on a project for the Odin Project front-end web development. My task involves creating a grid using javascript/jQuery. I attempted to use the createElement method but have encountered an issue in making the div visible within the html. Am ...
https://i.sstatic.net/oqRwR.jpg In the image above, I need to adjust the position of the textbox to align it with the TextArea. Is there a Bootstrap class that can help me achieve this? My current version of Bootstrap is 3.3.6. HTML &l ...
Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting ...
I am looking to implement a sticky header on all tables in my web application, which is built on PHP. As the amount of data continues to grow, search results are fetching more records that may not be visible. I am primarily a PHP programmer and do not have ...
Looking to customize Material UI's Switch component with text inside? Check out the image below for an idea of what I'm going for. https://i.stack.imgur.com/KadRZ.png Take a look at my code snippet: import React from 'react'; import S ...
I created a material tree with the ability to select up to 42 elements. Once the limit is reached, the nodes become disabled. However, I encountered an issue where if some child nodes are selected while others are disabled due to reaching the limit, the pa ...