Learn free typescript tutorials

Find an object by property in an array of objects javascript

September 27, 2022 ·  3 min read

Javascript examples to find an object by key from an array of objects. let’s declare an array of objects and each object contains an id and name properties. let emps = [{'id':'1','name':'john'},{'id':'2','name':'eric'}, {'id':'3','name':'mark'}, {'id':'4','name':'andrew'}] There are multiple ways we use to search an array of objects for a given property value. Javascript custom code use javascript for loop This example does not use any array methods to find an object from an array....

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

September 27, 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 convert fullname into first last and middle name in javascript example

September 27, 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 name into first, last, and middle name in javascript and Angular. usually, the user enters the name with three words. for example, the user entered in name filed as...

How to Convert string to character array in javascript

September 27, 2022 ·  2 min read

This example tutorial explains to convert a string to an array of characters in javascript. How to get Character Array from a string javascript? There are multiple ways we can do it. use split function The string has a split function with argument. The argument is a separator that uses to split into it. Returns array of split elements. let str="cloudhadoop"; console.log(str.split('')); Output [ 'c', 'l', 'o', 'u', 'd', 'h', 'a', 'd', 'o', 'o', 'p' ] It works perfectly for a string of alphanumeric characters,...

How to create an array of numbers in javascript

September 27, 2022 ·  2 min read

It is a short tutorial on how to create an array with a sequence of numbers. This tutorial covers multiple ways we can do 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. Here is an example to create an array of sequence numbers from 1 to 50....

How to get fragmented value from a url in JavaScript

September 27, 2022 ·  1 min read

Sometimes, We want to get the fragmented value after # symbole from an url in javascript For example, you have url 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 fragmented url value in javascript There are multiple ways we can retrieve fragmented url values...

How to get string size in bytes in javascript examples

September 27, 2022 ·  2 min read

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. However, We can find string size in bytes in multiple ways. using a nodejs buffer object Using Blob object TextEncoder encoder method unescape method Let’s declare the input string var str="a"; var str1="ab"; var str2="aabc"; var str3="🙂"; var str4="👍🙂"; input one character returns 1 byte in characters, whereas “ab” returns 2 bytes....

How to retrieve x and y positions of html div elements javascript

September 27, 2022 ·  2 min read

How do get x and y-axis positions for any HTML element in javascript? Sometimes, We want to get x and y-axis coordinates for a given HTML element such as Div and img. How to get x and y positions of HTML div element Javascript provides DOM API to access the object. getBoundingClientRect() in javascript returns size of an element and position related to view port. Here is a Syntax DOMRect obj=object....

Javascript Convert Array of objects to Map type example

September 27, 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....

How to declare Return Types for Functions in TypeScript

September 24, 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

September 24, 2022 ·  3 min read

This tutorial shows how to declare and return type in Functions of a Typescript. 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 return type. In typescript, Each function returns data. Does typescript allow to declare return type?...

gitignore git files in flutter and dart project

September 23, 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....

Android Gradle command line list examples

September 22, 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...

How to check the boolean value of an array in javascript

September 13, 2022 ·  2 min read

In this blog post, You’ll learn to check the boolean value of an array in javascript or typescript. Find Array contains a boolean value in javascript The array contains a collection of similar type values. For example, we have a User form that contains multiple checkboxes - which can select All/Deselect All in Angular application, A checkbox in FormGroup is defined with FormArray which holds true - if the checkbox is checked, false - checkbox is not checked....

Different ways to generate GUID in javascript

August 10, 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....

How to convert Enum to String and Number in Typescript

August 10, 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....

Typescript - Learn while loop examples

August 7, 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....

Running VueJS Hello World Application using parcelJs

July 28, 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 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....

fix multiple formats for file Select a default formatted

July 26, 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`....

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

July 26, 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....

Multiple ways to download a file or image in Javascript?

July 26, 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 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...

Top 6 In operator examples in Javascript|Typescript|Angular

July 26, 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?...

5 ways to get Image width and height javascript examples

July 23, 2022 ·  3 min read

Image contains width and height based on resolution. Sometimes we need to find the width and height of an image 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 Plain JavaScript to get the height and width of an image In Plain javascript, Two ways we can get the height and width of an image....

Javascript example GroupBy array of objects by key, property

July 23, 2022 ·  2 min read

Object Array Groupby keys 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 by in the array of objects First, let us declare an array of objects, each object holds the key and values of var emps = [ { name: "frank", id: 1, department:"sales" }, { name: "john", id: 2, department:"hr" }, { name: "eric", id: 3, department:"sales" }, { name: "andrew", id: 4, department:"sales" }]; ## using lodash groupBy examples lodash is a popular library that provides a lot of useful inbuilt utility methods....

Primeng toast example | Angular Popup component

July 22, 2022 ·  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 message for Server validation errors - Duplicate records, Domain operation results message like the record is deleted from a database....

Frequently Used Array Examples - Javascript|Typescript

July 19, 2022 ·  2 min read

In this blog post, We are going to learn 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. As you know there are requirements to find out elements in an array of typescripts. You can check my post on Array Sort-Object Examples Typescript Examples | Javascript Examples Following is a list of frequently used array examples...

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

July 19, 2022 ·  3 min read

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....

Javascript Es6 Set tutorials | Typescript Set Examples

July 15, 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....

ES6 Map Class Tutorials in Javascript Examples Typescript

July 14, 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 The map is a data structure with 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....

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

July 12, 2022 ·  1 min read

Sometimes, You want to pass or share data between different angular components....

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

July 5, 2022 ·  4 min read

In this article, We are going to see the 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....

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

July 5, 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....

Learn HTML5 Web Storage API tutorials

July 5, 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....

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

July 4, 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....

React model class example

July 4, 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....

How to Convert string to/from Date in javascript?| examples

July 2, 2022 ·  3 min read

This tutorial is about converting string to/from Date in javascript with examples. These examples work in typescript as typescript is a superset of javascript. String and Date types in typescript 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....

Typescript Language Complete tutorials and Examples

July 2, 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...

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

July 1, 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: 'john@gmail.com' }, { name: 'Ram ', email: 'ram@gmail.com' } ] We can use the Array map function to iterate each object of an array. Let’s see how to iterate using the Array....

React nullish coalescing operator example

July 1, 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...

Multiple ways to apply styles to the component in React component

June 27, 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....

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

June 26, 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: 'john@gmail.com' }, { name: 'Ram', email: 'ram@gmail.com' }, { name: 'Abc', email: 'abc@gmail.com' } ] Javascript array has a sort function that sorts a default order....

How to sum an array of objects with numbers in react

June 26, 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: "john@gmail.com", salary:5000 }, { firstName: "Ram", lastName: "Kumar", email: "john@gmail.com", 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

June 26, 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....

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

June 19, 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: "john@gmail.com" }, { firstName: "Ram", lastName: "Kumar", email: "john@gmail.com" } ]; We can do it in multiple ways to convert Array to string in react....

ES6 Learn Symbol Type in javascript | Typescript

June 11, 2022 ·  3 min read

In this blog post, We are going to learn the Primitive Data type Symbol basics with examples. 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 like String, number, and Boolean. The symbol is a special primitive type that represents Unique values or keys of an object. It is used to identify unique objects with symbols object....

Es6 Weakmap class examples in javascript | Typescript

June 11, 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 Spread Operator in javascript | Typescript examples

June 11, 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....

Es6 WeakSet tutorials class examples in javascript | Typescript

June 6, 2022 ·  3 min read

WeakSet is one of the collection class similar to 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....

javaScript How to convert snake camel case for a string

June 6, 2022 ·  2 min read

In this blog post, we are going to discuss snake/camel case tutorials with examples in javascript or typescript. Convert snake case to camel case in typescript: The string is a group of characters that contains word(s). snake case text is a combination of words that are separated by an underscore. for example hello_world is a snake case string example. Important points about snake case sentences no spaces or punctuation in between words words are separated by an underscore....

Es6 Generator Functions Yield in javascript | Typescript

June 3, 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....

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

May 29, 2022 ·  2 min read

This post talks about how do you add a property or function in 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 window object in javascript and typescript...

How to Convert Enum to Array of objects in Typescript?

May 28, 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 find the length of enum data in typescript

May 28, 2022 ·  2 min read

Enum is inbuilt in the data type used to store multiple contents in a single namespace. Sometimes, As a developer need to find several elements of 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....

javascript Eval function with examples in javascript

May 28, 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....

Learn Typescript Arrays Tutorial with Examples

May 28, 2022 ·  6 min read

Array Object introduction Arrays are the basics of any language. Arrays are used to store the multiple values under one collection name. Basically, in a web application, we will use Arrays for storing list objects which are retrieved from the database, 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. Syntax var variableArrayName[:Data-type]; variableArrayName=[list of objects/elements] or var variableArrayName[:Array[Data-type]]; variableArrayName=[list of objects/elements] Array variable declaration and initialization We can declare arrays and initialize them in many ways...

How to compare dates in Angular | Momentjs example

May 25, 2022 ·  4 min read

It is a short tutorial on comparing two date objects in Angular with examples. 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 see the Date object how do you create it in How do you create a Date object in Angular Date object creates in Angular like Javascript object....

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

May 25, 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 type safety. There are cases you need to send/consume the JSON object from 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 declare JSON object in Angular | Typescript example

May 25, 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, 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...

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

May 24, 2022 ·  3 min read

In This tutorial, Learn how to fix in 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

May 24, 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 prerequisite First, Create an angular application1on using Angular CLI - ng commands,...

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

May 24, 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....

Angular 13 How to load data before rendering the component?

May 23, 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....

How to load an image in Angular with examples

May 23, 2022 ·  1 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 Sort Array JSON objects with date field in Angular | Typescript example

May 22, 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 Array of JSON objects with date key in Angular?...

Angular 13 Decimal Pipe examples | rounded number examples

May 21, 2022 ·  4 min read

It is a short tutorial about angular pipe decimal examples. Limit number to 2 decimals How to display the number with decimals in Angular. 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 13 Pipe Currency examples | format currency number price examples

May 21, 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 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 an number value or expression to format currency: It is an object which contain currency object format rules currencyCode: Short code for currency and default currency code is USD( US dollar) display: it is an string or boolean digitsInfo: Represent decimal format...

Angular 13 Pipe Json examples | pretty format code

May 21, 2022 ·  4 min read

It is a short tutorial about angular pipe json examples. How to print json objects in Angular component Angular has 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? Let’s declare an Employee....

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

May 21, 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 declare 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 HTML select/dropdown of an angular application...

Difference between ngx-bootstrap and ng-bootstrap

May 18, 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....

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

May 11, 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....

Angular 12 nullish coalescing operator

May 11, 2022 ·  2 min read

nullish coalescing operator is a logical operator introduced in the latest javascript i.e EcmaScript 2020. This post covers what is nullish coalescing operator in javascript/typescript and how it is used in Angular 13 components. 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 Here is a syntax...

Angular ngIf examples

May 11, 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...

How to check null or empty or undefined in Angular?

May 11, 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 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 undefine or null in Angular This example checks a variable of type string or object checks...

Angular 13 material divider tutorial| mat-divider examples

May 9, 2022 ·  4 min read

Divider is UI elements to separate the UI components with a thin line horizontally or vertically. This helps organize and group the elements in 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 13 version, So the MatDividerModule module needs to configure....

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

May 9, 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 raw html binding |innerHtml example

May 9, 2022 ·  3 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 In Angular, It is simple to bind the properties and events using two-way binding syntax. Property binding can be done using the below syntax....

How to declare an array of objects in Angular|typescript

May 9, 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...

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

May 8, 2022 ·  3 min read

angular application is started with ng serve, thus starts the server, ng serve automatically reloads the changes if any changes to component/CSS/HTML in the angular application. The below commands starts 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

May 8, 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?...

Different ways to convert any type to objects in Angular example

May 8, 2022 ·  2 min read

Learn to convert or cast any type in typescript to 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 cast any object to different data types....

How to Format array of dates in typescript Angular example

May 8, 2022 ·  3 min read

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 convert Observable to Promise in angular|Typescript

May 5, 2022 ·  2 min read

Sometimes, We want to convert observable to promise object and call callback then() on the promise in Angular. Observable returns multiple values and promise return single values. Observable is 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...

Arithmetic and Relational Operator in typescript

April 21, 2022 ·  2 min read

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. This evaluates Arithmetic operators on two operands. Here is a syntax operand1 operator operand2 Assume that the p has a value of 20, and q has a value of 30....

Best 5 ways to remove the duplicate object from array In javascript| Fastest way delete duplicates in typescript

April 21, 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?

April 21, 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 for 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

April 21, 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

April 21, 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. What is Class in Typescript? Class is introduced in the ES6 version of the latest JavaScript. The same classes were also implemented with Typescript....

Difference between const and readonly in typescript/angular

April 21, 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. 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 const content = "text string"; Next, assign with new value to the constants....

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

April 21, 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....

Fix for Object is possibly null or undefined in typescript?

April 21, 2022 ·  3 min read

This post explains below things What causes error TS2533: Object is possibly ‘null’ or ‘undefined’"? Multiple ways to fix this. What causes error TS2533: Object is possibly ‘null’ or ‘undefined’"? This error caused due to an object property might result in null or undefined. It is a compile-time error for an object possible is null after setting –strictNullChecks=true compiler configuration flag. For example, In the below code str is defined with string array or undefined or null....

How do import other TypeScript files? example

April 21, 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 outside. modules are reusable code introduced in javascript, The same is introduced in typescript. export and import keywords in typescript used to reuse class, interfaces, functions, Enum, and properties from another module...

How to assign dynamic properties to an object in typescript

April 21, 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 String/Number exists in enum in typescript

April 21, 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 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 Strig exists in Enum values?...

How to Compare Enum strings or numbers in typescript?

April 21, 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 uses the comparison operator !== and === operator 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?

April 21, 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 Convert BigInt to Number type in Typescript?

April 21, 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 JSON Object to Interface or class in typescript?

April 21, 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 Explicit Interface conversion How to map Nested JSON object to interface in typescript?...

How to Convert Number to/from String in typescript?

April 21, 2022 ·  5 min read

Did you face the 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

April 21, 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 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 Object to/from Array in javascript/Typescript/Angular applications. First, we will see how the object Array creates is in typescript....

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

April 21, 2022 ·  3 min read

We have a use case in development where strings with values like ‘true’ and ‘false’ are converted to 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 boolean or boolean in typescript. We want string-formatted values to need to convert to a boolean value. How to convert String to boolean in typescript There are multiple following ways to convert String to boolean in typescript....

How to create an array of multiple types in Typescript

April 21, 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 number, string, or boolean or objects 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 and declare dictionary in typescript

April 21, 2022 ·  2 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. How to declare and initialize a dictionary using a map? There are multiple ways can create a dictionary. using map type A map is a type introduced inES6 and typescript....

How to declare a function throws an error in TypeScript

April 21, 2022 ·  1 min read

In Programming, Error is a common requirement to handle it inside a code. Handling error is a programmer’s responsibility to have a clean code and avoid the graceful exit of an application. 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....

How to declare static constants in Typescript and Angular

April 21, 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 class....

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

April 21, 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. It covers How to generate from a command line. tsc command works before generating the file. Run the below command, to check tsc command installs or not....

How to map array to another array in typescript example

April 21, 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 run typescript files from the command line.

April 21, 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. To 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 Sort Object Array by property or key in Typescript?

April 21, 2022 ·  3 min read

In This tutorial, You will learn how to sort object arrays with keys or properties in typescript. The object holds the key and value of a real entity. Object Array is a list of objects. There are multiple ways we can sort object arrays using Sort Comparator. Array object soring with comparison logic Let’s declare an array of objects where each object holds id and name properties Following is an example of Sorting an array of objects in ascending order with the id property...

Learn Typescript Bitwise and Assignment Operators with examples

April 21, 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 compiler option| tsconfig.json file Options

April 21, 2022 ·  7 min read

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. Angular 2+ is based on the typescript and every Angular project contains this file in the project root directory. Browsers will not understand the typescript file, so there is a process called compile/transpile used to compile typescript code to javascript code....

Learn Typescript Logical operators & Examples

April 21, 2022 ·  3 min read

Boolean operators Logical operators are basic operators in a programming language. They compare A Boolean expressions and return A 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....

Learn Typescript Ternary, String and Negation Operators

April 21, 2022 ·  2 min read

ternary operator in typescript These are also called Conditional Operators. This operator is applied to conditional expressions in which 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. We will see the example...

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

April 21, 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 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 of the programming languages support enums....

Multiple ways to iterate dictionary in typescript |Dictionary loop Example

April 21, 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 object declare in may 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 use for loops to iterate objects in typescript

April 21, 2022 ·  3 min read

Every programming language provides iteration features. For loop is one of the ways to do iteration. Typescript for loop Typescript also provides a loop over specific times for executing code block. 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 iteration of elements. Typescript provides different variations or iterations. normal for loop in typescript for(initial value; condtion: countervalue){ // code block } It contains the for keyword followed by four statements including parenthesis....

typedoc tutorial | Typescript Documentation API generator

April 21, 2022 ·  3 min read

What is typedoc ? 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. Type doc 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 Switch case tutorial with examples

April 21, 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

April 21, 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 Following are example...

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

April 21, 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

April 21, 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 Using generics type declaration type assertion Array constructor How to create an empty typed string array with examples 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

April 21, 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. {} 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. The reason to introduce other object types is as follows...

Typescript abstract class | Beginner tutorial & examples

April 21, 2022 ·  3 min read

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

Typescript Array Sort example | javascript

April 21, 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? Typescript Array class provides a sort method to sort elements. Array Sort method Array class provides method sort to the array elements in ascending or descending order....

Typescript Array Tutorial with Examples

April 21, 2022 ·  7 min read

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

Typescript Convert String/Number to Enum example

April 21, 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 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

April 21, 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 Difference between interface and Types

April 21, 2022 ·  3 min read

This is a short tutorial about Interfaces and types of uses and the difference between them. Types and [interfaces] (/2018/08/understanding-typescript-interfaces.html) are used to describe the design of an 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. Let’s create an interface...

Typescript Do While Loop Examples | Javascript

April 21, 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 typescript. In this do-while loop, Code statements execute at least once. These loops are used to iterate the iterable objects like set, Map, and Array....

Typescript Enum tutorials - Best Examples

April 21, 2022 ·  3 min read

Contents Enum type in typescript Plain Enum Example declare const in enum constants Enum Number Example Enum String example Typescript Enum examples How 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 Guide to Decorators basics with examples

April 21, 2022 ·  1 min read

Typescript Decorators Typescript introduced decorators, Decorators are one of the design patterns in an object-oriented program. Decorator Design pattern Design patterns are solutions to repeated problems. This pattern allows adding functions and behavior to objects dynamically. It does affect the overall behavior of objects of a class. Typescript decorators can be applied to Methods Classes Properties parameters Accessor These are experimental features, This might change in future versions....

Typescript How to convert/parse String text to JSON Object

April 21, 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

April 21, 2022 ·  2 min read

Typescript Static are readonly constants: Learn how to declare constants in typescript classes and constructors with rules. 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. class Employee { const defaultValue = 10; calculate() { console....

Typescript Interfaces - Learn in 15 mins with examples

April 21, 2022 ·  6 min read

In this Blog Post, learn the Interfaces tutorials in typescript. 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 variables types in typescript? Interface Optional Types example Interface Readonly Types example Function interface Example Index types signature in interface Example Interfaces inheritance examples Using extend 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 let, var, Const keyword with examples | Javascript | ES6

April 21, 2022 ·  2 min read

let, var, Const keywords uses to declare variables in typescript and javascript. Variables are declared either globally or locally. 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 example and usage var value = 11; var value1; function myfunction() { value = 456; // allowed value2 = 14 console....

Typescript nullable type with examples

April 21, 2022 ·  4 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. How to declare assigned nullable types with strictNullCheck in typescript? Typescript is a statically typed version of javascript, So the strictNullCheck configuration in tsconfig....

Typescript overload function and constructor in a class

April 21, 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 as below....

Typescript Polymorphism with examples

April 21, 2022 ·  3 min read

In this post, learn the basic guide to the Polymorphism concept in typescript. 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 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

April 21, 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

April 21, 2022 ·  2 min read

In this blog post, learn the Singleton pattern in Typescript with examples. 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 with Property,method,Constructor

April 21, 2022 ·  2 min read

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

Typescript String - Complete tutorials with examples

April 21, 2022 ·  3 min read

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 var cloudVariableName= new string('CloudHadoop'); let newStringExample= '123'; a string is one of datatype in typescript....

Typescript tutorials Hello World demo application examples

April 21, 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 the 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....

Understanding typescript latest features - examples

April 21, 2022 ·  3 min read

Latest Typescript update Typescript 4.8.3 arrived and released in September 2022. A latest typescript version 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 with 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....

Typescript typeof, instanceOf operator examples

April 1, 2022 ·  3 min read

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. var msg = "Cloudhadoop"; console.log(typeof msg); // returns string as string format var variableNumber =16; console....