peplocanto

Angular Akita Store

Intro

Akita is a fantastic and lightweight library for state management.

Arch

<namespace>
  L <namespace>.store.ts
  L <namespace>.service.ts
  L <namespace>.query.ts  

peplocanto

Custom ngIf directive

Intro

Setup for a custom ngIf directive.

Arch

 app
 L common
   L directives
     L <name>.directive.ts

peplocanto

// best practice arch
// app
//  L core
//      L core.module.ts
//      L core.providers.ts
//      L core.model.ts

// core.module.ts

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';

peplocanto

// best practice arch
// app
//  L hooks
//      L useIsSsr.hook.ts

// useIsSsr.hook.ts
import { useState, useEffect } from "react";

const useIsSsr = () => {
  const [isSsr, setIsSsr] = useState(true);

peplocanto

// core.providers.ts
import { APP_INITIALIZER } from '@angular/core';

export const load<domain>ServiceFnFactory = (<domain>Service: <domain>Service): (() => Promise<any>) => () => {
  <domain>Service.init();
  return Promise.resolve();
};

export const APP_INITIALIZER_PROVIDERS: Provider[] = [
  {

peplocanto

Angular Carousel with SwiperJS

Intro

An Angular carousel created with SwiperJs.
Carousel component is programmed to accept every kind of template passed as carouselItem and return data passed as carouselData to the template.
This "short circuit" allows the Carousel component to stay transparent and agnostic, delegating the logic and design to the component that uses the Carousel.

---

---

Carousel Component

Html

peplocanto

Click & Drag Scroll in Vanilla JS

const DELTA = 6;
const CONTAINER_CLASS = 'drag-to-scroll__container';

const sliders = document.querySelectorAll('[data-drag-to-scroll]');

let isDown = false;
let isMoving = false;

peplocanto

Browser Cache Api

interface CacheConfig {
  name: string;
  validTime: number;
  endpoints: string[];
  options?: CacheOptions;
  clearOnHide?: boolean;
}

peplocanto

Type inference & Type check at Runtime

How connect typescript and javascript in our code

---

As developers, we strive to write robust and error-free code. One of the ways to achieve this is by leveraging TypeScript's powerful type inference system.

This code snippet demonstrates how we can infer TypeScript types from JavaScript variables using the as const syntax. By using the as const syntax, we can tell TypeScript that the variable's values are constant and should not be mutated. This allows TypeScript to infer literal types for the values, making our code more type-safe and reducing the likelihood of runtime errors.

peplocanto

Attack of the Clones: Deep Copy vs. Shallow Copy

In JavaScript (and TypeScript) understanding the concepts of deep copy and shallow copy is essential for maintaining data integrity.

Considering these models:

interface Jedi {
  name: string;
  species: Species;