📄 Angular Simple Tabs

#angular #ContentChildren #ngTemplate #ui_element

✅ Article link: https://javascript.plainenglish.io/angular-template-powers-4-7ffc219d2db0

🎁 Code link: https://stackblitz.com/edit/stackblitz-starters-4e6zq8?file=src%2Fmain.ts

🔄 Microinteractions: The Secret of Great App Design 1/5

#ui #design

Show System Status
The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is going on. When users trigger an operation, they expect to get immediate response. But there are situations when an app needs some time to complete an operation. So, the interface should keep the user enlightened about what is happening.

What is a Microinteraction Anyway?
Microinteractions are the contained product moments that do one small task.

As first described in Dan Saffer’s book Microinteractions, these tiny details typically serve these essential functions:

- Communicate feedback or the result of an action.
- Accomplish an individual task.
- Enhance the sense of direct manipulation.
- Help users visualize the results of their actions and prevent errors.

✅ Article link: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

🔄 Microinteractions: The Secret of Great App Design 2/5

#ui #design

Highlight Changes
When any important event happens, we need to show notifications to inform users about that. Animation can help achieve this goal. It will attract users attention and won’t let users overlook what you think is important.

✅ Article link: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

🔄 Microinteractions: The Secret of Great App Design 3/5

#ui #design

Keep Context
Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen. This is especially true for mobile devices and smart watches, because it’s simply impossible to fit a lot of information on one screen and any screen state change should be crystal clear for your users.

✅ Article link: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

🔄 Microinteractions: The Secret of Great App Design 4/5

#ui #design

Visualize Input
Data input is one of the most important elements of any application. And micro-interactions turn this process into something special. You can use existing visual elements to deliver feedback—just add nice visual details.

✅ Article link: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

🔄 Microinteractions: The Secret of Great App Design 5/5

#ui #design

Call to Action
Microinteractions have the power to encourage users to actually interact. By bringing empathy in user experience, you have a better chances users will make a move. But make sure the visual cues and animations are appropriate for your users. And keep longevity in mind — will the microinteraction get annoying on the 100th use, or is it universally clear and unobtrusive?

✅ Article link: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf

📄 Angular carousel

#angular #ui_element

✅ Article link: https://medium.com/@su.ede.kovacs/angular-carousel-e6953aa38f77

🎁 Code link: https://stackblitz.com/edit/angular-dy6ybx?file=src%2Fcarousel.component.ts

📄 Resizable Columns in Angular Table

#angular #directive #ui_element

✅ Article link: https://levelup.gitconnected.com/how-to-create-resizable-columns-in-angular-scrollable-table-a-step-by-step-guide-5b8f766c1f60

🎁 Code link: https://stackblitz.com/edit/angular-6x5egd?file=src%2Fapp%2Fdirectives%2Fcolumn-resize.directive.ts

📄 Angular Animations Tutorial: Route Transitions

#angular #ui_element #provideRouter #provideAnimations

export const routeTransition = trigger(
  'routeTransition', [
  transition('* => *', [
    query(':enter', [
      style({ 
        opacity: 0, 
        scale: 0.9 
      }),
    ], { optional: true }),
    query(':leave', [
      animate('0.2s', style({ 
          opacity: 0, 
          scale: 0.9 
      }))
    ], { optional: true }),
    query(':enter', [
      animate('0.2s', style({ 
        opacity: 1, 
        scale: 1 
      }))
    ], { optional: true })
  ])
])

    <app-nav></app-nav>
    <div 
      [@routeTransition]="data" 
      style="display: contents"
    >
        <router-outlet></router-outlet>
    </div>

✅ Article link

🎁 Code link

❤️ 🤓 Angular Animations Functions

#angular #animations #ui_element

Example explanation:

Triggers (trigger):
parentTrigger: Defines animations for the parent element.
childTrigger: Defines animations for the child elements.

States (state):
parentTrigger: Has the states start and end.
childTrigger: Has the states visible and hidden.

Styles (style):
Defines final and intermediate styles for different states and transitions.

Transitions (transition):
Defines how the animation should occur between states.

Animate (animate):
Defines the duration and timing function of the animations.

Keyframes (keyframes):|
Used in the transition from visible to hidden in the child elements to create detailed intermediate animations.

Group (group):
Used in the transition from start to end in parentTrigger to animate multiple properties in parallel.

Sequence (sequence):
Used in the transition from end to start in parentTrigger to animate multiple properties in sequence.

Query (query):
Used in the transition from hidden to visible in childTrigger to select and animate child elements.

Stagger (stagger):
Used with query to apply a delay between the animations of the child elements, creating a cascading effect.

✅ Article link 🎁 Code Link

💜 🆚 Angular Animations: Animating Multiple Items in Parallel

#angular #animations #ui_element

✅ Article link | 🎁 Code link