angular 4 add img from right to left onclick

Question

I am working with angular 4. My functionality of adding flag is completed, but the flags are appearing from left to right.

What I want is that images should be appeared from right to left, on clicking button.

<div class="padding-10px" *ngFor="let flag of addedlanguage">
    <img class="flag" [src]="flag" />
</div>

I am getting flags from an array.

When you say `from right to left` you mean your images should be inverted, or you mean the last image added should be on the left ? — , Jan 11 '18 at 09:24
_What I want is that images should be appeared from right to left, on clicking button._ Do you mean that the img's should be animated from right to left? — Brampage, Jan 11 '18 at 09:28
yes i mean that last image should be on the left and should be animated from right to left @Brampage — Raj Rana, Jan 11 '18 at 09:30
@RajRana Take a look at my [answer](https://stackoverflow.com/a/48203556/1265945), if you want a transition/animatino of your images take a look at this [plunker](https://stackoverflow.com/a/37217476/1265945), and this [answer](https://stackoverflow.com/questions/37217314/how-can-i-animate-ngfor-in-angular). — Brampage, Jan 11 '18 at 09:32
What you want ? An animation or just reverse the images with a flick ? — Ashraful Islam, Jan 11 '18 at 09:35

score 0 · Answer 1 · answered Jan 11 '18 at 09:25

0

try addedlanguage.reverse() in the component.ts file where you are getting all flags

answered Jan 11 '18 at 09:25

phpdroid

1,642
1
18
36

score 0 · Answer 2 · answered Jan 11 '18 at 09:25

0

A possible solution would be to reverse the array.

Like this:

<div class="padding-10px" *ngFor="let flag of addedlanguage.reverse()">
    <img class="flag" [src]="flag" />
</div>

answered Jan 11 '18 at 09:25

Brampage

6,014
4
33
47

Avinash Dangi · Answer 3 · 2018-01-11T09:51:37.920

You can use float property in css to align items from left to right and vice-versa.

In your code , you can have a class named rightToLeft

.rightToLeft{
   float:right;
 }

Then add this class to your div like this

    <button (click)="btnFlag=!btnFlag"></button>
    <div class="padding-10px" [ngClass]={'righttoLeft':btnFlag} *ngFor="let flag of addedlanguage">
      <img class="flag" [src]="flag" />
    </div>

Create a variable btnFlag:boolean in your component.ts file.

More on floats :https://developer.mozilla.org/en-US/docs/Web/CSS/float

Visit for demo : https://jsfiddle.net/avinash2618/aotpaeuk/

thanks with the help of this demo i maded few change and i got it — Raj Rana, Jan 11 '18 at 10:12

score 0 · Accepted Answer · 2018-01-11T10:31:03.750

0

Since you want animations, here is the code

@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 will align your images to the right, an animate them when they appear.

edited Jan 11 '18 at 10:31

answered Jan 11 '18 at 09:47

images should appear from right to left , means the image added first should at right and last image added should appear at left corner – Raj Rana Jan 11 '18 at 10:07
Then feel free to edit my post and let me know when you're done, so that I can accept it ! – Jan 11 '18 at 10:11
Oh, great then :D – Jan 11 '18 at 10:27

angular 4 add img from right to left onclick

4 Answers4