Execute animation in angular 4 on click only not on page load

Question

I have a input field which displays on page load.

On click of search i'm displaying result.

On click of hide your search parameter i'm hiding search input and on click of show i'm showing it.

But the problem is that as i have applied slide in on search input field which load on page load it is animating. I want to add animation only when i click on hide or show your search parameter link.

This is what i have tried so far

<div class="row seven-cols" *ngIf="showSearch" [@slideIn]>
            <div class="col-md-2">
        <input class="form-control" placeholder="Store#">
                    </div>
                    <!-- Search Button -->
    <button type="button"[disabled]="isValidStoreId || !storeMod"
                            (click)="search(storeMod)">
                            {{componentContents.searchButton}}
                        </button>
                </div>

This is the code to toggle search

<span class="filterPipe"><a href="javascript:void(0)" (click)="showSearch = !showSearch" class="toggleTxt">{{ showSearch == true ? 'Hide' : 'Show' }} {{componentDetails.searchToggleHead}}</a></span>

this is the code for my slide in/out animation

 animations: [
    trigger('slideIn', [
      state('*', style({ 'overflow-y': 'hidden' })),
      state('void', style({ 'overflow-y': 'hidden' })),
      transition('* => void', [
        style({ height: '*' }),
        animate(250, style({ height: 0 }))
      ]),
      transition('void => *', [
        style({ height: '0' }),
        animate(250, style({ height: '*' }))
      ])
    ])
  ]

Please suggest me how to handle this?

Instead of using void and * states, use named states. This way, it does nothing when appearing, and you can apply the names states on click. — user4676340
– user4676340, Commented Oct 11, 2018 at 6:53
Can you please give me a example of that as i'm new to angular animations — user1881845
– user1881845, Commented Oct 11, 2018 at 7:09

Vahid · Accepted Answer · 2018-10-11 07:30:10Z

3

You are using * => void and void => * which are equivalent to :enter and :leave. They're fired every time the element appears/disappears (using *ngIf).

To control the animation and fire it just on click, you should use custom transitions (active => inactive and inactive => active in my code below).

Change your animation like this:

animations: [
  trigger('slideIn', [
    state('active', style({ 'overflow-y': 'hidden' })),
    state('inactive', style({ 'overflow-y': 'hidden' })),
    transition('active => inactive', [
      style({ height: '*' }),
      animate(250, style({ height: 0 }))
    ]),
    transition('inactive => active', [
      style({ height: '0' }),
      animate(250, style({ height: '*' }))
    ])
  ])
]

Then in your HTML, remove *ngIf and use the animation like this:

<div class="row seven-cols" [@slideIn]="showSearch?'active':'inactive'">

I haven't tested the code. But it should work. Let me know if there's any error.

If you have to use `*ngIf`

If using *ngIf is necessary, you can have another variable and switch it on and off on animation done. Like this:

(@slideIn.done)="animDone($event)"

And

animDone(e: AnimationEvent) => {
  if (e.toState === 'active') showSearchNgIf = true;
  else if (e.toState === 'inactive') showSearchNgIf = false;
}

answered Oct 11, 2018 at 7:30

Vahid

7,7075 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1881845 Over a year ago

Without *ngIf do i need to set showSearch active/inactive on click of link?

user1881845 Over a year ago

Without ngif it is not hiding search bar

Vahid Over a year ago

@user1881845 yes same as your code, you need to set showSearch active/inactive on click of link. Also thanks for reporting

Collectives™ on Stack Overflow

Execute animation in angular 4 on click only not on page load

1 Answer 1

If you have to use `*ngIf`

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

If you have to use *ngIf

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

If you have to use `*ngIf`