Wanna see something cool? Check out Angular Spotify 🎧

All Posts tagged as "TypeScript"

Align React Material UI Dialog to the top instead of center

We need to override two custom classes for Material Dialog component always to have it stick to the top.

TypeScript - Property 'onerror' does not exist on type 'EventTarget'

How to fix this kind of issue - Property 'onerror' does not exist on type 'EventTarget'

TypeScript data structure: Stack

My implementation for Stack using TypeScript

TypeScript data structure: Queue

My implementation for Queue using TypeScript

TypeScript data structure: Singly linked list

My implementation for singly linked list using TypeScript

TypeScript unknown vs any types

The main difference between unknown and any is that unknown is much less permissive than any: we have to do some form of checking before performing most operations on values of type unknown, whereas we don't have to do any checks before performing operations on values of type any.

Convert Promise to Observable

You'll need those tips one day if you get used to RxJS 🤣

Migrate Angular to ESLint

I'll show you how to migrate from TSLint to ESLint and using husky to run lint every time you try to make a commit

Capture picture from your Webcam in Angular

A simple walk through how to use the browser MediaDevices for capturing picture from a webcam in Angular

Observable for Angular Output

Do you know you can use Observable for Angular Output?

Build an Angular component to display snow ❄️ effect

The holiday session is coming. Let add a simple snow effect to your Angular application ❄️❄️❄️

Disable a reactive form control using custom directive

We will write a custom directive to disable a reactive form control by passing a boolean flag on the template

Angular Jira Clone Part 08 - Create placeholder loading (like Facebook's cards loading)

My eight tutorial is to explain how to build a placeholder loading component

Angular Jira Clone Part 07 - Build a rich text editor

My seventh tutorial will focus on another kind of text editor - a rich text HTML editor

How to iterate over objects in TypeScript

Use let k: keyof T and a for-in loop to iterate objects when you know exactly what the keys will be or Object.entries to iterate over the keys and values of any object.

Use async functions instead of callbacks for asynchronous code

Prefer async/await to raw Promise when possible. They produce more concise, straightforward code and eliminate whole classes of errors.

The different between type and interface in TypeScript

Should you use type or interface? For complex types, you have no choice: you need to use a type alias. But what about the simpler object types that can be represented either way? To answer this question, you should consider consistency and augmentation. Are you working in a codebase that consistently uses interface? Then stick with interface. Does it use type? Then use type.

Angular Jira Clone Part 06 - Build a markdown text editor

My sixth tutorial will focus on another interesting feature - a markdown text editor

Apply types to entire function expressions when possible

Consider applying type annotations to entire function expressions, rather than to their parameters and return type. If you're writing the same type signature repeatedly, factor out a function type.

Angular Jira Clone Part 05 - Build an interactive drag and drop board

My fifth tutorial will focus on one of the most interesting feature - drag and drop board

Angular Jira Clone Part 04 - Build an editable textbox

My fourth tutorial will focus on the first custom UI element - editable textbox

Angular Jira Clone Part 03 - Setup Akita state management

My third tutorial will go further into the application state management with Akita

Angular Jira Clone Part 02 - Build the application layout with flex and TailwindCSS

My second tutorial will walk you through how to build the application layout that has navigation, sidebar and content section

Space Invaders game built with Phaser 3 and TypeScript

There were quite a lot of changes between Phaser 2 and 3 but I like version 3 better. It made the code much more readable and structure

A childhood memory Tetris game built with Angular 10 and Akita

I made a retro Tetris game with Angular. The first game that I have ever built :)

Angular Jira Clone Part 01 - Create a new repository and set up a new Angular application with CLI

I spent my spare time to build a cloned Jira app with Angular 9, Akita and ng-zorro in about two weeks, including the weekend

Angular Jira Clone Part 00 - Prerequisites

You should know some basic Angular, TypeScript and git knowledge before starting

I built a Jira clone application with Angular 9, Akita and ng-zorro

I spent my spare time to build a cloned Jira app with Angular 9, Akita and ng-zorro in about two weeks time, including the weekend.

NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack

Repost my killer answer on StackOverflow with more than 600 votes

Angular - Using Visitor design pattern with Typescript

If you have multiple concrete classes that inherit from the same base class, or implement the same interface. You should consider using visitor pattern. It will save you from dozens of if-else block or switch/case and typecasting

Convert C# class to TypeScript interface

You could use an extension for VSCode for converting C# class to TypeScript class in a few seconds 🥰

Why I don't like ngrx and what are the alternative options?

I like the Redux concept. But not NgRx :)

JavaScript: Understanding the Weird Parts Notes

Below notes were taken from an Udemy course JavaScript: Understanding the Weird Parts

Restrict null and undefined via Non-Nullable-Types in TypeScript

null and undefined are the root of all evil. It often leads to runtime errors. It is easy to write code that will throw Error at runtime.

TypeScript - Declare a function callback type

To define the function callback type. You could declare an interface that has a call signature. Or define a new type

Casting a JSON object to a TypeScript class

Not all the time we need to cast from JSON object to a class, but sometimes it is really helpful. Use class-transformer to transform JSON object to class instance

Skiing in Singapore - a coding diversion

Another interesting tree traverse problem that could land you a job 🤓

CSS Layout - Horizontal & Vertical Align

Vertically center in CSS has never been an easy problem

Analyze webpack bundle with source-map-explorer. Optimize moment.js

I found that source-map-explorer tool shows an easy-to-understand-and-explore visualization to help you debug where all the code is coming from.