Angular 🇺🇦 - practical notes

🔄 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

Please open Telegram to view this post

VIEW IN TELEGRAM

153 views11:00

🔄 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

Please open Telegram to view this post

VIEW IN TELEGRAM

163 views11:01

🔄 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

Please open Telegram to view this post

VIEW IN TELEGRAM

172 views11:01

🔄 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

Please open Telegram to view this post

VIEW IN TELEGRAM

183 views11:01

📄 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

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥2

235 views06:59

📄 Reusable Checkbox Input in Angular

#angular #ui_element #ControlValueAccessor

All we need to do is to use its selector inside our <form> HTML element with FormGroup:

<app-checkbox-input 
   formControlName="fullName" 
   label="Check by Full Name" 
></app-checkbox-input>

🚩 > Angular v16

✅ Article link: https://blog.bitsrc.io/how-ive-created-reusable-checkbox-input-in-angular-16-5fd470f26104

284 views07:00

📄 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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍1🔥1

337 views09:59

📄 Deactivate Route Guards in Angular

#angular #guard #ui_element

The CanDeactivate route guard in Angular is responsible for determining if a route can be deactivated. It is commonly used when you want to check if the user is allowed to leave a particular component or route, perhaps due to unsaved changes or other dynamic conditions.

✅ Article link

🔥2

461 views06:59

📄 Simple Unsaved Data Changes Guard in Angular 17+

#angular #guard #ui_element

...when a user wants to navigate to other routes having pending data changes in the current page...

✅ Article link

👍5

494 views06:59

📄 Customizable Angular animations

#angular #animations #ui_element

...A component with customizable animations might look like this...

// collapse.ts

const closedStyle = style({ 
  height: 0 
});

const openStyle = style({ 
  height: '*' 
});

const timings = '{{duration}}ms linear';

const defOptions: AnimationOptions = { 
  params: { 
   duration: 300 
  } 
};

export const collapse = trigger('collapse', [
  transition(
    ':enter',
    animation([closedStyle, animate(animateTimings, openStyle)]),
    defaultOptions
  ),
  transition(
    ':leave',
    animation([openStyle, animate(animateTimings, closedStyle)]),
    defaultOptions
  ),
]);


// bonus.component.ts

@Component({
  animations: [collapse],
  host: {
    '[@collapse]': 'animationOptions',
  },
})
export class BonusComponent implements OnInit {
  @Input() public duration = 300;
  public options!: IAnimationOptions<string>

  public ngOnInit(): void {
    this.options = {
      value: '_',
      params: { 
         duration: this.duration 
      },
    };
  }
}

✅ Article link

👍3❤1🔥1

461 viewsedited 07:00