Build Effective Web Application

🔥With type-collector package 🔥

Shai Ben Shimol
Jun 12 · 3 min read

🔭 In this tutorial we will learn how to build effective single page application And how to use type-collector package in Angular 7

What is type-collector ❓

type-collector is a fast, simple (and rich), zero-configuration node package that manage effective browser application storage for Typescript. Web Storage can only store strings. This factory module let you handle Object, Array and other types to be stored in and retrieved from them in Local Storage, Session Storage and Cookies.

See documents here

type-collector with Angular 7

$ npm install -g @angular/cli

Generate new angular application

$ ng new angular-type-collector
$ cd angular-type-collector

Install type-collector package from:

$ npm i --save type-collector


$ yarn add type-collector


Let’s make something with Storage,

  • Generate Post Module, Post Service ,Component Post and Post Model.
$ ng g m post
$ ng g c post
$ ng g i post
$ ng g s post/post
  • Open post.ts and type
  • Open post.module and Import HttpClientModule
  • Open post.service.ts and Type
  • Open app.module.ts and Import PostModule

Storage — Add

Change your app.component.ts to:

We get posts array from jsonplaceholder and add id and body into local storage.

Storage — Get

Let’s get some posts from local storage

let storage = TypeCollector.Factory.Storage;storage.get(100).then(res =>{console.log(res);
   //cupiditate quo est a modi....})

Storage — Remove

Will remove value by id


Storage — Remove All

Will clean the local storage from browser


LocalStorag vs SessionStorage vs Cookie

Storage, Sessions & Cookies Objects

In this example I’ll show you how to store and retrieve Object in Web Storage With type-collector.

  • Let’s Create User Interface
  • Init User model and Factories
  • Add user object in storage, session and cookie
Local Storage
Session Storage
  • Retrieve Object

🍺Cheers! 🍺


2 claps
Shai Ben Shimol

Written by

Software engineer, Specialist in Web and Mobile development...b