Learn free typescript tutorials

Primeng toast example | Angular Popup component

January 9, 2023 ·  7 min read

Toast is a UI component interactive popup window for showing the progress of an application. Popup will be hidden automatically after a timeout. Primeng Toast UI component Toast in an application is a popup window on the main DOM page. In An application, Toast UI is shown to the user for the following use case Authentication successful Give useful messages for Server validation errors - Duplicate records, Domain operation results message like the record is deleted from a database....

5 ways to get Image width and height javascript examples

December 31, 2022 ·  3 min read

Image contains width and height based on resolution. Sometimes we need to find the width and height of an im`age using javascript and jquery. Images are of different types png, JPEG, and SVG. This post covers how to find the image height and width in Javascript, Jquery, and Nodejs. Using Jquery Selectors Plain Javascript How to find the height and width of an image in javascript In Plain javascript, Two ways we can get the height and width of an image....

5 ways to use Input blur event in Angular| Angular blur event tutorials

December 31, 2022 ·  4 min read

In this tutorial, We will learn how to use input onBlur event in Angular First, what is the onBlur event? where is this being used in Angular? onBlur is a javascript event, fired when the input element lost its focus. You can see my previous about Angular button click event example Other versions available: React onBlur event guide example Vue js Blur event example It is helpful while doing form validations....

Android Gradle command line list examples

December 31, 2022 ·  2 min read

This tutorial talks about gradle commands used in android applications. You can do the same tasks using android studio. Knowing commands is helpful for mobile developers to get confidence in app build and deployment. How to list tasks from the command line in the android application The Gradle wrapper provides a task command to list out all available tasks in the Android app. In windows, Please run the following command...

Angular 14 innerHtml example with property binding and event handler

December 31, 2022 ·  4 min read

This tutorial solves the below problems in the HTML binding Angular application. How to do string raw HTML binding in Angular? Render HTML strings with HTML tags How innerHtml attribute in Angular work? How to sanitize HTML tag content with DomSanitizer innerHtml change event handler exam What is innerHTML in Angular? Strings are displayed in Angular using interpolation {{}} syntax. Angular supports display string that contains raw HTML tags using innerhtml property....

Angular 15 Decimal Pipe examples | rounded number examples

December 31, 2022 ·  4 min read

It is a short tutorial about angular pipe decimal examples. Limit the number to 2 decimals How to display the number with decimals in Angular. You can check other posts on How to always run some code when a promise is resolved or rejected Angular decimal pipe A pipe is a function that takes input and transforms the data and output into a different format. Angular DecimalPipe formats the number to string with a decimal point and localized string rules....

Angular 15 How to load data before rendering the component?

December 31, 2022 ·  2 min read

This tutorial talks about how to load data before rendering a component This post includes load data from API before the component is rendered. There are multiple ways we can load API data before the component is rendered. One-way call API and promise in Constructor. Second way, use resolve data Finally, Activate Route In this post, We are going to discuss the first approach How to load API data before rendering the component Let’s create an angular service that pulls data from API or database....

Angular 15 material divider tutorial| mat-divider examples

December 31, 2022 ·  4 min read

Divider is a UI element to separate the UI components with a thin line horizontally or vertically. This helps organize and group the elements in the layouts of a page. Angular material provides divider components in a separate module MatDividerModule. if you are using the angular 5 versions, You have to MatListModule as a divider is part of MatListModule. This application uses the Angular 15 version, So the MatDividerModule module needs to configure....

Angular 15 nullish coalescing operator

December 31, 2022 ·  3 min read

What is Nullish Coalescing Operator in javascript? nullish coalescing operator is a logical operator introduced in the latest javascript i.e EcmaScript 2020. It also introduced in Angular 12 version onwards. This post covers what is nullish coalescing operator in javascript/typescript and how it is used in Angular 15 components. nullish coalescing operator is a logical operator used to check value is null or undefined on two values....

Angular 15 Pipe Json examples | pretty format code

December 31, 2022 ·  4 min read

It is a short tutorial about angular pipe json examples. How to print json objects in the Angular component Angular has an inbuilt pipe called jsonPipe from @angular/common module. It is useful to convert a typescript object into JSON format type and debug and manipulate object data. Here is the syntax in the HTML template {{object|json}} How do you print an object without json pipe in Angular?...

Angular Can't bind to 'ngIf' since it isn't a known property of 'div'

December 31, 2022 ·  3 min read

In This tutorial, Learn how to fix Angular inbuilt directive Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’ Exception: Can’t bind to ‘ngFor’ since it isn’t a known native property Let’s create an Angular component for testing this. A:\work\angular-convert-examples>ng generate component ngif-test CREATE src/app/ngif-test/ngif-test.component.html (24 bytes) CREATE src/app/ngif-test/ngif-test.component.spec.ts (641 bytes) CREATE src/app/ngif-test/ngif-test.component.ts (287 bytes) CREATE src/app/ngif-test/ngif-test.component.scss (0 bytes) UPDATE src/app/app.module.ts (677 bytes) ngif-test....

Angular Checkbox tutorials with latest examples

December 31, 2022 ·  4 min read

This tutorial explains checkbox tutorials with examples for following two-way binding example Dynamic Checkbox list Get the checkbox value in Angular How to find checkbox is checked or not Contents prerequisite Angular checkbox two-way binding example Angular Dynamic Checkbox example How to get the checkbox value using the change event handler? Stackblitz example Conclusion Angular Pipe Tutorials prerequisite First, Create an angular application using Angular CLI - ng commands,...

Angular CLI - how to disable auto-reload when ng serve

December 31, 2022 ·  3 min read

angular application is started with ng serve, thus starting the server, ng serve automatically reloads the changes if any changes to component/CSS/HTML in the angular application. The below commands start the server and reload the code changes. ng serve (or) ng serve --live-reload (or) ng serve --live-reload=true How live-reload options works? whenever you made changes to the typescript component/CSS/images in vscode or IDEs, The angular reload server rebuild and recompile, and starts the server automatically....

Angular elements Tutorials | web components examples

December 31, 2022 ·  3 min read

Angular is a framework for building SPA and hybrid applications. with Angular, You can create Angular components, Which you can use only in the Angular application Each component you created in the angular application is a straightforward way to use it. Suppose, How to use the Angular component in nonangular applications like any Java frontend or PHP or ruby on rails application. Is this possible to use independent angular components outside of javascript frameworks?...

Angular ngFor index - How to get current last even and odd index?

December 31, 2022 ·  2 min read

This tutorial explains how to get the current last even and odd index with ngfor in angular. Let’s create an employee model. export class Employee { id: Number; name: string; salary: Number; } Angular ngFor Index syntax and example *ngFor is a shorthand form for ngForOf directive This can be used to iterate an array of objects or objects. Here is a ngFor syntax <div *ngFor="let object of objectarray; let i=index;"> {{i}}/{{users....

Angular ngIf code examples

December 31, 2022 ·  5 min read

ngIf is a directive in Angular used to show or hide the HTML elements of a DOM tree. It is similar to if conditional expression in a programming language like java or javascript. The following topics are covered in this post: ngIf standard directive in Angular use ngif then else template in Angular Usage of logical and comparison operator NgIf async Observable example ngIf null check usage Common Errors in ngIf template Contents...

Angular Pipe Currency examples | format currency number price examples

December 31, 2022 ·  3 min read

It is a short tutorial about angular pipe currency examples. Format long numbers into the currency How to display the currency symbol to the right in Angular Angular currency pipe Angular has an inbuilt pipe called CurrencyPipe from @angular/common module. This is used to convert and format numbers into currency strings using localization. Here is the syntax in the HTML template {{ expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }} expression: is a number value or expression to format currency: It is an object which contains currency object format rules currencyCode: Shortcode for currency and the default currency code is USD( US dollar) display: it is a string or boolean digitsInfo: Represent decimal format...

Arithmetic and Relational Operator in typescript

December 31, 2022 ·  3 min read

Contents Typescript arithmetic operator arithmetic operator Example Relational Operators in typescript Typescript Equality Operators Conclusion This tutorial explains Arithmetic and Relational Operator in typescript with examples. Typescript arithmetic operator Arithmetic operators are used in expressions with two or more entries. This operator will work on numeric values. These operators are very easy to understand as these are available in our study curriculums as well as other programming languages....

Best 5 ways to remove the duplicate object from array In javascript| typescript

December 31, 2022 ·  4 min read

The examples below take an array of objects or primitive types as input, delete duplicate items from the array, and return the new array without duplicates. If an array contains primitive types, it is simple to filter out Duplicates. If an array contains objects, we must filter duplicates using key and value pair check validation. Removing duplicates is a developer’s daily task in application development. Let us declare an array object for all the removing duplicate objects in an array....

Best Five ways to iterate enum in typescript with examples?

December 31, 2022 ·  3 min read

Enum is an enumeration of names and values replacing multiple constants with a single namespace. There are many ways we can iterate enum data. This blog post covers examples of looping the Enum string of numbers using different approaches. You can check my other posts on typescript Enum object. enum size in typescript typescript enumeration Convert Enum to Array Check String or Integer exists in Enum Compare Enum Strings and Numbers String to Enum {{ < toc >}} How to Iterate keys and values using Object Inbuilt methods An enum is also an object in Javascript....

Best Ways to convert timestamp to Date format in typescript| Angular timestamp date example

December 31, 2022 ·  3 min read

The timestamp is a Unix timestamp in milliseconds format used to hold a date and time. It holds the number of milliseconds from 1970-01-01. It is a 10-digit number. a timestamp is a long number in seconds from 1970 JANUARY 1 UTC format. For example, the Timestamp is 1587143959831. This blog post explains how to convert a timestamp to a date format in multiple ways. The Date object in javascript holds the Date and time format....

Classes and Objects in Typescript| Constructor and Inheritance examples

December 31, 2022 ·  6 min read

In this tutorial, learn the basics of the classes and objects in a typescript programming language. In Any Object-oriented programming Object-oriented programming’s foundational elements are classes and objects. The data is stored in classes, and the behavior or methods that operate on it are represented by methods. You can also check Typescript final keyword What is Class in Typescript? Class is introduced in the ES6 version of the latest JavaScript....

Difference between const and readonly in typescript/angular

December 31, 2022 ·  3 min read

In this post, You will learn step by step tutorial on the difference between const and readonly keywords in typescript and angular. You can also check Typescript final keyword Difference between const and readonly variables in typescript const applied to variables only. let’s declare a constant-content variable const content; Typescript compiler gives Cannot assign to ‘content’ because it is a constant error That means constants initialize with value during declaration as seen below...

Difference between ngx-bootstrap and ng-bootstrap

December 31, 2022 ·  2 min read

This tutorial compares the bootstrap framework libraries in the Angular library. Bootstrap is a UI library with mobile responsiveness with inbuilt UI components. If you want to integrate Bootstrap into the Angular application. We have the following ways to integrate into Bootstrap npm library ngx-bootstrap ng-bootstrap There is any library or any other not sure about it ngx-bootstrap and ng-bootstrap are wrappers on regular bootstrap to support UI components in Angular applications....

Different ways to generate GUID in javascript

December 31, 2022 ·  3 min read

In this blog post, We are going to learn how to generate Unique Identifiers -UUID, GUID, UDID in javascript/typescript/nodejs. Unique Identifier Generator in Javascript In every programming language, We have a unique identifier to identify the resources or values, or references. Various names identify the unique references. Generally, the following are frequently used in javascript applications. Universally Unique Identifier - UUID Globally Unique Identifier - GUID Unique Device Identifier - UDID Javascript Universally Unique Identifier (UUID) UUID is a universally unique identifier....

Different ways to write a comment in Typescript| Angular Component Comment example

December 31, 2022 ·  4 min read

Typescripts comments: Learn Inline single, multiline, and documentation comments Typescripts comments Comments are code statements that are ignored by Typescript during the compilation process. Every programming language provides comments to describe the line of code or functions. Typescript is a superset of javascript, so it supports the same syntax as javascript provides. Comments allow developers to easily modify the code, make it reusable, and assist other developers in better understanding the code....

Es6 Weakmap class examples in javascript | Typescript

December 31, 2022 ·  4 min read

WeakMap class in Javascript Es6 introduced new collection data, and structure classes. WeakMap is one of the collection class similar to Map class,Other Classes are Set, Map and WeakSet.Other Classes are Set, Map and WeakSet WeakMap is a map class that stores keys and values, and keys store weak references, which means that if the key’s reference is unreferenced, the value for the given key is garbage collected. As a result, a weak map saves weak references to a key object....

Es6 WeakSet tutorials class examples in javascript | Typescript

December 31, 2022 ·  3 min read

WeakSet is one of the collection classes similar to the Set class in ES6. , Other Classes are Set, Map and WeakMap. WeakSet is a Set class that stores the collection of weak object references, that is if the reference of the object is null, the object is automatically garbage collected. So WeakSet saves weak references of an object. if the object is referenced/destroyed, the Garbage collector automatically removes the object from WeakSet, and memory consumption is less....

Es6 Generator Functions Yield in javascript | Typescript

December 31, 2022 ·  2 min read

In this blog post, We are going to learn Generator Functions and Yield keywords with examples. First We will see how Normal Function works? Normal Functions are called, executes it and the function returns finally either return the value of function body execution is completed. Function Example here is a function example, When the function Method is called, a Sequence of statements in a body is executed, finally returned value, and iteration is stopped in its control....

ES6 Map Class Tutorials in Javascript Examples Typescript

December 31, 2022 ·  4 min read

Es6 Map Class The map is one of the new classes introduced in the Es6 version. Other Classes are Set , WeakSet and WeakMap It is a data structure with pair of keys and values. Keys can be any arbitrary value and values can be an object or primitive type. Keys can be a Primitive types like Strings, Numbers, Symbols, Functions, Objects, and Dates. We can implement a hashmap using the map in javascript and Typescript....

ES6 Spread Operator in javascript | Typescript examples

December 31, 2022 ·  3 min read

As you are all aware Spread operator is newly featured in available in javascript with ES6. Typescript also implemented this feature from version 2.1 onwards. Before Spread Operator is not there, Function declaration is as follows Typescript introduced Spread or REST parameters. This operator is used in either functional call arguments or function header with the end of the argument prefixed with this. Typescript is a superset of javascript. All the examples and syntax work within Typescript....

Find an object by property in an array of objects javascript

December 31, 2022 ·  4 min read

Multiple ways to check and find a property value in an array of objects. for loop iteration, check each object property contains a value. Get Index using ES6 findIndex method with arrow function, array.findIndex(item => item.property == 'givenvalue')], retrieve array element using array[index]. Array find method, example,array.find((item)=>{item.name === 'Andrew'}); Array filter similar to find a method,array.filter((item)=>{item.name === 'andrew'}); jquery grep or map function Underscore find function Javascript examples to find an object by key from an array of objects....

Fix for Object is possibly null or undefined in typescript?

December 31, 2022 ·  4 min read

Contents How do you fix the possibly null error object? How do you fix the error object that is possibly undefined? What causes error TS2533: Object is possibly ‘null’ or ‘undefined’"? Fix for Object is possibly ‘null’ or ‘undefined’ Conclusion This post explains below things What causes error TS2533: Object is possibly ‘null’ or ‘undefined’? Multiple ways to Object is possibly null or Object is possibly undefined....

fix multiple formats for file Select a default formatted

December 31, 2022 ·  2 min read

This post covers simple steps to configure visual studio code for multiple formatter issues. I am getting the following issue while formatting typescript document code. There are multiple formats for 'TypeScript' files. Select a default formatter to continue. You can see the following screenshot issue Importantly, I am working on typescript files, I got an issue with this, the same issue will get for any files javascript, HTML,css`....

Frequently Used Array Examples Javascript|Typescript

December 31, 2022 ·  2 min read

In this blog post, We are going to learn Frequently used Array Examples in typescript and javascript The array is a collection of elements/objects stored under one name. The size of the array is fixed. Developers must learn Array examples in typescripts. You can check my post on Array Sort-Object Examples and Javascript Add,Delete from Array Following is a list of frequently used array examples How to remove an element or object from the Array This example shows how to...

gitignore git files in flutter and dart project

December 31, 2022 ·  2 min read

.gitignore file contains a file or folder path that is considered not to commit in a flutter project. Some different files or folders adds to the gitignore file in the flutter project It creates files and folders while generating a flutter project for Android and IOS build flutter gitignore build folder build folder in the flutter project contains outputs of a compiled flutter build application. This folder is generated by flutter....

How do import other TypeScript files? example

December 31, 2022 ·  2 min read

Sometimes, We have a code or class in typescript declared in a typescript, Want to import it to another file. It is a concept of reusing code. Typescript provides the modules and export and import keywords to reuse and expose the files to the outside. modules are reusable code introduced in javascript, The same is introduced in typescript. export and import keywords in typescript are used to reuse class, interfaces, functions, Enum, and properties from another module...

How to add a new property to a window object in typescript?

December 31, 2022 ·  2 min read

This post talks about how you add a property or function in the window global name scope in javascript or typescript How to add an object to the window in Typescript? Window is an inbuilt JavaScript global object. It provides properties like location and history and also methods like open. The same can be used in Typescript. It is a tricky one to add a property in a window object in javascript and typescript...

How to add final to variables and methods in typescript?

December 31, 2022 ·  2 min read

Java provides the final keyword to variables, methods, and classes to p Does typescript have the final keyword? Typescript does not have a final keyword, But we can make it using various ways. One way is using a readonly keyword to variables, and another way using a decorator that is not writable. You can also check Typescript classes and objects Typescript final variable The final keyword in variables is only assigned once during the constructor....

How to assign dynamic properties to an object in typescript

December 31, 2022 ·  3 min read

In javascript, you can create an object using object syntax. var employee = {}; And assign the properties dynamically. employee.name= "john"; You can access the dynamic properties. console.log(employee.name) // john If you use the save above code in Typescript. var employee = {}; employee.name= "john"; console.log(employee.name) It gives a below error. Property 'name' does not exist on type '{}'. In typescript, a variable declared is typed, which means the declared variable should have a type and causes an error at compile time....

How to Check if the page is reloaded or refreshed in JavaScript

December 31, 2022 ·  2 min read

Sometimes, We want to check if the page is reloaded or refreshed. A page can be refreshed or reloaded by doing the following things. keypress F5 from the user page reload using location.reload() back or forward button from a browser Typing URL in a browser or clicking a link to reload a specific page Submit form Prerender a page Check if the page is reloaded or refreshed in javascript Javascript provides a window....

How to check null or empty or undefined in Angular?

December 31, 2022 ·  2 min read

null checking is a common validation that every developer needs to know. In this tutorial, We are going to discuss how to check a null or empty, or undefined check-in Angular. Angular uses Typescript as a programming language, Since typescript is strongly typed so We are going to discuss multiple ways to check null We are going to discuss multiple ways Checking null in Angular template HTML component Checking null in the Angular typescript component Angular check for Array is empty or null or undefined Angular check for the object is null or undefined Angular ngIf null check How to check if a variable string is empty or undefined or null in Angular This example checks a variable of type string or object checks...

How to check String/Number exists in enum in typescript

December 31, 2022 ·  2 min read

Enum is a new datatype introduced in Javascript/typescript which holds strings or numbers only. Sometimes, It is necessary to check whether a declared string or number exists in an Enum object. This blog post covers checking whether string or number value exists in Enum in javascript or typescript You can check my other posts on typescript Enum object enum size in typescript typescript enumeration Convert Enum to Array String to Enum How to Check if String exists in Enum of values in Typescript?...

How to check the boolean value of an array in javascript

December 31, 2022 ·  3 min read

This post talks about multiple ways of checking true/false values, that exist in an Array in Javascript/Typescript/Angular. For loop to iterate each element, check if an element is a Boolean value using the if statement. Array some() method, Performs iteration of elements and checks some of the elements found or not Array indexOf method, This returns number (-1,0,1, etc) check index with Es7 Array Includes that performs an element that exists in an array, returns true or false In this blog post, You’ll learn to check the A Boolean value of an array in javascript or typescript....

How to compare dates in Angular | Momentjs example

December 31, 2022 ·  4 min read

Contents How do you create a Date object in Angular How to compare date objects for equal in Angular How to compare the given Date with the current Date in Angular How to compare future Date with current Date in a template component compare dates using the MomentJS library in Angular Can you compare dates in angular? Conclusion It is a short tutorial on comparing two date objects in Angular with examples....

How to Compare Enum strings or numbers in typescript?

December 31, 2022 ·  2 min read

Typescripts Enum compare: This tutorial explains how we can compare Enum Strings and numbers in Angular and typescript. In this tutorial, How to compare the String with Enum value in typescript/javascript. The below examples use the comparison operator !== and === operators for checking enum equality. You can check my other posts on typescript Enum object. enum size in typescript typescript enumeration Convert Enum to Array Check String or Integer exists in Enum Compare Enum Strings and Numbers typescript enumeration How to Compare Enum Strings values in Typescript?...

How to compare two dates with or without time in Typescript?

December 31, 2022 ·  3 min read

Typescripts Date compare: This tutorial explains how we can compare dates in Angular and typescript. If we want to compare dates and see if they are the same, we must use logic for comparison. If two objects are equal, which means the values or properties values are equal. In the case of the Date object, it contains the date and time in milliseconds. Date data is represented in typescript using the Date type....

How to Compile and Run Typescript using npm command

December 31, 2022 ·  2 min read

Typescript is compiled into javascript during the compilation phase. next, you have to execute the node command to run the javascript file. It involves two steps to execute typescript code Compiles typescript to the javascript file Executes Javascript file using node command. node projects using package.json that contains a scripts section to execute npm scripts. Let’s see an example to run typescript code. Execute Typescript code using the npm command There are multiple ways we can execute typescript code...

How to Convert an array into String react?| Array map and reduce example in react

December 31, 2022 ·  3 min read

This is a short tutorial on how to convert an array of object properties into a String in React component render component. We have an array of object data either coming from API or fixed. For example, const employeeList = [ { firstName: "John", lastName: "Erwin", email: "[email protected]" }, { firstName: "Ram", lastName: "Kumar", email: "[email protected]" } ]; We can do it in multiple ways to convert Array to string in react....

How to convert any type to object in Angular Code example

December 31, 2022 ·  2 min read

Learn to convert or cast any type in typescript to an object with examples in Angular. This tutorial covers the following things How to change variable type in typescript Convert any type to string or number in Angular. Parse any type of Interface or class in Angular. In typescript, There is no typecasting, but we have type assertions. So There are two approaches to casting any object to different data types....

How to Convert BigInt to Number type in Typescript?

December 31, 2022 ·  2 min read

In this blog post, I will give several examples for Converting BigInt type to numeric types - Float, Integer, Hexa, Octal, Binary. Es10 introduced bigint new data type that stores arbitrary-precision numbers. It can store values greater than 2 power 53 -1 Numbers are numeric data of Number datatype, store the data up to 2 power 53-1. How to Convert BigInt to Number in Javascript? There are the following different ways we can convert BigInt to numeric values....

How to Convert Enum to Array of objects in Typescript?

December 31, 2022 ·  2 min read

Enum is a new data type introduced in typescript. Its data is a group of constants. Data in the enum object are of String and number type. You can check my other posts on typescript Enum object. enum size in typescript typescript enumeration Check String or Integer exists in Enum String to Enum The object is key and value properties are enclosed in {} and the array is a group of types enclosed in []....

How to convert Enum to String and Number in Typescript

December 31, 2022 ·  2 min read

This post covers how to convert Enum to String/Number in javascript/typescript with an example. Typescript Enum contains strings and numeric data Learn, How to Convert Enum data type to String or numbers in typescript. You can also check my previous post typescript enumeration enum size in typescript Convert Enum to Array of Objects Check String or Integer exists in Enum Compare Enum Strings and Numbers 7 ways of Iteration or looping Enum data [typescript enumeration](/2018/07/typescript-enumeration-tutorials-best....

How to Convert JSON Object to Interface or class in typescript?

December 31, 2022 ·  4 min read

This post talks about different ways of converting json to interface in typescript. During development, data comes from the REST API in the format of JSON format, So you need to write a code to convert the JSON to interface or class in typescript. Contents How to Convert json to Object or interface in typescript? Implicit interface conversion Typescript Explicit Interface conversion How to map a Nested JSON object to interface in typescript?...

How to convert json to/from an object in angular|Typescript

December 31, 2022 ·  3 min read

Angular is the front-end MVC framework, It communicates with the server via JSON format and It uses typescript as a language, a superset of javascript with extra features of type safety. There are cases you need to send/consume the JSON object from the angular application to/from REST API. needs to convert to/from object to JSON. This post covers different ways to convert JSON to Object or object to json in angular....

How to Convert Number to/from String in typescript?

December 31, 2022 ·  6 min read

Did you face a situation where you want to parse number to string or string to number in typescript? Many situations originated during the development of angular/typescript-based projects as a result of writing this blog post. Number and String are basic Inbuilt primitive datatypes in typescript programming language. Every developer is already aware of these types. The number holds numeric values, String holds a group of characters enclosed in double or single quotes....

How to Convert Object to/from Array in Typescript

December 31, 2022 ·  3 min read

Typescript is a superset of javascript with compile type checking. In Application development, We used to get the use cases where data was retrieved from REST API/Database in the form of Array/Object, so need to convert this to Object/Array. Every developer used to get these user cases during development. Let us see ways to convert Objects to/from Arrays in javascript/Typescript/Angular applications. First, we will see how the object Array creates is in typescript....

How to convert Observable to Promise in angular|Typescript

December 31, 2022 ·  2 min read

Sometimes, We want to convert the observable to a promise object and call callback then() on the promise in Angular. Observable returns multiple values and promise returns single values. You can check other posts on How to always run some code when a promise is resolved or rejected Observable is more feature-rich than promises and recommended. However, some cases need to convert to promises. You have to pass data to a third-party API that accepts only promises How to Convert Observable to Promise in Angular There are multiple ways we can do...

How to Convert string to character array in javascript

December 31, 2022 ·  2 min read

This example tutorial explains to convert a string to an array of characters in javascript. You can check my other post on Javascript check substring exists in a String How to get Character Array from a string javascript? There are multiple ways we can do it. use the split function The string has a split function with an argument. The argument is a separator that uses to split into it....

How to Convert String to/from A Boolean in typescript?

December 31, 2022 ·  3 min read

We have a use case in development where strings with values like ‘true’ and ‘false’ are converted to a boolean datatype type. We want to perform conditions - if-else on converting a boolean/string to display some results on the frontend. This article, Publishing different ways to convert a string to a boolean or boolean in typescript. We want string-formatted values to need to convert to a boolean value....

How to Convert string to/from Date in Typescript?| Javascript examples

December 31, 2022 ·  3 min read

This tutorial is about converting string to/from Date in javascript with examples. These examples work in typescript it is a superset of javascript. javascript String and Date types string is an object that holds the sequence of characters enclosed in double-quotes. Date objects have default current date and time in typescript. Date with default constructor returns current date-time. The date object holds different timezones - GMT and UTC....

How to convert the full name into first last and middle name in javascript example

December 31, 2022 ·  2 min read

In some cases, the UI form on a page accepts only a single text box to take the full name, the developer needs to split this into first name, middle name, and lastname. This article talks about how to split full names into first, last, and middle names in javascript and Angular. usually, the user enters the name with three words. for example, the user entered in name filed as...

How to create an array of multiple types in Typescript

December 31, 2022 ·  3 min read

The array is a type that stores multiple elements under one name. Usually. Array stores the data of a single type. Datatype is a Primitive type such as a number, string, or boolean or object such as classes or interfaces. Let’s declare an array. Arrays define using Generic Array Type syntax or square bracket syntax. For example, an Array of numbers declares and initialized with a data type number....

How to create an array of numbers in javascript

December 31, 2022 ·  2 min read

This tutorial covers multiple ways we can do to create an array with a sequence of numbers. Contents how to create an array of numbers for a given range in javascript? using the ES6 spread operator lodash range function Underscore times function Conclusion how to create an array of numbers for a given range in javascript? Using for loop with index assigned with initial number and increment by 1 until end of the number, and add an index to an array....

How to declare a function throws an error in TypeScript

December 31, 2022 ·  1 min read

In Programming, Error is a common requirement to handle inside a code. Handling error is a programmer’s responsibility to have clean code and avoid the graceful exit of an application. The typescript compiler catches the compile-time errors with type safety. How can you handle runtime errors in typescript.? It provides an Error object to indicate that an error occurred. In Typescript, the Error object is a Runtime exception or error. Currently, Typescript supports never type which supports any type of data....

How to declare an array of objects in Angular|typescript

December 31, 2022 ·  3 min read

This example covers the Angular example in typescript. Declare and Initialize an array of objects with values Array of Type Using an interface to hold an array of objects An array of objects is populated and displayed on the Dropdown or radio button display. There are multiple ways we can create an array of objects. How to declare and Initialize an array of objects with values Declare and initialize an array using the any/object type declared as follows...

How to declare JSON object in Angular | Typescript example

December 31, 2022 ·  3 min read

This tutorial explains multiple ways to declare and initialize the JSOn object data in Angular. It also includes an example in Typescript. Sometimes, you want to declare a JSOn object in Angular, JSOn object can contain String, a boolean, the number for primitive values, and Array for nested objects. There are multiple ways to declare a jSOn object. Let’s see How an array of json objects can be created and initialize...

How to declare Return Types for Functions in TypeScript

December 31, 2022 ·  3 min read

This tutorial explains multiple ways to return multiple values in Typescript functions. Function by default returns the single value in Function declaration. Typescript function declaration contains the type of returned data. Here is an example. function functionname(): Type { return datatypevalue; } In the functionname is followed by colon and datatype. How to return multiple values from a function in Typescript? There are multiple ways to return an object from multiple values in Typescript....

How to declare Return Types for Functions in TypeScript

December 31, 2022 ·  3 min read

This tutorial shows how to declare and return type in Functions of a Typescript. You can check another post on Fix for Object is possibly null Functions in any language contain two parts as given below Function definition Function caller Each function has a Function name, body, and return value. The return value is of valid datatype value in typescript. and javascript does not declare a return type....

How to declare static constants in Typescript and Angular

December 31, 2022 ·  3 min read

In this blog post, We are going to cover the following things. a static keyword in typescript. const in angular. How to define public static constants in typescript and angular the difference between static and const keywords in typescript and javascript Static in typescript Like any other object-oriented programming, Typescript has object and classes Objects contain instance member variables and functions which can be accessed using the object. A class contains static member variables and functions which can be accessed using the class....

How to disable the button for invalid form or click in Angular?

December 31, 2022 ·  3 min read

In this blog post, you’ll learn the Angular Button disable for form invalid Form invalid form validation After clicking submit Contents Button disable form invalid validation Example Import form FormsModule, ReactiveFormsModule in application modules Button disable template-driven form invalid Button disable reactive driven form invalid stackblitz example Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ error First, create an application using Angular CLI, This post does not cover the creation of an application created from scratch....

How to display image read from json file in react js?

December 31, 2022 ·  1 min read

Sometimes, We want to display the image from json content in React Component. The related posts: Read local json file in react Handle broken image in React [Display image from local image](/How to display image from an URL) Let’s have employee.json located in reactapplication/src/employee.json [ { "id": "1", "title": "Developer", "firstName": "John", "lastName": "Eric", "salary": 5000, "path": "/assets/imgs/employee/john.jpg" }, { "id": "2", "title": "Tester", "firstName": "Andrew", "lastName": "Johnson", "salary": 6000, "path": "/assets/imgs/employee/andrew....

How to Export/Generate HTML to pdf in javascript web application

December 31, 2022 ·  3 min read

In this article, We will have a look into tutorials and examples to convert HTML to PDF using javascript and angular. In Web applications, Normally we have data/images rendered on a webpage in different format ways as below. Dynamic data is populated in the table Images are rendered on the web page Any element under HTML DOM elements example DIV To Export the generated HTML on the webpage to PDF, we have to write code to handle this....

How to find the length of enum data in typescript

December 31, 2022 ·  2 min read

Enum is inbuilt into the data type used to store multiple contents in a single namespace. Sometimes, As a developer need to find several elements of an enum in javascript/typescript. You can check my other posts on typescript Enum object. typescript enumeration Convert Enum to Array Check String or Integer exists in Enum Compare Enum Strings and Numbers String to Enum There is no inbuilt method to find out the size of properties of an enum....

How to find the smallest number and position in JavaScript

December 31, 2022 ·  2 min read

This tutorial explains different ways to find the smallest number in an array of elements. Find the smallest number and position in the array of javascript There are multiple ways we can do one-way use for loop iteration Assume, the index is zero and the minimum value is the first element Iterate the array and check current value is the minimum value, if found assign the min value to the current value and position to the minimum position Here is an example...

How to Format array of dates in typescript Angular example

December 31, 2022 ·  3 min read

How to Format an array of dates in typescript In this post, You will learn how to format an array of objects with date keys in the Angular application. Sometimes, You will get the data from the backend, and hold this data in an array of objects with date properties, So you want to format the date field and display it to this user. In this example, the Following array of the object creates with the createdDate date field....

How to generate a tsconfig.json file in typescript from command line

December 31, 2022 ·  5 min read

Learn how to create a tsconfig.json file in typescript applications from the command line. tsconfig.json is a configuration for typescript applications about configuration settings. tsconfig.json file creates in applications such as Angular, React, And Vuejs using CLI Tools. Sometimes, It requires to generates a tsconfig.json from the command line. You can also check how to removeComments in tsconfig.json file and typescript tsconfig.json It covers How to generate from a command line....

How to generate GUID in Typescript with code examples

December 31, 2022 ·  2 min read

This tutorial explains How to generate UUID or GUID in Typescript with code examples. There are two types of IDS names that represent the same type value in typescript. How to Generate UUID in Typescript with examples Following are steps required to generate GUID in Typescript applications First, Install the typescript-guid library using the npm command npm i typescript-guid --save It adds the dependency to package.json Once the package is installed on a typescript project....

How to get fragmented value from a url in JavaScript

December 31, 2022 ·  1 min read

Sometimes, We want to get the fragmented value after # symbole from an url in javascript. You can check my other post on Javascript check substring exists in a String For example, you have url as given below abc.com/about#contact using javascript, get the value contact for a given url as given below. contact In HTML pages, Fragmented urls values can be used to navigate between different sections or tabs of a page....

How to get string size in bytes in javascript examples

December 31, 2022 ·  2 min read

Different ways to find string size in bytes. nodejs buffer object, an example is Buffer.byteLength("str", 'utf8')) Using Blob object, new Blob([str]).size TextEncoder encoder method, new TextEncoder().encode(str).length unescape method,unescape(encodeURIComponent(str)).length A string in JavaScript is a group of characters, Each character holds 16 bits of an integer. Each string stores the data in memory, as we don’t have a direct method like sizeof in a c programming language....

How to load an image in Angular with examples

December 31, 2022 ·  2 min read

This tutorial shows multiple examples in Angular, One example is to load images using the img tag Another example is to bind the src attribute to the assets folder. Angular Img tag binding Normally, Images are placed in the src/assets folder in the Angular application. src |__assets |__images |__first.png |__app |__app.component.html The Img tag is used to display an image on an angular application. It is declared in the HTML template file....

How to map array to another array in typescript example

December 31, 2022 ·  3 min read

It is a short tutorial on the below examples in typescript and javascript How to map an array of strings into another array string How to populate an array of objects from another array of objects. Sometimes, We have an original array returned from API, We want to display the only part of an array This example works in Typescript and javascript. How to map an array of strings into an array This is easy and simple to populate an array from another array....

How to populate enum object data in a dropdown in angular| Angular material dropdown example

December 31, 2022 ·  3 min read

Enum is a collection of constants. Sometimes, We have an enum object and need to pull all enum values populated in the Select/dropdown of an angular application. This tutorial talks about step by step tutorial about angular dropdown with values from enum constants. Let’s declare an enum type in typescript for this examples export enum Weeks { MONDAY = 1, TUESDAY= 2, WEDNESDAY = 3, THURSDAY = 4, FRIDAY = 5, SATURDAY= 6, SUNDAY= 7, } This post will talk to you about how to populate enum string or numbers in the HTML select/dropdown of an angular application...

How to render an array of objects in react?| Array map example in react

December 31, 2022 ·  2 min read

This is a short tutorial on how to render an array of objects in React component render component. We have an array of object data either coming from API or fixed. For example, employeeList = [ { name: 'John', email: '[email protected]' }, { name: 'Ram ', email: '[email protected]' } ] We can use the Array map function to iterate each object of an array. Let’s see how to iterate using the Array....

How to run typescript files from the command line.

December 31, 2022 ·  3 min read

Learn how to run typescript code from the command line Typescript is a superset of Javascript that includes features like type safety and static checking. Browsers understand javascript files, So typescript code must compile and convert to javascript to run in a browser. Compile typescript requires a typescript compiler in our machine. The following steps are required to run it typescript. Typescript code -> compile to javascript -> Run javascript There are multiple ways we can do this....

How to set focus on top page in angular|javascript example

December 31, 2022 ·  2 min read

Consider a page with a long user form and a submit button that supports vertical scrolling. When a user presses the submit button, the server performs validation, and any errors must be present to the user. if the error displays on the top of the page, the user needs to scroll to the top to see what error occurred. Instead, If errors are displayed and moving focus to the top of the page is a good experience during a button click....

How to sort an array of objects in ascending and descending order of React app

December 31, 2022 ·  2 min read

In this tutorial, You learned how to sort an array of objects by ascending and descending order in React component render component. We have an array of object data either coming from API or fixed. For example, employeeList = [ { name: 'John', email: '[email protected]' }, { name: 'Ram', email: '[email protected]' }, { name: 'Abc', email: '[email protected]' } ] Javascript array has a sort function that sorts a default order....

How to Sort Array JSON objects with date field in Angular | Typescript example

December 31, 2022 ·  4 min read

In this short tutorial, How to sort array json dates wit How do you create a Date object in Angular How to compare two dates in Angular Compare two dates without time in Angular Let’s create an array of JSOn objects with one of the key-value being date in the string. arrayJson: any = [ { id: 1, name: "john", lastModified: '2011-01-01 02:00:00' }, { id: 2, name: "Franc", lastModified: '2001-01-01 02:00:00' }, { id: 3, name: "Andrew", lastModified: '2021-01-01 02:00:00' }, { id: 11, name: "Mark", lastModified: '2020-01-01 02:00:00' }, { id: 12, name: "Eric", lastModified: '2020-02-01 02:00:00' }, { id: 8, name: "Tony", lastModified: '1990-01-01 02:00:00' } ] How to Sort an Array of JSON objects with a date key in Angular?...

How to Sort-Object Array by property or key in Typescript?

December 31, 2022 ·  5 min read

In This tutorial, You will learn how to sort object arrays by keys or properties in typescript. The object holds the key and value of a real entity. An object Array is a list of objects. There are multiple ways we can sort object arrays. first-way using Sort callback Comparator, second-way using lodash sortBy function, Third way use UnderscoreJS sortBy function. ES5 ES6/ES2015 way lodash sortBy Function UnderscoreJS sortBy Function Ramda sortBy function Typescript/Javascript Array provides a sort method that takes function callback....

How to sum an array of objects with numbers in react

December 31, 2022 ·  2 min read

It is a short tutorial on how to get a sum of numbers in React application. It also includes how to calculate sum or numeric properties of an object array with example. Let’s consider the array of objects as given below. [{ firstName: "John", lastName: "Erwin", email: "[email protected]", salary:5000 }, { firstName: "Ram", lastName: "Kumar", email: "[email protected]", salary:5000 } ] An array contains objects with different employee properties. Let’s see an example of how to print an array of objects into an HTML table, and also calculate the sum of object numeric values and display it in React component....

How to use switch case statement in React class and functional component

December 31, 2022 ·  3 min read

In this tutorial, We are going to learn the Switch case expression in React component. It includes how to load components and render based on switch case expression. In General Switch expression Statement syntax in javascript written is as follows switch(expression or variable) { case case1: return "case1" case case2: return "case2" case case3: return "case3" default: return "default" } Expression is a javascript expression that is evaluated to value. Value is a variable value....

Javascript Convert Array of objects to Map type example

December 31, 2022 ·  2 min read

An array of objects are a list of object enclosed in [], each object holds key and value pairs. The map is a new type introduced in ES6 that holds key and value pairs using the hash map data structure. Given an array of objects var arrayObjects = [ { sid: '11', name: 'john' }, { sid: '14', name: 'tom' } ]; In this blog post, I will take you to examples of converting an array to a map with keys and values in javascript....

Javascript Es6 Set tutorials | Typescript Set Examples

December 31, 2022 ·  6 min read

Set is a Data structure that is used to store unique elements introduced in ES6. In this blog post, We are going to cover the Set tutorials in typescript/javascript with examples. Other Classes are Map , WeakSet and WeakMap ES6 Set Data structure Es6 introduced the Set class for storing unique elements. javascript supports Set, Map, WeakMap data structures with Es6 version. Set preserves the order in which values are inserted....

Javascript ES6 Symbol Type code examples | Typescript

December 31, 2022 ·  3 min read

In this tutorial, We will have a look into learn the Symbol Primitive Data type basics with examples. Javascript ES6 Symbol Datatype The symbol is a primitive data type introduced with ES6 or ECMAScript 2015 in javascript. Typescript also supports this Symbol as a Primitive data type similar to String, number, and Boolean. The symbol is a special primitive type that represents Unique values or keys of an object....

javascript Eval function with examples in javascript

December 31, 2022 ·  3 min read

In this blog post, We are going to learn the javascript eval function with examples. javascript eval function eval is a predefined global function in javascript. It executes String in the form of Javascript code. It takes the input as a string and returns the output of the javascript expression code string. The code can be variables, objects, and objects which javascript executes using this function. This function works in javascript and Typescript as typescript is a superset of javascript programming language....

Javascript example GroupBy array of objects by key, property

December 31, 2022 ·  2 min read

You can also check other posts on Javascript Add, Delete from Array javascript Object Array Groupby keys example Sometimes after data is retrieved from the backend, We want to display the data using group by option. The array contains a list of the object where each object contains multiple keys and values. There are multiple ways we can achieve group in the array of objects First, let us declare an array of objects, each object holds the key and values of...

Javascript FileList example | How to modify files in input type file?

December 31, 2022 ·  4 min read

FileList is an object in javascript used to manipulate the file upload in javascript applications. What is a FIleList in javascript? FileList is an object in Javascript to read file metadata and content from input type file control on a user form. It also returns when a file is uploaded using drag and drop API in javascript. Suppose you have an input type file on a form. <input type=file multiple> Input type file used to upload files from a browser....

javaScript How to convert snake to camel case for a string

December 31, 2022 ·  2 min read

In this blog post, We look at how to convert snake/camel case tutorials with examples in javascript or typescript. Convert snake case to camel case in Javascript and Typescript The string is a group of characters that contains word(s). snake case text is a combination of words, separated by an underscore. For example hello_world is a snake case string example. snake case rules t sentences and words....

Kotlin is operator examples | Check variable is of an instance type

December 31, 2022 ·  2 min read

This tutorials explains about how to check variable type or instance of an class in Kotlin with example Sometimes, We want to check runtime type of an class in Kotlin with examples. Kotlin provides is operator to check an instance of an class. What is is operator in Kotlin? is operator used to check if given variable type is an instance of a given class type or not. This will very helpful for developers to know the type of the object at runtime....

Learn HTML5 Web Storage API tutorials

December 31, 2022 ·  6 min read

What is Web storage API in HTML5? Web Storage is a process of storing user-specific content on the client-side in web applications. Content is stored in a form of keys and values. It introduces as part of The HTML5 API Specification. Before that, the content will be stored on the client-side using cookies and Session Cookie. A cookie is a client-side object with an expiry time set. and It has some disadvantages....

Learn Typescript Bitwise and Assignment Operators with examples

December 31, 2022 ·  3 min read

Typescript operators: Learn bitwise, assignment, and comma operators with examples. Typescript Bitwise operators Bitwise operators are used to evaluating bit-based operations. Sometimes, it is required to evaluate bits of integer values, We have to use bitwise operators. There are several operators like in many programming languages. It works with 32 bits of an integer. These operators work on binary operands. Syntax: Operand1 Operator Operand2 Operand1 and Operand2 are javascript expressions....

Learn Typescript Logical operators & Examples

December 31, 2022 ·  3 min read

Typescript Boolean operators Logical operators are basic operators in a programming language. They compare Boolean expressions and return Boolean values. Boolean expressions are multiple conditions where each condition returns true/false. Then these conditions can be combined using this logical operator, the output result is A Boolean. The syntax and usage are the same in javascript too. This operator is also called the boolean operator in typescript. Here is a boolean operator syntax....

Learn Typescript Ternary, String, and Negation Operators

December 31, 2022 ·  2 min read

ternary operator in typescript These are also called Conditional Operators. This operator is applied to conditional expressions in which the expression is evaluated and returns the conditional logic. Syntax Condition? true-result? false-result; The condition is an expression that is evaluated first. if the condition is true, true-result is evaluated if the condition is false, false-result is evaluated. This is a shorthand syntax for simple if-else conditional expressions....

Multiple ways to apply styles to the component in React component

December 31, 2022 ·  5 min read

This article shows multiple ways to apply styles to a component. The first way, apply inline styles to react components using style object The second way, using import CSS files in React component third, using css in javascript using styled-component Fourth, SASS CSS preprocessor, and LESCSS, Stylus preprocessor languages React is a javascript library for UI components. CSS st are applied to style a component. React uses JSX Inline styles Create a React application Open a terminal and run the npx create-react-app appname command to create a brand new application from scratch....

Multiple ways to Convert Enum to Array of objects in Typescript with examples

December 31, 2022 ·  3 min read

In this tutorial, you are about to learn multiple ways to convert enum to an array of objects, an array of strings, and an array of key and value pairs in typescript with examples. Typescript enum constant type Enum is a new data type introduced in typescript. Its data is a group of constants. Data in the enum object are of type String or number. Most programming languages support enums....

Multiple ways to download a file or image in Javascript?

December 31, 2022 ·  2 min read

How to download a file or image from a given url in javascript. In Web applications, You have a feature download link that downloads the images from a given URL. You have an anchor link like below. <a href="url">Download File</a> when the user clicks on the link, it downloads a file from a server url. There are multiple ways we can do it. download file using HTML5 download file with HTML5 example if the image is present on the client side or web server, we can simply use an anchor tag with a download attribute containing the name of the file to be downloaded...

Multiple ways to iterate dictionary in typescript |Dictionary loop Example

December 31, 2022 ·  2 min read

Typescript dictionary class: Learn with examples. In this Blog Post, Learn How to iterate a dictionary in typescript with examples. Dictionary is a type of data structure with unordered list data, that contains key and value values. It is the same as map type in typescript. Dictionary objects declare in many ways, Check about declare dictionary in typescript Let’s create a Dictionary type interface in typescript interface Dictionary<T> { [Key: string]: T; } Initialize the Dictionary object with data...

Multiple ways to remove an element from an array in React with code examples

December 31, 2022 ·  4 min read

This tutorial explains how to remove an element from an array of elements in React with code examples. In this section, we will learn how to remove an object from an array of objects in React. ReactJS is a JavaScript UI library for building user interfaces. It is maintained by Facebook and Instagram. ReactJS remove object element from an array with code examples: How to remove an object from an array in ReactJS In this article, I’m going to show you how to remove an object from an array in ReactJS....

Multiple ways to use for loops to iterate objects in typescript

December 31, 2022 ·  3 min read

Every programming language provides iteration features. For loop is one of the ways to do iteration. Typescript for loop tutorials Typescript also provides a loop over specific times for executing code blocks. For Loop is used to iterate the elements from an array, map, set, and objects. There are many ways we can do for loop for the iteration of elements. Typescript provides different variations or iterations....

React model class example

December 31, 2022 ·  4 min read

This post covers a step-by-step tutorial on how to add a model class in React App. How to create a model class in react application When to use class or interfaces for models in Angular applications? Initialize model class with an array of objects in react application Display model class data in react render function. React is a front-end UI framework. It is based on components that take input from the user and send it to the Database as well as display the data to the browser....

React nullish coalescing operator example

December 31, 2022 ·  3 min read

nullish coalescing operator is released in ECMAScript 2020. It is a logical operator applied to two or more operands What is the nullish coalescing operator and how to use this in react components? You can check How to use the operator in Angular Angular nullish coalescing nullish coalescing operator is a logical operator used to check value is null or undefined on two values. nullish abbreviated as null and undefined values of a parameter coalescing is of combining two values...

Running VueJS Hello World Application using parcelJs

December 31, 2022 ·  3 min read

In my previous article Learned how to install parcel and Hello world example. In this tutorial, we will walk through the Hello World VueJs application using the Parcel module bundler. parcelJS is a web application module bunder with zero configuration and the best in performance. A lot of VueJS applications use either plain NPM commands or webpack as module bunder to run and test it VueJS is an open-source framework for building UI applications....

The best way to convert Array to JSON in typescript with example

December 31, 2022 ·  3 min read

You can also check other posts on Javascript Add,Delete from Array Casting Array and JSON introduction The frontend will interact with the Database in Typescript apps like Angular using REST API. REST API is a separate application that communicates with a database and can be created in any language. The REST API accepts JSON as input and returns JSON as output. Angular applications which are based on the MVC pattern take the input from the View layer and store/holds them in an array of objects as a model in a Controller....

Top 6 In operator examples in Javascript|Typescript|Angular

December 31, 2022 ·  5 min read

In operator is an inbuilt operator provided in javascript language. This covers the usage of In operator in the following cases. Contents Javascript In operator How to check valid index exists in an array using operators How do I check if an object has a key in JavaScript? How to check a key exists in an Object inherited object in typescript? In operator enum in Typescript with an example How to Check string exists in Enum typescript?...

typedoc tutorial | Typescript Documentation API generator

December 31, 2022 ·  3 min read

What is typedoc in typescript? TypeDoc is a Documentation API Generator for generating documentation for typescript applications. This is similar to JSDoc, ESdoc, and JavaDoc. Documentation for any project is one of the key factors for successful application development. s tool takes typescript files or typescript projects as input, parses it, and generates Documentation in a different format as output. HTML is one of the generated formats that contains, Links, Styles, and HTML of code....

Typescript - Learn while loop examples

December 31, 2022 ·  2 min read

In this tutorial, learn while looping in typescript with examples. While Loop in typescript As every programming language provides a while loop. While loop executes the statements of the code block for true conditional expression. It first evaluates the conditional expressions, and if they are ‘true,’ the Code block is executed. Otherwise, the code enclosed within the while loop is not executed. while is a keyword in typescript....

Typescript Switch case tutorial with examples

December 31, 2022 ·  5 min read

Typescript switch class: Learn with examples. In this blog post, we are going to learn the Switch case statement with examples Contents Typescript Switch case Typescript Multiple Switch cases statement Example Typescript Switch Case Enum example string variable in switch and case example primitive data type values in switch case Switch case union type with Object and interface Typescript Configuration - noFallthroughCasesInSwitch Conclusion Typescript Switch case switch case is a conditional expression that checks and evaluates the expression and matched case block of code executes....

Typescript - Beginner Guide to type keyword with example

December 31, 2022 ·  3 min read

In this short tutorial, learn about the type keyword in typescript with examples. Type is a keyword in typescript, used as an alias for existing or custom types. Contents type keyword examples How to declare a type nullable Create an empty typed array of an interface or class How to create an empty typed string array with examples Create and initialize typed empty objects in an array Conclusion type keyword examples You can check another post on Fix for Object is possibly null Following are example...

Typescript - How to convert Map to/from JSON with examples| Javascript example

December 31, 2022 ·  2 min read

In Typescript applications, We used to get the use cases where data in map object convert to JSON object or JSON to Map conversions. In this blog, We are going to learn how to convert Map to JSON or JSON to Map. The map is a data structure introduced in ES6 for storing key and values. JSON is a javascript object notation for the format of key and values enclosed in braces....

Typescript - How to create an empty typed array|object |Interface|string with examples

December 31, 2022 ·  3 min read

In this short tutorial, Learn how to create an empty typed array in typescript. It includes multiple ways to create a string-typed empty array. Contents Create an empty typed array interface or class example Create an empty typed array interface Using generics type declaration Create an empty typed array interface type assertion Create an empty typed array interface Array constructor How to create an empty typed string array with examples How to Create and initialize typed empty objects in an array Conclusion Let us declare Employee Interface in the ts file....

Typescript - Object Type and Object with examples

December 31, 2022 ·  3 min read

In this blog post, We are going to learn the typescript object type with examples. In the typescript, the object has three variations of creating objects. 1. Object 2. object 3. {} You can check another post on Fix for Object is possibly null Typescript object type Typescript introduced a new data type called object type. this object represents types that are not primitive types like string, number, void, boolean, null, and defined....

Typescript abstract class | Beginner tutorial & examples

December 31, 2022 ·  4 min read

Typescript Abstract class: Learn with examples. In this Blog Post, Learn the Abstract class tutorials in typescript. It is an important concept of Object Oriented Programming. Below are Other concepts Classes polymorphism, Encapsulation Interfaces. You can also check Typescript final keyword What is Abstract Class in Typescript Typescript supports object-oriented programming concepts using classes, interfaces, and abstract classes. Class defined with the abstract keyword is called abstract classes....

Typescript add and subtract days, months, years to Date | extension examples

December 31, 2022 ·  3 min read

This tutorial explains how to add a day, month, and year to the current date in Typescript with examples Typescript date add days, months, year Create a function that takes the date and number of days and adds the days to the date object and returns the Date object. function addDays(date: Date, days: number): Date { date.setDate(date.getDate() + days); return date; } console.log(new Date()); console.log(addDays(new Date(), 2)); Output: "2022-10-19T03:44:33.834Z" "2022-10-21T03:44:33.839Z" ` To add 2 months, pass 60 days to the addDays function....

Typescript Array Sort example | javascript

December 31, 2022 ·  4 min read

In this blog post, We are going to learn how to Sort Array in javascript or typescript. We are going to learn Sort in typescript How to sort an array of strings in typescript? How to sort an array of objects in javascript? The typescript Array class provides a sort method to sort elements. typescript Array Sort method The Array class provides the method sort to the array elements in ascending or descending order....

Typescript Array Tutorial with Examples

December 31, 2022 ·  8 min read

Typescript Array: Learn with usage examples. Array Object in Typescript Arrays are the basics of any language. Arrays are used to store multiple values under one collection name. Basically, in a web application, we will use Arrays for storing a list of objects, a list of JSON values, and custom entries as well as for storing primitive values. In typescripts arrays are objects. Elements from arrays can be retrieved by index....

TypeScript Compiler Configuration | tsconfig.json file example

December 31, 2022 ·  7 min read

typescript configuration file (tsconfig.json) is a json file that contains in root project to indicate that Typescript project. It provides an configuration settings for typescript compiler to generate Javascript. You can also check how to generate tsconfig.json file typescript configuration file Every typescript project has a tsconfig.json file in the application root directory. tsconfig is abbreviated as typescript configuration file. This file contains all the configuration parameters required for the typescript compiler....

Typescript Convert String/Number to Enum example

December 31, 2022 ·  2 min read

enum contains strings and number properties, Converting from String/number to enum is not automatic and has no built-in method. This post talks about parsing string/number to/and from an enum with examples. You can check my other posts on typescript Enum object enum size in typescript Convert Enum to Array Check String or Integer exists in Enum Compare Enum Strings and Numbers 7 ways of Iteration or looping Enum data typescript enumeration Let’s declare Month enum constants holds properties of strings only....

Typescript Datatypes - tutorials with examples

December 31, 2022 ·  4 min read

Once you read Typescript Installation and Hello world program article, You will get a clear understanding of how to install typescript and write the hello world program. In this article, I will walk through the basic data types of typescript language. Typescript datatype Typescript has all data types that support javascript. Supported data types in typescript are void, Null, undefined, boolean, string, Number, array , tuple data types, Enum, Any and Never data types....

Typescript Dictionary Complete Guide with examples

December 31, 2022 ·  3 min read

Typescript dictionary class: Learn with examples. In this Blog Post, Learn the dictionary in typescript with examples. Dictionary is a type of data structure with unordered list data, that contains key and value values. It is the same as map type in typescript. Does TypeScript have dictionary? Typesript has no dictionary name type, however it has Map that stores list of key and values. And data is unordered key and values....

Typescript Difference between interface and Types

December 31, 2022 ·  3 min read

This is a short tutorial about Interfaces and types of uses and the difference between them. You can check another post on Fix for Object is possibly null Types and [interfaces] (/2018/08/understanding-typescript-interfaces.html) are used to describe the design of a custom type but there are some differences. What is an interface in typescript? Interfaces in typescript provide contracts and rules for classes to implement. It is used to group the properties to create custom class types....

Typescript Do While Loop Examples | Javascript

December 31, 2022 ·  2 min read

In this blog post, learn to Do while loop examples in typescript and javascript. Do While Loop in typescript/javascript Do while loop is the same as a [while loop](/2018/10/typescript-learn-while-loop-examples.html). While loop executes the condition expression first. Do while loop executes the condition expression last after the code statement executes. Do and while are keywords in the typescript. In this do-while loop, Code statements execute at least once....

Typescript Enum tutorials - Best Examples

December 31, 2022 ·  3 min read

Contents Enum type in typescript Plain Enum Example How to declare const in enum constants typescript Typescript Enum Number Example Typescript Enum String example Typescript Enum examples TypescriptHow to Iterate elements of an enumeration? How to Convert String to Enumeration in typescript? How to convert Enum to Array Object? Summary Enum type in typescript Enum is one of the latest features of typescript language....

Typescript extension methods to existing types with examples

December 31, 2022 ·  2 min read

Swift and dart languages provide extensions as part of the language. Extension methods are added extra functionality to existing classes. It provides extra new methods to existing classes. You can add new methods to existing types such as Number, and String Dates. Javascript provides prototypes to add extra functionality, Similarly, You can use the prototype for existing classes. Typescript extension methods example The following is a way to add an extension method to the existing Inbuilt type....

Typescript Guide to Decorators with code examples

December 31, 2022 ·  2 min read

What are decorators in TypeScript? Typescript 1.5 version introduced decorators, which adds extra functionality to classes methods, and properties. Decorators are one of the design patterns in an object-oriented program. Decorators are attached to the below entities class declaration methods properties arguments or parameters How do you write a TypeScript decorator? Typescript Decorators are functions declared with functionality. these are declared using @metadata at compile time....

Typescript How to convert/parse String text to JSON Object

December 31, 2022 ·  3 min read

how to convert String to JSON Object in typescript? The response returned from REST API or back servers in typescript/javascript is in the form of String JSON text, and developers must know how to convert it to JSON or class object. Typescript is a superset of javascript with a type assertions feature. In javascript, we have used JSON.parse() method to convert to JSON. You can check here....

Typescript How to implement constants property in a class| Typescript read-only

December 31, 2022 ·  2 min read

Typescript Static are readonly constants: Learn how to declare constants in typescript classes and constructors with rules. You can also check Typescript final keyword Class properties constants in typescript Constants are fixed values that cannot be changed once assigned a value. In any programming language, such as Java, these are declared in class-like member variables. But typescript does not allow class-level constants. What will happen if the class declares constants member variables?...

Typescript how to remove Comments in javascript examples | tsconfig.json compiler options removeComments

December 31, 2022 ·  1 min read

This tutorial explains about typescript compiler remove comments configuration You can also check how to generate tsconfig.json file and typescript tsconfig.json tsconfig removeComments option example Let’s write a typescript code Following code contains simple class with inline and multi-line comments. Easy hello world string print. // Hello World example console.log("hello world"); /* Employee class contains * Name * Salary * fields **/ class Employee { name?: string; // string or undefined salary?...

Typescript Interfaces - Learn in 5 mins with examples

December 31, 2022 ·  6 min read

In this Blog Post, learn the Interfaces tutorials in typescript. You can also check Typescript final keyword It is one of the concepts of Object-Oriented Programming. Other concepts are Classes polymorphism Encapsulation Abstract classes. Contents Typescript Interface Basic tutorial How to declare an interface in Typescript? Typescript Typesafety example How to declare different member variable types in typescript? Interface Optional Types example Interface Readonly Types example Function Interface Example Index types signature in interface Example Interfaces inheritance examples Using extended example Using implements interface example interface in typescript advantages Relation between interface and classes Conclusion Typescript Interface Basic tutorial Interfaces in the typescript are the same as in another programming language like java....

Typescript Language Complete tutorials and Examples

December 31, 2022 ·  3 min read

Typescript is a popular open-source programming scripting language. I have written a lot of articles about typescript language. This is a summary page of all articles in order. Typescript tutorial To have a complete understanding of typescript, Please read the below articles complete understanding. All the posts provide a complete basic understanding of language features and detailed explanations with examples All the posts are in order feature-wise. Latest Typescript Update You can install the latest typescript update using npm install typescript...

Typescript let, var, Const keyword with examples | Javascript | ES6

December 31, 2022 ·  2 min read

let, var, and Const keywords use to declare variables in typescript and javascript. Variables are declared either globally or locally. typescript Var keyword the var keyword is for a variable declaration of javascript. Typescript behavior is also the same as the functional scope Variable declared with this keyword scope is either locally if declared in a function or globally if declared outside if the variable is not used the var keyword for declaring a variable, assumes global variables the variable is redeclared with the var keyword, It will not lose its original value variable returned undefined without declaring and initialization its value typescript Var example and usage var value = 11; var value1; function myfunction() { value = 456; // allowed value2 = 14; console....

Typescript nullable type with examples

December 31, 2022 ·  5 min read

In this tutorial, discuss the following things with examples. How to define a type that can be string or null? How to assign null to a variable? typescript nullable return type How to assign interface with null type In typescript applications, dealing with nullable types is an important step for avoiding runtime problems. You can check other post on Fix for Object is possibly null...

Typescript overload function and constructor in a class

December 31, 2022 ·  5 min read

Every Object-oriented language provides OOPS concepts of Inheritance, polymorphism, overloading, etc. Typescript also provides overloading methods and constructors with the same name. overload is a defined same name with different parameters and returns types. A typescript is a different approach unlike many other programming languages provide. Typescript also provides this concept, but with a different implementation. So what is overloading in typescript? Usually, as per any programming language, we will write the code below....

Typescript Polymorphism with examples

December 31, 2022 ·  4 min read

In this post, learn the basic guide to the Polymorphism concept in typescript. You can also check Typescript final keyword What is Polymorphism in Typescript? It is one of the concepts of Object Oriented Programming_. Other concepts areClasses,Interfaces , Encapsulation and Abstract classes. Polymorphism means many forms of a function or method in a class Typescript supports the polymorphism concept in many ways. function overloading function overriding Interface typescript Method overriding Method overriding is allowed the Child class to provide an implementation of a function or method that is already provided by the Superclass of Parent class....

Typescript set get methods | Typescript Encapsulation

December 31, 2022 ·  3 min read

In this Blog Post, learn the get and set Accessor methods or Encapsulation in typescript. What is Encapsulation in Typescript? It is one of the concepts of Object-Oriented Programming. Other concepts are Classes Interfaces Polymorphism Abstract classes Each class or object contains two things. member variables or properties to store data Functions/method code that manipulates the data or variables or properties. Data is protected from the outside world thus it can’t be accessed directly, but it can be accessed via methods/functions code....

Typescript Singleton pattern Implementation with example

December 31, 2022 ·  2 min read

In this blog post, learn the Singleton pattern in Typescript with examples. Typescript Singleton Design pattern Singleton is one of the simple and frequently used design patterns in application development. It is a creational design pattern that enables the creation of a single instance or object of a class in the application. Only Once an instance of the class is created in an application. Every programming language provides an implementation for this pattern....

Typescript Static keyword to Property method and Constructor

December 31, 2022 ·  2 min read

In this blog post, We are going to learn Static keywords with properties, methods, and constructors of a class in typescript. Static keyword in typescript static is a keyword that can be applied to the properties and methods of a class in typescript. Static members are accessed using directly using class names. Typescript static properties and Method example When you want to call any methods in a class, we will use an object instance for accessing its methods, Static methods will use class names....

Typescript String - Complete tutorials with examples

December 31, 2022 ·  4 min read

You can check another post on Fix for Object is possibly null typescript String object Data type The string contains a group of characters saved under the String object variable name. You need to know basic operations on String, How it works? In this tutorial, we will walk through the different methods and examples. Basic syntax Of String Object creation var variable_name = new string('CloudHadoop') there are many ways we can create a string object in typescript...

Typescript tutorials Hello World demo application examples

December 31, 2022 ·  4 min read

Typescript is an extended version of javascript with more features like static typing, Modules based code, and Object-oriented support. Typescript is an open-source language from Microsoft. Typescript will not run on any browser directly. The compiler is required to compile typescript to javascript. The above diagram depicts the steps for the execution code process. The developer writes the code using typescript language in Normal Editor/ Compatible IDE....

Typescript typeof and instanceOf operator examples

December 31, 2022 ·  3 min read

You can check another post on Fix for Object is possibly null What is typeof operator in typescript? This operator is used to get a string specifying the type of variable. This will very helpful for developers to know the type of the object at runtime. typeof operator syntax typeof {operand} parameter: operand is supplied either as the primitive data type of custom object. possible operand values are variables, object variables, and strings....

Understanding typescript latest features - examples

December 31, 2022 ·  3 min read

Latest Typescript update Typescript 4.9.3 arrived and was released in September 2022. The latest typescript version was released by Microsoft. Typescript is an extended version of javascript based on the ECMA standard for type safety. There is a major structural change released with this. In this article, We will see the major features and examples. Features Project references Richer Tuple types Unknown Type Support for DefaultProps in JSX Improved error messaging API breaking changes Project Reference changes It is a major feature that will be helpful for larger projects....