Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Answer:46 #786

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/angular/45-react-in-angular/src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
providers: [],
providers: [provideAnimations()],
};
21 changes: 21 additions & 0 deletions apps/angular/46-simple-animations/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<div class="mx-20 my-40 flex gap-5">
<section>
@for (item of state.paragraphItems; track $index) {
<div>
<app-paragraph
[data]="{ title: item.title, content: item.content }"></app-paragraph>
</div>
}
</section>

<section>
<span [@listAnimation]="state.listItems.length">
@for (item of state.listItems; track $index) {
<div class="list-item">
<span>{{ item.category }}</span>
<span>{{ item.description }}</span>
</div>
}
</span>
</section>
</div>
144 changes: 76 additions & 68 deletions apps/angular/46-simple-animations/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { Component } from '@angular/core';
import {
animate,
query,
stagger,
style,
transition,
trigger,
} from '@angular/animations';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ParagraphComponent } from './component/paragraph.component';

@Component({
standalone: true,
imports: [],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [ParagraphComponent],
selector: 'app-root',
styles: `
section {
Expand All @@ -17,72 +27,70 @@ import { Component } from '@angular/core';
}
}
`,
template: `
<div class="mx-20 my-40 flex gap-5">
<section>
<div>
<h3>2008</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
mollitia sequi accusantium, distinctio similique laudantium eveniet
quidem sit placeat possimus tempore dolorum inventore corporis atque
quae ad, nobis explicabo delectus.
</p>
</div>

<div>
<h3>2010</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
mollitia sequi accusantium, distinctio similique laudantium eveniet
quidem sit placeat possimus tempore dolorum inventore corporis atque
quae ad, nobis explicabo delectus.
</p>
</div>

<div>
<h4>2012</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
mollitia sequi accusantium, distinctio similique laudantium eveniet
quidem sit placeat possimus tempore dolorum inventore corporis atque
quae ad, nobis explicabo delectus.
</p>
</div>
</section>

<section>
<div class="list-item">
<span>Name:</span>
<span>Samuel</span>
</div>

<div class="list-item">
<span>Age:</span>
<span>28</span>
</div>

<div class="list-item">
<span>Birthdate:</span>
<span>02.11.1995</span>
</div>
templateUrl: 'app.component.html',
animations: [
trigger('listAnimation', [
transition(':enter', [
query(':enter', [
style({ transform: 'translateX(-10%)', opacity: 0 }),
stagger(50, [
animate(
'0.4s ease-in-out',
style({ transform: 'translateX(0%)', opacity: 1 }),
),
]),
]),
]),
]),
],
})
export class AppComponent {
state: State = {
paragraphItems: [
{
title: '2008',
content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae mollitia
sequi accusantium, distinctio similique laudantium eveniet quidem sit
placeat possimus tempore dolorum inventore corporis atque quae ad, nobis
explicabo delectus.`,
},
{
title: '2010',
content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae mollitia
sequi accusantium, distinctio similique laudantium eveniet quidem sit
placeat possimus tempore dolorum inventore corporis atque quae ad, nobis
explicabo delectus.`,
},
{
title: '2012',
content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae mollitia
sequi accusantium, distinctio similique laudantium eveniet quidem sit
placeat possimus tempore dolorum inventore corporis atque quae ad, nobis
explicabo delectus.`,
},
],
listItems: [
{ category: 'Name:', description: 'Samuel' },
{ category: 'Age:', description: 28 },
{ category: 'Birthdate:', description: '02.11.1995' },
{ category: 'City:', description: 'Berlin' },
{ category: 'Language:', description: 'English' },
{ category: 'Like Pizza:', description: 'Hell yeah' },
],
};
}

<div class="list-item">
<span>City:</span>
<span>Berlin</span>
</div>
type State = {
listItems: ListItem[];
paragraphItems: ParagraphItem[];
};

<div class="list-item">
<span>Language:</span>
<span>English</span>
</div>
type ListItem = {
category: string;
description: string | number;
};

<div class="list-item">
<span>Like Pizza:</span>
<span>Hell yeah</span>
</div>
</section>
</div>
`,
})
export class AppComponent {}
type ParagraphItem = {
title: string;
content: string;
};
3 changes: 2 additions & 1 deletion apps/angular/46-simple-animations/src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
providers: [],
providers: [provideAnimations()],
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div [@movingAnimation]>
<h3>{{ data().title }}</h3>
<p>
{{ data().content }}
</p>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';

@Component({
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-paragraph',
templateUrl: 'paragraph.component.html',
animations: [
trigger('movingAnimation', [
transition(':enter', [
style({ transform: 'translateX(-30%)', opacity: 0 }),
animate(
'0.5s ease-in-out',
style({ transform: 'translateX(0%)', opacity: 1 }),
),
]),
]),
],
})
export class ParagraphComponent {
data = input.required<{ title: string; content: string }>();
}