DEV Community: Junaid Ramzan

Render content based on viewport size with a directive

Junaid Ramzan — Mon, 22 Aug 2022 11:04:00 +0000

In this post I am going to describe how to use angular https://material.angular.io/cdk/layout/overview to build a structural directive that controls the rendering of components.

Structural directives are directives which change the DOM layout by adding and removing DOM elements. They are prefixed with the asterisk symbol(*). You may have used (*ngIf, *ngSwitch...)

Detailed explanation here

npm i @angular/cdk // install the angular cdk

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
import { Directive, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core'
import { Subscription } from 'rxjs'

type BreakpointSizes = 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | 'Desktop' | `(${'max-width'|'min-width'}: ${number}px)`

const sizes = new Map([
  ['XSmall', Breakpoints.XSmall],
  ['Small', Breakpoints.Small],
  ['Medium', Breakpoints.Medium],
  ['Large', Breakpoints.Large],
  ['XLarge', Breakpoints.XLarge]
])

@Directive({
  standalone: true,
  selector: '[appIfViewportMatch]'
})
export class IfViewportMatchDirective implements OnDestroy {
  private subscription!: Subscription
  private hasView = false

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private bpObserver: BreakpointObserver
  ) { }

  @Input() set appIfViewportMatch(mq: BreakpointSizes) {
    if (this.subscription) return
    const size = sizes.get(mq)

    this.subscription = this.bpObserver.observe(size || mq).subscribe(({ matches }) => {
      this.render(matches)
    })
  }

  ngOnDestroy(): void {
    this.subscription && this.subscription.unsubscribe()
  }

  private render(matches: boolean) {
    if (!this.hasView && matches) {
      this.viewContainer.createEmbeddedView(this.templateRef)
      this.hasView = true
    } else  {
      this.viewContainer.clear()
      this.hasView = false
    }
  }
}

The directive listens for viewport sizes and when a media query is matched the content is rendered into the DOM.

It only subscribes once on the first set to avoid multiple subscriptions.

This type provides some intellisense for the accepted values. It also provides the option to provide a custom media query.

type BreakpointSizes = 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | 'Desktop' | `(${'max-width'|'min-width'}: ${number}px)`

Examples:

<!-- Only renders when the viewport is more than 600px -->
<hello name="{{ name }}" *appIfViewportMatch="'(min-width: 600px)'"></hello>

<!-- Mobile view -->
<h1 *appIfViewportMatch="'XSmall'">On mobile</h1>

Here you can see a working example

Intro to Big O

Junaid Ramzan — Tue, 09 Aug 2022 11:56:20 +0000

Before I start talking about Big O it's good to know why do we need to know about it.

Let's assume that we have to different algorithms. How do we know which one is more efficient? how do we compare them? Here is where Big O comes into play.

Big O is a set of rules and terms that allows us to describe, classify, analyse, compare and discuss how efficient an algorithm is. It describes how the runtime of an algorithm grows as the input grows.

Some Big O complexities

O(1)

Constant time the runtime does grow as the input grows. If your algorithm has this complexity, probably can't do it better.

For example, this function has O(1) complexity, because the runtime its not affected as the input grows. It always do one operation if we use sum(1, 2) or sum(100000, 1000000).

function sum(n1, n2) {
  return n1 + n2
}

Operations that are considered constant:

Assigning variables
Arithmetical operations
Accessing element in an array by index
Accessing values in object by key

O(n)

Linear The runtime is bound to the input size, the runtime will grow as the input grows. Most of the times, these type of algorithms has some sort of looping mechanism(for, while, recursion).
In a loop, the complexity is the length of the loop.

function logNumbersUntil(n) {
  for (let i = 0; i < n; i++) {
    console.log(i)
  }
}

How to set page title in angular 14

Junaid Ramzan — Tue, 09 Aug 2022 11:01:00 +0000

In the new version of angular 14 a new cool feature has been added that allows to set the page title easily based on the current route that is rendered.

The Route interface has been expanded with a new property called title.

This property can be either a static string or a custom resolver to set a dynamic title.

Example:

export const routes: Routes = [
  {
    path: 'hello',
    title: 'Hello!',
    ...
  }
]

With Resolver:

@Injectable({ providedIn: 'root' })
class HelloTitleResolver implements Resolve<string> {
  constructor(private randomEmoji: RandomEmojiService) { }

  resolve(route: ActivatedRouteSnapshot) {
    return this.randomEmoji.emoji().pipe(
      map(e => `Hello ${e}!`)
    );
  }
}

export const routes: Routes = [
  {
    path: 'hello',
    title: HelloTitleResolver,
    ...
  }
]

Angular also provides a PageTitleStrategy that allows to set a global strategy to handle the title for all routes.

How not to include internal code in ts declaration file

Junaid Ramzan — Sat, 11 Sep 2021 15:15:37 +0000

Typescript provides a mechanism to not include internal code in a declaration file. It can be useful for building a public library.

We can use the stripInternal: true property in our tsconfig.json file. This will enable typescript compiler to check the /** @internal */ JS DOC comment.

main.ts

Add the /** @internal */ JS DOC comment .
By default typescript compiler will ignore this comment but we can enable it in tsconfig.json file.

/** @internal */
function init() {
  console.log('Hello!!')
}

In tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "declaration": true,
    "stripInternal": true
  }
}

Compile and check your declaration main.d.ts(in this case it will have the same name as main.ts file) file to not include the init function declaration.