Learn free angular tutorials

Angular 12 Services complete tutorial with examples

September 7, 2021 ·  6 min read

This tutorial talks about complete details about Angular services with examples. In Angular Application, Components get the data from API which hit mysql database and displays on browser API. So we have to write a code to consume API code in component. Suppose multiple components using same API, that means we have to write the same API consume code in all components. Suppose, If any change in API consume logic, We have to change in multiple places....

5 ways to run a single test spec file in Angular app

August 26, 2021 ·  3 min read

In this tutorial, You learn different ways to run single test component file in angular application. This also includes running single spec file from jasmine and mocha with karma runner. Usually, Angular application created with cli has a test.js file located in src folder This file contains below line of code which configures to include test files while running ng test or ng t command. const context = require.context('./', true, /\....

4 ways to skip a test case execution in angular

August 25, 2021 ·  2 min read

In this tutorial, You learn different ways to skip spec.ts file or test case execution in angular application. This also includes exclude single or group of spec file from jasmine and mocha with karma runner In my previous post, You learned different ways to [run a one spec.ts test case](/angular-run-single-testfile) in Angular app. By default, an Angular application has a test.js file located in src folder This file contains below line of code which configures to include test files while running ng test or ng t command....

Different ways to convert any type to objects in Angular example

August 4, 2021 ·  2 min read

In this post, We are going to convert or cast any type in typescript to object with examples in Angular. This tutorials covers an following things How to change variable type in typescript Convert any type to string or number in Angular Parse any type to Interface or classin Angular In typescript, There is no type casting,but we have type assertions. So There are two approaches to cast any object to different data types....

Angular 12 How to write media queries in component styles?

August 2, 2021 ·  2 min read

This is an short tutorial on how to write a media queries in Angular style components as well as style tag. Media queries in Angular components allows to get following benefits Responsive web design Mobile first UX design Media queries in CSS helps to target the styles certain sizes - desktop,mobile, Tablet and hug sizes. Media queries need to write a different breakpoints for each device resolution Size of the different devices...

Typescript nullable type with examples

July 28, 2021 ·  4 min read

In this tutorial, We are going to discuss about following things with examples How to define type that can be string or null? How to assign null to variable? typescript nullable return type How to assign interface with null type In typescript applications, dealing with nullable types is important step for avoid runtime problems. How to declare assign nullable types with strictNullCheck in typescript? Typescript is static typed version of javascript, So strictNullCheck configuration in tsconfig....

Primeng data table Filtering Sorting Paging | Angular p-table examples

July 27, 2021 ·  7 min read

In this blog post, We are going learn the Primeng Angular 12 Data table example with tutorials. Contents Primeng data table Primeng data table features Generate Angular Application with CLI Angular CLI Project Structure Integrate primeng npm in Angular  angular.json style configurations  Primeng Data Table Simple Example  Template html changes primeng dynamic columns with ngFor loop primeng datatable Sort column ascending primeng table Pagination example  p-table issues Module not found: Error: Can’t resolve ‘@angular/cdk/scrolling Primeng is an Angular open-source framework for a collection of Rich UI libraries....

Learn Angular 12 version released and features

July 26, 2021 ·  3 min read

Angular 12 version is released on May 26 2021 by Google Let’s see the features of latest angular release How to upgrade existing application to Angular 12 if your application is using angular 11, Please use below command to upgrade angular 12 npm install @angular/core@12 @angular/cli@12 Angular 12 new features View engine is deprecated Nullish Coalescing operators syntax are introduced in Angular templates Styles Improvements Webpack5 support IE11 Support Deprecated Updated TypeScript support to version 4....

Angular - Input Placeholder examples

July 20, 2021 ·  3 min read

Input place holder is an html5 to describe about input control. This blog talks about placeholder usage in Angular form input elements Basic Input place holder example in Angular Conditional Placeholder example Pipe placeholder in Angular All these examples works in all angular versions - 9,10,11 and latest You can check my previous available post: Input placeholder styles in html React input placeholder examples Dynamic placeholder binding in Angular component....

How to pass multiple arguments to Angular pipe

July 18, 2021 ·  3 min read

In this tutorial, You learn how to pass multiple arguments in pipe in Angular pipe Usually pipe accepts single arguments, Multiple arguments can be passed to pipe with delimiter : separation. Suppose we have a employee data coming from REST API and wants to display the data in database table. We have to declare an model class for holding employee information. Let’s declare employee model class Employee.ts export class Employee { id: Number; name: string; firstName: string; middleName: string; lastName: string; salary: Number; salutation: string; } We want to display full name with - Salutation firstName middleName lastName in one of column in html table....

How to create angular model class or interface in Angular?

July 17, 2021 ·  4 min read

In this post, This post covers an step by step tutorial in Angular How to create a model class in angular application using cli or manually? How to generate a model interface in typescript application using cli or manually? When to use class or interfaces for models in Angular applications? Initialize model class with array of objects in typescript Display model classes data in angular template file Angular is front end UI framework which holds the information from browser and send it to Database....

How to use ngIf and ngFor together for same html element in Angular

July 17, 2021 ·  3 min read

This is an short tutorial about an issue when ngFor and NgIf directives together used in html element Can’t have multiple template bindings on one element. Use only one attribute prefixed with *ngFor and *ngIf on same element producing error ngswitch and ngif together in a single html element As per Angular documentation, ngif and ngfor directives are not used in a single element For example, If both these directives used in a single element it throws an error Can't have multiple template bindings on one element...

How to detect @input() bindings changes in Angular?

July 16, 2021 ·  2 min read

This is an short tutorial on how to detect when an @input changes @input is an angular decorator that help us for property binding for an input. So input name implies that it is an input data passed to component. @input adds metadata to angular component for property binding and allows to add it to DOM element. @input directive used in following things Passing data from child to parent or vice verse Passing data as input to component @input is an directive from @angular/core module, So you have to import to use in Angular component....

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

July 15, 2021 ·  2 min read

s Let’s create an employee model export class Employee { id: Number; name: string; salary: Number; } Angular ngFor Index syntax and example *ngFor is an short hand form for ngForOf directive This can be used to iterate an array of objects or objects. Here is an ngFor syntax This can be applied to any html element objectarray - array of object object - typescript object or model class there are different local variables we can use...

Angular Pipe Json examples | pretty format code

July 14, 2021 ·  4 min read

This is an short tutorial about angular pipe json examples How to print json object in Angular component Angular has inbuilt pipe called jsonPipe from @angular/common module. This will be useful to convert an typescript object into JSON format type. This will be useful to debug and manipulate object data. Here is syntax in html template {{object|json}} How do you print an object without json pipe in Angular? Let’s declare an Employee....

How to check null or empty or undefined in Angular?

July 13, 2021 ·  2 min read

null checking is an common validation that every developer need to know. In this tutorial, We are going to discuss about how to check an null or empty or undefined check in Angular. Angular uses Typescript as programming language, Since typescript is strongly typed so We are going to discuss multiple ways to check null We are going to discuss about 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 object is null or undefined Angular ngIf null check How to check an variable string is empty or undefine or null in Angular This example check an variable of type string or object checks...

Angular Button Click Event examples - Binding Event

July 10, 2021 ·  3 min read

In this blog post, We are going to How to add button click event and on Clicking submit button, How to get value from input with an example Contents Angular Button Click Event binding angular button onclick function example How to get Input text value on button click event example  Conclusion Angular Button Click Event binding Usually, In any angular applications, User clicks on the button for two reasons, One, submit the form and another, navigation from one page to other ....

Angular Checkbox tutorials with latest examples

July 10, 2021 ·  4 min read

This tutorials explains about checkbox tutorials with examples for following two way binding example Dynamic Checkbox list Get 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 checkbox value using 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?

July 10, 2021 ·  3 min read

In this blog post, you’ll learn the Angular Button disable for form invalid Form invalid form validation After click 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 a application using angular cli, This post do not covers the creation of application creation from scratch....

Angular tutorial - ngIf then else examples

July 8, 2021 ·  5 min read

ngIf is a directive used to hide and show the html elements of a DOM tree. It acts as like a if conditional expression in programming language like java or javascript. This post convers the following things 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 compare dates in Angular | Momentjs example

July 5, 2021 ·  3 min read

This is an short tutorial on Compare two date objects in Angular How do you create Date object in Angular How to compare two dates in Angular Compare two dates without time in Angular Let’s see Date object how do you create in How do you create Date object in Angular Date object can be defined in Angular like javascript object Date object can be created in Angular component as seen below...

Typescript Convert String/Number to Enum example

June 25, 2021 ·  2 min read

enum contains strings and number properties, Converting from String/number to enum is not automatic and no built in method. 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 Lets declare Month enum constants holds properties of strings only....

Angular 12 Setup Mock API and consume and return data

June 24, 2021 ·  7 min read

In this post, You will learn how to create a Simple mock api to return json data in Angular application without creating backend API Some times, We want to test data components using API code, if there is no backendcode, This tutorials explains about How to create a Backend REST API for mock data which returns json object in Angular application First Create a angular application First check angular cli or not using ng -version...

Best 5 ways to iterate enum in typescript with examples?

June 22, 2021 ·  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 the examples for looping the Enum string or 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 >}} Iterate key and values using Object Inbuilt methods An enum is also an object in Javascript....

How to find length of enum data in typescript

June 22, 2021 ·  2 min read

Enum is inbuilt in data type used to store multiple contents in a single namespace. Sometimes, As a developer need to find number of 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 in method to find out the size of properties of an enum....

6 ways to get input text value in Angular|Typescript

June 21, 2021 ·  6 min read

In Angular application, Form is an basic UI element displayed on browser page to accept user information. Form contains multiple html input elements to take input from the user. button allows the user to submit the from to backend API an d it calls click binding event. In Angular, View is html template and controller is an typescript component. Reading input text is basic concept every Angular developer need to know....

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

June 20, 2021 ·  4 min read

During development, data comes from 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. This post talks about different ways of converting json to interface Contents How to Convert json to Object or interface Implicit interface conversion Explicit Interface conversion  Nested JSON object interface mapping Summary We are going to learn various ways of converting JSON objects to Interface/class....

Angular Material expansion panel | mat-expansion-panel code

June 15, 2021 ·  4 min read

In this tutorials, You will learn material expansion implementation in angular application using material library. Expansion panel is an interactive UI component rendered either collapsed or expanded state. The expansion panel can be triggered using mouse click or keyboard interactions Angular material expansion panel provides different components Contents import MatExpansionModule into angular application root module Basic Angular material expansion component example adding material list to Expansion panel dynamic angular material expansion panel example Display expansion panel Open By default expansion panel toggle in angular Button click toggle expansion panel import MatExpansionModule into angular application root module angular material provides expansion panel to view the content in expanded view of an panel....

Prime Icons list | primeng primeReact,PrimeVue icons list

June 14, 2021 ·  7 min read

Contents primeicons tutorials font style -size and color animations Install primeng icons using npm Configure prime related css Import css in style.class configure CSS files in angular.json link css in index.html pi-icons categories list pi-icon category list file pi-icon List Category-audio video primeng icons not showing in angular applications How to add a prime icon to a button primeicons tutorials pi pi-icon attribute used to display primeicons on the web applications....

Angular cli - how to disable auto reload when ng serve

June 14, 2021 ·  3 min read

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

Learn Primeng Angular ListBox |p-listbox examples

June 14, 2021 ·  4 min read

ListBox is a graphical user component that displays a list of elements from which the user can select multiple elements at once. The ListBox can also show optional checkboxes Create an Angular application from Scratch First create an angular application from scratch using angular cli command. And integrate primeng libraries to Angular application if you are not sure how to do it, You can check below things. Primeng Angular components How to add primeng to Angular application Once primeng is installed into application, and application is ready to run....

Primeng Progressbar tutorial| p-progressbar example

June 14, 2021 ·  3 min read

In this blog post, We are going to learn Primeng Angular Progressbar tutorials with example. Primeng is Rich UI library for providing rich ui components of an Angular framework. It Provides progress bar UI Component. Angular Progressbar Component example  progressbar is a UI component is used to indicate the progressive state of an event or action. This will be shown to the user about status during the upload of a file to a server....

Primeng toast example | Angular Popup component

June 14, 2021 ·  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 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....

D3 Integration with Angular 12 Tutorial|Line Charts Example

June 13, 2021 ·  5 min read

In this posts, We are going to learn how to integrate D3js framework with angular/typescript technologies and display simple line chart using static data. D3JS is a data drive document opensource javascript library for representing data in the visualized graphs. Angular 12 is a front-end framework using component based typescript language . ** Prerequisite** Typescript 4.x Angular 12.0 Npm - 7.11.0 Nodejs - v14.17.0 Angular cli 12.0.x D3 - 6....

How to Convert Number to/from String in typescript?

June 13, 2021 ·  5 min read

Did you face the situation where you want to parse number to string or string to number in typescript?. During the development of angular/typescript based projects, I got many situations that are 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 map array to another array in typescript example

June 13, 2021 ·  3 min read

This is an short tutorial on 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 other array of objects. Some times, We have a original array returned from API, We want to display the only part of an array This examples works in Typescript and javascript. How to map array of strings into array....

Primeng Autocomplete Angular tutorial with examples

June 13, 2021 ·  4 min read

In this blog post, We are going to learn Implement Autocomplete feature of Primeng in Angular with an example. Angular Autocomplete Component  Autocomplete is a User interface feature and it contains an Input text box and allows the developer to type text, and application search and display the matched words results for typed characters and give complete word prediction list. This is helpfull for User to search and select instead of typing in text box....

Angular 12 WYSIWYG HTML Rich Text Editor | Quill Editor

June 12, 2021 ·  4 min read

In this blog post, We are going to learn How to integrate ngx-quill in Angular 11/12 version. ngx-quill is a popular npm library provides rich WYSIWYG editor. What is WYSIWYG Editor? It is abbreviated as What You See Is What You Get. It is a UI component used to create/design documents online, you can see the output of the document online. This enables the developer to not write a code for layout and only focus on actual content....

Complete Angular UI library |Primeng Components

June 12, 2021 ·  3 min read

Primeng is a popular Angular Framework UI library. This was created by the Primefaces team at Primetek company. Primetek has created rich UI libraries for a different language. Primefaces is a java library for JSF UI reusable components. PrimeUI HTML5 JQuery UI framework Primeng UI library is based on typescript language for Angular framework. PrimeReact is an Complete UI component library for ReactJs. PrimeVue is an UI component toolkit for Vuejs....

How to declare static constants in Typescript and Angular

June 12, 2021 ·  3 min read

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

Primeng Angular Accordion tutorial |p-accordion examples

June 12, 2021 ·  4 min read

In this tutorial, We are going to learn Primeng Angular accordion basics with examples. Angular Accordion Introduction Accordion is UI element that shows/hide the content section on the page on user click for a group of items. Primeng also provide Angular accordion component Usually, the accordion is used to show the long summary content where it will not fit into the page and divide and group content under the tabs of an Accordion....

Angular 12 material divider tutorial| mat-divider examples

June 11, 2021 ·  3 min read

Divider is UI elements to separate the UI components with thin line horizontally or vertically. These helps organize and grouping the elements in layouts of an page. Angular material provides divider components in a separate module MatDividerModule. if you are using angular 5 version, You have to MatListModule as divider is part of MatListModule. This application uses Angular 12 version, So MatDividerModule module needs to configure. First install angular material depedencies using below command....

Angular 12 Semantic UI Tutorial for beginners with examples

June 11, 2021 ·  3 min read

In this blog Tutorial, We are going to learn Integration of Semantic UI in Angular Application with examples. You can check my previous post primeng angular tutorial primeng angular example What is Semantic UI framework ? Semantic UI is UI library for build and develop responsive HTML websites fastly. It is like the bootstrap framework and has builtin UI components. Features Support for any screen of size It provides more than 20 plus themes Can be used as Independent HTML/CSS files or NPM package manager Inbuilt Beautiful UX design and provides various Inbuilt components Support Angular2/4/5/6/7/9/10/11/12/13 versions....

Angular LocalStorage, SessionStorage example

June 11, 2021 ·  3 min read

Localstorage in Angular In this tutorial, we are going to learn following things Localstorage in Angular SessionStorage in Angular Ngx-webstorage angular You can check my previous post on Html5 web storage APIs with examples. LocalStroage is browser storage mechanism to store an data Data is stored with key and value pairs Ngx-webstorage library Introduction This provides wrapper classes for managing LocalStorage and SessionStorage objects from Angular 2 Applications. When your applications need access to web storage API, You can directly call those API’s as these are inbuilt support in HTML5....

How to generate GUID in Angular 12| UUID example

June 11, 2021 ·  2 min read

In this blog post, We are going to learn how to generate Unique ID - GUID, UUID in Angular with examples. Please see my previous posts on GUID with examples javascript UUID example how to generate GUID in java React GUID generate Vuejs GUID Example Angular Typescript UUID Unique Identifier generation is requirement in any programming language. It contains 128 bits in size separated by hyphen with 5 groups....

How to integrate sweetalert2 in Angular application|popup notification

June 11, 2021 ·  5 min read

In this tutorials, You learn step by step tutorials how to add popup alerts using sweetalert in Angular4/5/6/7/8/9/10 Versions. To integrate into Angular applications, you need to learn following npm libraries into Angular applications sweetalert2 is JavaScript library used to display nice popup window in NodeJS applications. @sweetalert2/ngx-sweetalert2 is the npm library that supports Angular 8,9 and 10 Versions @sweetalert2/ngx-sweetalert2 is an npm library which is a wrapper on top of sweetalert2 that allows to easily integrate into angular 4, 5, 6 and 7 based applications....

Multiple ways to know typescript version in Angular 12/13

June 11, 2021 ·  3 min read

This tutorials covers an how to find typescript version in Angular framework. Angular is based on typescript. Typescript is popular programming langugage from Microsoft. It is an extended javascript with typing and oops support {{ toc }} How to find typescript version in Angular 12 project. Angular uses typescript as language for writing a components. As a developer we need to know the typescript versions, if you install incompatable typescript version in angular applicaiton, you will get an following error....

Fix for Property has no initializer and is not definitely assigned in the constructor

June 9, 2021 ·  2 min read

This post talks about different ways to solve below error in Angular and typescript error TS2564: Property ‘selectedRoles’ has no initializer and is not definitely assigned in the constructor. For example, In Angular component import { Component, OnInit } from '@angular/core'; import Role from '../model/Role'; @Component({ selector: 'app-listbox-checkbox', templateUrl: './listbox-checkbox.component.html', styleUrls: ['./listbox-checkbox.component.scss'] }) export class ListboxCheckboxComponent implements OnInit { title = "Primeng listbox checkbox example" roles: Role[]; selectedRoles: any[]; constructor() { this....

Angular 12 nullish coalescing operator

June 2, 2021 ·  2 min read

nullish coalescing operator is logical operator introduced in latest javascript i.e EcmaScript 2020. This post covers what is nullish coalescing operator in javascript/typescript and how it is used in Angular 12 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 an parameter coalescing is of combining two values Here is an syntax...

Semantic UI Angular Modal | ng2-semantic-ui modal example

June 1, 2021 ·  3 min read

In this blog post, We are going to learn Angular Modal Example with Semantic UI Library Angular Semantic UI modal Every UI library provides Different UI components. In the same way, Semantic UI provides different UI components including a Modal window. Modal is a window or popup which blocks the main page and and display popup view where this view contains content displayed or accepts inputs from user. Modal can be integrated on any page of the web application....

How to Integrate lodash in Angular and typescript application

June 1, 2021 ·  2 min read

As we already discussed lodash library in my previous article. This article covers steps to integrate into an Angular application. We need certain steps to integrate third-party libraries into Angular applications. with this, You are able to use utility functions in angular projects. I am going to explain about the existing application which is generated an application using angular cli code generator tool. The below steps will work on all Angula 10/11/12 versions....

Angular raw html binding |innerHtml example

April 23, 2021 ·  3 min read

This tutorials solves the below problems in html binding Angular application How to do string raw html binding in Angular? Render html strings with html tags How innerHtml attribute in Angular works? 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 below syntax...

Angular material progress bar | mat-progress-bar example

April 16, 2021 ·  4 min read

In this blog post, We are going to learn Angular material progress bar with example progress bar ui element Progress bar is an interactive UI element to show the progress of an operations, For example, You need to show status in graphical form during downloading,uploading and copying a file. There are different types of progress bar determinate progress bar - progress bar is shown in known progress of an operation, For example 3 minutes indeterminate progress bar - The time taken to take a operation is not known at displaying progress bar....

How to declare array of objects in Angular|typescript

April 15, 2021 ·  3 min read

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

Angular Material list | Best five mat-list and item examples

April 14, 2021 ·  3 min read

This post covers Angular material list tutorial and examples. The Angular material list is a container element for UI elements that have been displayed inside it. Following UI components can also be wrapped with it. Cards Checkbox Basic Material List UI component contains followings List container is an required parent container for holding group of elements or list items listitem contains list item as a child element In this blog post, List out the various examples of usage of material list using angular material....

Angular Material chips tutorials | mat-chip-list example

April 13, 2021 ·  3 min read

Angular material chips are used to display group of tags in single element as a chips for a blog posts. These can be used in the following cases Input chips used to represent type of entered information filter chips used to filter the group of data, example is an category or tags of an blog post content Basic Chip UI component contains followings Chip container - It is an required parent container for holding group of elements or chips image - It is an optional thumbnail image of an Chips to display the type of chips string - Name of the chip, examples are tags, delete icon - Optional close icon to close the chip....

Fix The Angular Compiler requires TypeScript versions

April 2, 2021 ·  2 min read

This post is an solution for how to fix an angular application upgrade error “Error: The Angular Compiler requires TypeScript >=4.0.1 and 4.1.7 but 4.2.0 was found instead.” This error occurs while migrating an application from Angular 9 to Angular 10 or Angular 10 to 11 versions. This error occurred after my application was upgraded from Angular 10 to Angular 11 with ng update command What exactly does this error indicate?...

How to reload a page/component in Angular?

March 16, 2021 ·  3 min read

This tutorial discusses two methods for achieving reload/refresh in an angular framework. One is to use window.reload to reload entire page, and the other is to use onSameUrlNavigation-reload refresh component with an angle router. Some times, As a developer, you need to write a logic to reload a component or a page for a below cases Refresh a component on a button click Reload a component data on delete In Angular, page navigation can be done with or without angular router module...

Angular material Snackbar tutorials | mat-snackbar examples

March 3, 2021 ·  7 min read

Contents What is snackbar UI component? Angular Snackbar Configuration Import MatSnackBarModule into angular application Simple Basic component Notification message Action button with a message Duration Snackbar Position panelClass custom css styles - color,font Passing data with openFromComponent method Stackblitz complete example What is snackbar UI component? Snackbar is an important UI element in designing frontend applications.It is a small popup window, displays reactive information messages to accept user input from a user....

Angular upload file with primeng | p-fileUpload example

February 20, 2021 ·  5 min read

primeng is Rich UI component library for angular framework, It provides lot of reusable components like buttons, input controls, data tables and File upload. This blog explains about integration of Primeng in latest Angular versions and upload button with examples. It also explains about how to hide/show primeng upload buttons . Create a new application First, Let’s create a new application angular-upload using angular cli tool, ie ng command. Next check ng command is installed or not...

Angular Input numeric validation | Typescript

February 1, 2021 ·  5 min read

numeric in form are basic level of validation in Angular application. Input form type=text/number only allows numeric fields and other alphabets and special characters are not allowed. In Html numbers are entered via input form with input type=text in HTML4 or less, type=number in HTML5 language In this Angular tutorial, I am going to explains about input type numeric validation with different ways. Angular offer multiple below ways to handle numeric form validation....

What not to commit in Angular| Ignore files in git example

January 21, 2021 ·  3 min read

In this blog post, We are going to learn the files not to commit for the angular project. what is .gitignore file .gitignore is an plain text file that contains list of files/folders paths, that means, these files are not committed to repositories while committing a projects. These file is placed in root of repository. However, you can define in any subfolder of your application. This can be modified/created with any editor - vscode, sublime, atom or any plain editor....

Primeng Angular Tutorial with Example

January 20, 2021 ·  5 min read

In my previous article, we covered the basics of primeng UI library In this article, we are going to learn how to set up an angular project with primeng using angular cli. Importantly, This tutorial works on all latest Angular versions include 10,11,12 Learn Angular with primeng components. Angular Cli is a tool to generate an angular project from scratch. It is a code generator for the folder structure of the angular project....

How to add Google Fonts into Angular application?

January 6, 2021 ·  4 min read

In this post, You will learn Multiple ways of integrating google font into angular applications. Google font is an popular font library provided by Google, It provides popular fonts which every application used. Other versions available: ReactJS Integrate google fonts Add google font in vuejs application Google font provides following popular fonts Roboto Open Sans Source Sans Pro Oswald Montserrat This post talks about adding roboto fonts in Angular project, The process for other fonts is same....

How to URL pattern validation in Angular | Typescript

January 5, 2021 ·  4 min read

In this short tutorial, You will learn about how to do url validation in Angular and typescript application with input form. This tutorials works all angular versions 2,5,6 8,9,10,11 versions Other versions available: VueJS Input type url validation ReactJS Input type url validation Url pattern validation can be implement with multiple approaches Contents URL pattern validation example with reactive forms Angular html5 input type url pattern validation Typescript url regexp validation Conclusion URL pattern validation example with reactive forms First, in application html template component created to display the input form and do the following steps...

Angular blur event tutorial with examples

January 4, 2021 ·  4 min read

In this tutorial, We will learn how to use input onBlur event in Angular First, what is onBlur event? where this being used in Angular? onBlur is an javascript event , fired when input element lost its focus. This will be applied to following input form elements text textarea checkbox readio button label Other versions available: React onBlur event guide example Vue js Blur event example This will be very helpful while doing form validations....

Angular Titlecase Pipe | Convert string in typescript

January 3, 2021 ·  2 min read

This tutorial covers the implement titlecase pipe example in Angular. Angular titlecase what is a titlecase for a string?. titlecase for a statements is to capitalize the first letter of all major words and remaining letters of the words are lowercase. Title case for a strings can be applied in the following ways heading blog title essay heading news headings Simple example for a string is angular framework and output is Angular Framework titlecase pipe Syntax Angular pipe is an custom code which accepts input, transform it and output data....

Angular - How to add Read more/less button/link with example

December 31, 2020 ·  3 min read

In this tutorial, we are going to explain about read more or less link in Angular with example. This is sample example read more button or link with Angular9/10/11 version When you have long text paragraph displayed on html page, you need to truncate the paragraph with read more/less link Multiple ways of long text can be truncated with height or limiting the text For example, if you have long text displayed as shown below...

How to convert number to words in Angular|Typescript example

December 28, 2020 ·  3 min read

This post covers about converting an digit to words in Angular applications, For example, giving 123 is the input, output is one two three. There are multiple ways, we can convert number to strings. Using number-to-words npm package custom solution using logic. This blog covers number-to-words usage of npm package in Angular application. Prerequisite Angular cli installation Typescript node and npm Install Angular cli version First, please make sure that ng --version command is working by issuing –version option in command....

How to Convert Array to string,comma,hyphen in javascript

May 2, 2020 ·  2 min read

Contents javascript convert Array to string Using array map with join method Using toString method Convert object array to String in angular During application development, a list of records data retrieved from REST API is in the form of an Array of records in javascript. let assume Permissions REST API returns the list of permissions for user in an application for example following are array of permissions returned from API,...

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

April 30, 2020 ·  3 min read

Angular is the front end MVC framework, It communicates with the server via JSON format. There are cases you need to send/consume the JSON object from angular application to REST API. Angular uses a typescript object which is a superset of javascript, which always needs to convert to/from object to JSON. This work will cover you different ways to convert JSON to Object or object to json in angular. This is also a popular interview question asked in angular/typescript based jobs....

How to remove duplicate object from array typescript

April 29, 2020 ·  3 min read

The below examples takes an input array of objects or primitive types in an array, delete the duplicate items from an array, return the new array without duplicates. if an array contains primitive types, it is very easy to filter Duplicates if an array contains objects, We need to filter the duplicates based on key and value pair equal validation. Removing duplicates is a developer’s daily task in application development....

Javascript tutorials - In operator examples

April 26, 2020 ·  3 min read

In operator is inbuilt operator provided in javascript language, This covers the usage of In operator in the following cases Contents Javascript In operator syntax Check valid index exists in an array using in operators Check property of an object in Javascript In operator enum Usage Check string exists in Enum typescript or Javascript Iterate Enum data Javascript In operator in operator in javascript used to find the property presents in an object....

How to populate enum data in dropdown in angular material

April 25, 2020 ·  2 min read

We need to populate Enum values populated in the Select/dropdown of an angular application. 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 you about how to populate enum string or numbers in HTML select of an angular application Angular material dropdown with enum datatype Html select with Enum values Angular Material dropdown based on enum values Install angular material npm in your applicaiton as described package....

3 ways to convert timestamp string to Date format typescript

April 17, 2020 ·  2 min read

In this blog article, you’ll learn ways to convert timestamp to Date format. convert timestamp string to Date timestamp is a unix format used to holds date and time and It is 10 digit number. How to get the timestamp in Javascript let currentDate=new Date(); // 2020-04-17T17:19:19.831Z console.log(currentDate.getTime()) //1587143959831 So timestamp is long number in seconds from 1970 JANUARY 1 utc format. Date object in javascripts holds Date and time format....

How to display images in hugo

April 13, 2020 ·  1 min read

There are multiple ways we can insert images in hugo posts. Hugo posts are in different Hugo posts are written in markdown files. These are plain text content with special syntax. Adding image to markdown files in hugo Here is an syntax for Adding images to posts in Hugo  Using Figure short code Syntax figure is an inbuilt short codes provided by hugo static generator syntax if we want full control how we want to displays We can write a shortcode for image displays...

Angular Anchor click event tutorials & Examples

January 1, 0001 ·  4 min read

In this blog post, we are going to learn how to bind the click event to the anchor tag. Anchor bind tag click event example  In Angular applications, We have anchor tags used for following places Navigate to a different pages Navigate to a div or sections of page, for example, top,bottom, specific div Add/remove HTML elements dynamically In non Angular applications, We have a href tag to navigate to other pages....

Angular,How to Format array of dates in typescript example

January 1, 0001 ·  3 min read

In this post, You will learn how to format array of object with date keys in Angular application. Some times, You will get the data from backend, hold this data in Array of objects with date properties, So you want to format the date field and display to this user. In this example, Following array of object is declared with createdDate date field. This is declared in Typescript file, but in real time, The object is returned from Service....