Angular 🇺🇦 - practical notes

📄 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

This media is not supported in your browser

VIEW IN TELEGRAM

📄 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

Angular 🇺🇦 - practical notes

📄 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

Angular 🇺🇦 - practical notes

📄 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

Angular 🇺🇦 - practical notes

This media is not supported in your browser

VIEW IN TELEGRAM

📄 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

Angular 🇺🇦 - practical notes

📄Managing the Sticky Navigation: Angular, Tailwind, and RxJS

#angular #rxjs #tailwind #navbar #ui_element

Explanation:
— `public readonly isSticky$ = fromEvent(window, 'scroll').pipe(...):` This defines the isSticky$ observable using RxJS operators. It listens for scroll events on the window, maps them to the vertical scroll position (window.scrollY), filters out consecutive duplicate values, and then maps the scroll position to a boolean value indicating whether the scroll position is greater than 24 (assuming 24 is a threshold value for determining when the navigation bar should become sticky).

— `distinctUntilChanged()`: This operator filters out consecutive duplicate values emitted by the observable.

— `map((scrollTop: number) => scrollTop > 24)`: This operator maps the scroll position (scrollTop) to a boolean value, indicating whether the user has scrolled past a certain threshold (24 in this case).

— `(isSticky$ | async) === true`: This condition checks if the value emitted by the isSticky$ is true or not. Which makes it convenient since you don’t have to unsubscribe the observable.

— `sticky top-0 z-10 shadow-lg opacity-95 bg-white`: These classes from TailWind will help enhance the sticky experience when the users scroll down.

✅ Article link

410 views05:59

Angular 🇺🇦 - practical notes

📄 Infinite Scroll Component in Angular

#angular #rxjs #ui_element #infiniteScroll

✅ Article link

🎁

Code Link

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

623 views05:59

Angular 🇺🇦 - practical notes

This media is not supported in your browser

VIEW IN TELEGRAM

📄 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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1👍1

564 views05:59