Currently, I am in the process of creating a profile page, and upon loading the page, I aim to have four unique text boxes move in different directions to their respective starting positions (e.g., bottom position transitions to the left, left turns into top, etc.).
My initial approach was to create individual triggers for each text box. However, this method does not align with best practices. As an alternative solution, I attempted to add parameters to the template trigger, allowing me to specify the left and top positions without creating separate triggers for each element.
Unfortunately, I encountered an error suggesting incorrect syntax usage. Regrettably, there is limited documentation available on this matter. If anyone has insights into the correct syntax or could provide guidance, it would be greatly appreciated as my search for solutions online has been challenging.
Please note: The error seems to be related to the presence of an incorrect comma.
Template parse errors:
Parser Error: Unexpected token , at column 24 in [{params: {left_pos: 50%, top_pos: 95%}}] in ng:///AppModule/FindLocalsComponent.html@43:19 ("ileSection__data">{{ focussedUser?.birthDate | age}}</h3>
</div>
<div [ERROR ->][@moveText]="{params: {left_pos: 50%, top_pos: 95%}}" class="header-box header-box--left">
Regarding the template, I experimented with the trigger (@moveText) on the left box:
<div class="profileSection" [ngClass]="{
'visible': markerClicked,
'not-visible': !markerClicked}
">
<!--there should be a profile picture displayed here-->
<!-- Other details that we want to display are conencted to the game, such details are currently unknown as we don't know more about the game-->
<div class="profileSection__header" *ngIf="markerClicked">
<img class="profileSection__img" *ngIf="!focussedUser?.profilePicture.uploaded" src="assets/images/blank-profile-picture.png" alt="no profile picture">
<img class="profileSection__img" *ngIf="focussedUser?.profilePicture.uploaded" [src]="'assets/images/profile-pictures/' + focussedUser?.profilePicture.name" alt="the profile picture">
<div class="header-box header-box--top">
<h3 class="profileSection__data">{{ focussedUser?.username }}</h3>
</div>
<div class="header-box header-box--right">
<h3 class="profileSection__data">Slytherin</h3>
</div>
<div class="header-box header-box--bottom">
<h3 class="profileSection__data">{{ focussedUser?.birthDate | age}}</h3>
</div>
<div [@moveText]="{params: {left_pos: 50%, top_pos: 95%}}" class="header-box header-box--left">
<h3 class="profileSection__data">Speciality: Potions</h3>
</div>
<button class="btn profileSection__btn profileSection__btn--first">Send PM</button>
<button class="btn profileSection__btn profileSection__btn--sec">Visit Profile</button>
</div>
As for the component:
@Component({
selector: 'find-locals',
styleUrls: ['[your custom CSS file URL]'],
templateUrl: '[your HTML template URL]',
animations: [
trigger('moveText', [
state('start', style({
left: '{{ left_pos }}',
top: '{{ top_pos }}'
}), {params: {left_pos: 0, top_pos: 0}}),
transition(':enter', [animate(2000)])
])
]
})
In your SCSS file:
.header-box {
display: block;
position: absolute;
width: 20%;
word-wrap: break-word;
text-align: center;
&--top {
top: 5%;
left: 50%;
transform: translateX(-50%);
}
&--right {
top: 50%;
right: 5%;
transform: translateY(-50%);
}
&--bottom {
top: 95%;
left: 50%;
transform: translateX(-50%);
}
&--left {
top: 50%;
left: 5%;
transform: translateY(-50%);
}
}
The animation is intended to occur on the right side of the screen where the text blocks are positioned at the bottom, right, left, and top edges of the container.