I searched on Google how to do what I want to do and tried some things but nothing works and I found a lot of AngularJS tutorial but not Angular6.. so I hope u will be able to help me.
I want to make a fade when my array's values change (on click) so I downloaded ng-animate but it doesn't give me the behaviour I'm looking for. Currently, I've got two components so the first:
HTML:
<div style="text-align: center; margin: 20px 0">
<div class="buttonSelector" *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)"
[ngClass]="{'selected': select.title === selectedArray.title.toUpperCase() }">
<p>{{ select.title }}</p>
</div>
</div>
<app-infoapp [selectedArray]="selectedArray"></app-infoapp>
There, I change my selectedArray by sending a variable to getSelectArray() then I send it to my 'app-infoapp' component. On my 'app-infoapp' component, we can find this:
import {Component, Input, OnInit} from '@angular/core';
import { trigger, transition, useAnimation } from '@angular/animations';
import {bounce, fadeIn} from 'ng-animate';
@Component({
selector: 'app-infoapp',
templateUrl: './infoapp.component.html',
styleUrls: ['./infoapp.component.css'],
animations: [
trigger('fade', [transition('* => *', useAnimation(fadeIn, {delay: 0.2}))])
]
})
export class InfoappComponent implements OnInit {
@Input() selectedArray;
fade: any;
constructor() {
}
}
So now when I refresh my page, the component is fading so that's cool but when I change my array by clicking on the button so another array is sent to my 'app-infoapp' component, it doesn't animate another time.
I hope I was clear and that u will be able to help me.
If you need more informations or if I wasn't clear tell me, I'll answer as fast as possible.
Thanks.
I tried the same example which i suggested to you (kdechant.com/blog/angular-animations-fade-in-and-fade-out) with your sample code and it is working:
Import BrowserAnimationsModule in the application module (app.module.ts):
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [...],
imports: [BrowserAnimationsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
parent.component.html
<div style="text-align: center; margin: 20px 0">
<div *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)">
<p>{{ select.title }}</p>
</div>
</div>
<app-infoapp [selectedArray]="selectedArray"></app-infoapp>
parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
public buttonSelector = [];
public selectedArray = [];
constructor() { }
ngOnInit() {
this.buttonSelector = [{title: 'save'}, {title: 'add'}, {title: 'edit'}, {title: 'delete'}];
}
getSelectArray(title: string) {
this.selectedArray.push({title:title});
}
}
info-app.component.html
<div class="info" *ngFor="let selected of selectedArray" [@simpleFadeAnimation]="'in'">
{{ selected.title }}
</div>
info-app.component.ts
import {Component, Input, OnInit} from '@angular/core';
import { trigger, transition, state, style, animate } from '@angular/animations';
@Component({
selector: 'app-infoapp',
templateUrl: './info-app.component.html',
styleUrls: ['./info-app.component.css'],
animations: [
trigger('simpleFadeAnimation', [
state('in', style({opacity: 1})),
transition(':enter', [
style({opacity: 0}),
animate(600 )
]),
transition(':leave',
animate(600, style({opacity: 0})))
])
]
})
export class InfoAppComponent implements OnInit {
@Input() selectedArray = [];
constructor() {}
ngOnInit() {}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.