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

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?

Continue reading...