{"@attributes":{"version":"2.0"},"channel":{"title":"Angular on Angular Wiki","link":"https:\/\/www.angularjswiki.com\/angular\/","description":"Recent content in Angular on Angular Wiki","generator":"Hugo -- gohugo.io","language":"en","copyright":"©{year}","lastBuildDate":"Sat, 19 Oct 2019 11:31:11 +0530","item":[{"title":"A Definitive Guide on How to configure SSL locally in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-configure-ssl-locally-in-angular\/","pubDate":"Fri, 28 Jul 2023 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-configure-ssl-locally-in-angular\/","description":"Angular is a popular name for frontend frameworks.\nYou can create dynamic and single-page web apps through a structured framework.\nIt offers an organized code and features like two-way data binding, dependency injection, and component-based architecture.\nHowever, the security of Angular applications is a significant concern for organizations.\nAngular’s security features are enough to prevent client-side vulnerabilities like, cross-site scripting (XSS), open redirects, malicious injections, and more.\nHowever, on the server side, it also Angular does provide the capability to generate static pages."},{"title":"How to change mat-icon size in Angular Material","link":"https:\/\/www.angularjswiki.com\/angular\/change-mat-icon-size-angular-material\/","pubDate":"Tue, 21 Feb 2023 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/change-mat-icon-size-angular-material\/","description":"To change mat-icon size in Angular Material follow the below steps.\nGive a common class name for the material icons i.e., mat-icon. For instance class="mat-icon-size". Add height and width CSS to the mat-icon class. Add font-size to the mat-icon class. Let’s go through an example to understand it further.\nTo display home icon in material icons we use fontIcon name as home.\n<mat-icon aria-hidden="false" aria-label="home icon" fontIcon="home" ><\/mat-icon> The default Angular mat-icon size is 24px."},{"title":"Error: This command is not available when running the Angular CLI outside a workspace in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/error-this-command-is-not-available-when-running-the-angular-cli-outside-a-workspace\/","pubDate":"Tue, 14 Feb 2023 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/error-this-command-is-not-available-when-running-the-angular-cli-outside-a-workspace\/","description":"If you are new to Angular application development and if you run ng serve command out side of your Angular root directory you will get Error: This command is not available when running the Angular CLI outside a workspace error.\nFor example let’s create an new Angular application inside a folder called Angular Applications.\nOpen your command prompt or terminal and run ng new command to create the new Angular application."},{"title":"from origin 'http:\/\/localhost:4200' has been blocked by CORS policy Angular error Fix","link":"https:\/\/www.angularjswiki.com\/angular\/origin-http-localhost4200-has-been-blocked-by-cors-policy-in-angular-error\/","pubDate":"Tue, 14 Feb 2023 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/origin-http-localhost4200-has-been-blocked-by-cors-policy-in-angular-error\/","description":"If you try to access cross domain back end API from the Angular application you might get from origin 'http:\/\/localhost:4200' has been blocked by CORS policy error.\nAccess to XMLHttpRequest at '<url>' from origin 'http:\/\/localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. There are three ways to fix from origin 'http:\/\/localhost:4200' has been blocked by CORS policy error in Angular applications."},{"title":"How to Run Angular commands (ng command) in Windows Powershell","link":"https:\/\/www.angularjswiki.com\/angular\/run-angular-commands-in-powershell\/","pubDate":"Wed, 08 Feb 2023 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/run-angular-commands-in-powershell\/","description":"By default after installing Angular CLI in windows systems, ng commands will not work in powershell.\nIf you try to run Angular CLI commands i.e., ng commands in windows powershell you might get following error.\nng : File C:\\Users\\<username>\\AppData\\Roaming\\npm\\ng.ps1 cannot be loaded. The file C:\\Users\\<username>\\AppData\\Roaming\\npm\\ng.ps1 is not digitally signed. You cannot run this script on the current system. For more information about running scripts and setting execution policy, see about_Execution_Policies at https:\/go."},{"title":"WARNING in budgets, maximum exceeded for initial Angular error fix","link":"https:\/\/www.angularjswiki.com\/angular\/warning-in-budgets-maximum-exceeded-for-initial-angular-error\/","pubDate":"Wed, 08 Feb 2023 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/warning-in-budgets-maximum-exceeded-for-initial-angular-error\/","description":"If your Angular Application bundle size exceed certain limit, you might get WARNING in budgets, maximum exceeded for initial error.\nAs Angular applications grow in functionality, they also grow in size.\nAngular CLI gives us the ability to set size thresholds in the configuration file i.e., angular.json file, so that our application size stay within the defined boundaries.\nWe can define your size boundaries in the CLI configuration file, angular.json, in a budgets section for each configured environment."},{"title":"Object is possibly 'null' error fix in Angular reactive form validation","link":"https:\/\/www.angularjswiki.com\/angular\/object-is-possibly-null-error-fix\/","pubDate":"Tue, 06 Dec 2022 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/object-is-possibly-null-error-fix\/","description":"If you are using latest versions of Angular i.e, Angular v10 above, you might be getting Object is possibly ‘null’ error in Angular reactive from validations.\nEspecially when accessing errors property of `formControl you might get this Object is possibly 'null' error.\n<span class="text-danger" *ngIf=" profileForm.get('firstName').errors && profileForm.get('firstName').hasError('required') " >* Required<\/span > Table of Contents What is Object is possibly ‘null’ error? Three ways to Fix Object is possibly ‘null’ error Solution 1: Disable strict mode."},{"title":"Directive composition API in Angular 15","link":"https:\/\/www.angularjswiki.com\/angular\/directive-composition-api-in-angular-15\/","pubDate":"Mon, 17 Oct 2022 00:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/directive-composition-api-in-angular-15\/","description":"Angular team introduced a new feature called “Directive composition API” in Angular 15 Version.\nIt’s one of the most requested feature from the Angular community since 2016. (From Angular 2 onwards)\nTable of Contents Directive composition API example Directive Composition API inside directives Chain of Host Directives Real use cases Github Source code Directive composition API example Let’s understand what is this directive composition in Angular."},{"title":"mat-radio-button default checked in Angular mat-radio-group","link":"https:\/\/www.angularjswiki.com\/angular\/mat-radio-button-default-checked\/","pubDate":"Mon, 10 Oct 2022 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/mat-radio-button-default-checked\/","description":"To check mat-radio-button by default in Angular mat-radio-group, we need to use checked property.\nIn real world Angular applications, mat-radio-button options will come from the server and some times we need to check one option by default.\nThe default mat-radio-button option might be the first option, or some logic based on our business needs.\nFirst we will create an interface which represents mat-radio-button options.\nexport interface Option { name: string; value: number; checked: boolean; } Now lets add some random radio button options."},{"title":"How to Embed YouTube videos in Angular Applications","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-embed-youtube-videos-in-angular-apps\/","pubDate":"Sun, 04 Sep 2022 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-embed-youtube-videos-in-angular-apps\/","description":"In this tutorial we learn how to embed youtube videos in Angular applications using @angular\/youtube-player component.\nTable of Contents What is Angular Youtube Player Component? Steps to embed YouTube Video in Angular applications. Step 1: Install @angular\/youtube-player component package Step 2: Import YouTubePlayerModule in the target module. Step 3: Load the YouTube iframe API Script. Step 4: Get the video id of youtube. Step 5: Render video using <youtube-player> tag."},{"title":"Use NgOptimizedImage to improve image loading performance in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/use-ngoptimizedimage-to-improve-image-loading-performance-in-angular\/","pubDate":"Wed, 31 Aug 2022 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/use-ngoptimizedimage-to-improve-image-loading-performance-in-angular\/","description":"NgOptimizedImage directive helps us to improve image loading speed or performance in Angular applications by following best practices.\nNgOptimizedImage is introduced in Angular 14.2.0 version currently in developer preview mode.\nTable of Contents Steps to improve image loading speed using NgOptimizedImage directive Step 1: Import NgOptimizedImage directive in AppModule Step 2: Replace image src attribute with rawSrc Step 3: Set width and height attributes Step 4: Configure loader of image CDNs Step 5: preconnect image Url Step 6: Serve Responsive images using rawSrcset."},{"title":"How to detect @input value changes in Angular Child Component?","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-detect-input-value-changes-in-angular-child-component\/","pubDate":"Wed, 17 Aug 2022 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-detect-input-value-changes-in-angular-child-component\/","description":"In this tutorial we learn how to detect @input value changes in Angular Child component with simple examples.\nTable of Contents Using @input property Detect @input value changes using ngOnChanges() method Tracking changes using ngOnChanges() method Detect @input value changes using TypeScript set and get Properties on @input() Detecting Changes in arrays and objects @input values Best way to detect @input changes in Angular Stackblitz Demo Using @input property Most of the real world Angular applications will contain parent and child component relations."},{"title":"Unable to resolve dependency tree error in Angular while installing npm packages","link":"https:\/\/www.angularjswiki.com\/angular\/unable-to-resolve-dependency-tree-error-in-angular-while-installing-npm-packages\/","pubDate":"Tue, 16 Aug 2022 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/unable-to-resolve-dependency-tree-error-in-angular-while-installing-npm-packages\/","description":"To fix Unable to resolve dependency tree error in Angular while installing npm packages follow the below steps.\nRun npm install --save --legacy-peer-deps instead of npm install command. Another way is delete node_modules folder and package_lock.json file and then run npm cache clean --force after npm i --force command. Table of Contents Set the --legacy-peer-deps flag to always true Downgrading npm version What is Unable to resolve dependency tree error?"},{"title":"How To align mat-dialog-actions buttons to the right,center or left","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-align-mat-dialog-actions-buttons-right-left-center\/","pubDate":"Mon, 01 Aug 2022 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-align-mat-dialog-actions-buttons-right-left-center\/","description":"To align mat dialog actions buttons to the right center or left we can make use of align attribute.\nHave a look at the below mat dialog example\n<h1 mat-dialog-title>Hello<\/h1> <div mat-dialog-content> Sample content <\/div> <div mat-dialog-actions> <button mat-button mat-dialog-close>No<\/button> <button mat-button mat-dialog-close cdkFocusInitial>Ok<\/button> <\/div> Table of Contents mat dialog actions buttons align right mat dialog actions buttons align center Mat dialog actions align Stackblitz demo By default mat dialog actions buttons aligned to the left corner of the mat dialog popup."},{"title":"Top 5 Tips and Tricks for Coding in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/top-5-tips-and-tricks-for-coding-in-angular\/","pubDate":"Mon, 01 Aug 2022 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/top-5-tips-and-tricks-for-coding-in-angular\/","description":"Users of JavaScript frameworks for web development increase by the day.\nMost Programmers prefer to use Angular to build single-page applications.\nThe Angular framework is one of the most popular JS frameworks for many reasons. The first is that Angular has the tools and design templates to produce efficient apps.\nThese applications are efficient because they can run on any platform.\nThough Angular poses the best, it cannot be easy to follow through if you do not understand how it works."},{"title":"mat-form-field must contain a MatFormFieldControl error fix in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/mat-form-field-must-contain-a-matformfieldcontrol\/","pubDate":"Wed, 01 Jun 2022 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/mat-form-field-must-contain-a-matformfieldcontrol\/","description":"If you are using Angular material modules you might have encountered mat-form-field must contain a MatFormFieldControl error while using MatFormFieldModule.\nThis error occurs when you have missed to add a form field control to your form field.\nTable of Contents what are form field controls? Fixing mat-form-field must contain a MatFormFieldControl error. mat-form-field control input should not contain *ngIf Summary what are form field controls?"},{"title":"Angular 14 version released","link":"https:\/\/www.angularjswiki.com\/angular\/angular-14-release\/","pubDate":"Wed, 18 May 2022 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-14-release\/","description":"On 02-06-2022 ,Google has released Angular v14.\nAngular 14 version is coming.\nAngular 14 is the next major update after, Angular v13 released in November 2021.\nAngular 14 version release date Angular v14 released on 02-06-2022\nAngular team at Google planning to release Angular v14 in coming June. i.e., June 2022.\nThe release candidate 1, i.e., Angular v14.0.0-rc.1 released on 18th May 2022.\nMajor features of Angular 14 Here are the list of Major features in Angular 14."},{"title":"Property '...' has no initializer and is not definitely assigned in the constructor error fix in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/property-has-no-initializer-and-is-not-definitely-assigned-in-the-constructor\/","pubDate":"Wed, 02 Mar 2022 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/property-has-no-initializer-and-is-not-definitely-assigned-in-the-constructor\/","description":"If you are using latest version of Angular application, you might have encountered Property '...' has no initializer and is not definitely assigned in the constructor error, when you declare a variable inside a class or component.\nConsider below example.\nexport class EmpComponent implements OnInit { employees: Employee[]; constructor() { } ngOnInit() { } } It’s because of Strict Class Initialization flag introduced in TypeScript 2.7 version.\nSo If the --strictPropertyInitialization typescript flag is enabled, the compiler checks if each property declared inside a class or angular component"},{"title":"Multiple mat-table in same component with matSort & mat-paginator in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/multiple-mat-tables-in-same-component-with-mat-sort-mat-paginator\/","pubDate":"Sun, 06 Feb 2022 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/multiple-mat-tables-in-same-component-with-mat-sort-mat-paginator\/","description":"Sometimes we need to display more than one mat-table in a same component in Angular.\nThat’s not a problem, we can add multiple mat-table in a single component without any problems, but to add sorting and paginator to the mat-table we need to give unique matSort and mat-paginator template reference variables.\nLet’s go through an example to understand it further.\nWe will take the employee table example\n<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort #empTbSort="matSort" > <\/table> First we should add matSort directive to the mat-table."},{"title":"How to Iterate\/loop map in TypeScript or Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-loop-over-typescript-map-in-angular\/","pubDate":"Sat, 25 Dec 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-loop-over-typescript-map-in-angular\/","description":"In this tutorial, we learn how to iterate over a Map object in TypeScript or Angular.\nMap() object is introduced in ES-6 or ECMA Script 6.\nSo we can use it in TypeScript also.\nA TypeScript Map Object contains key value pairs.\nTypeScript Map() can be very handy incase, if we want to use dictionary of objects in Angular applications.\nThe below Map object contains string keys and boolean values."},{"title":"How To Check Both null or undefined in TypeScript\/Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-check-both-null-or-undefined-in-typescript-or-angular\/","pubDate":"Thu, 16 Dec 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-check-both-null-or-undefined-in-typescript-or-angular\/","description":"While accessing the properties of TypeScript class or interface or objects it’s better to do null or undefined checks.\nThere are different ways we can check both null or undefined in TypeScript or Angular.\nBy using simple if condition. By using TypeScript Nullish Coalescing & Optional chaining. By using Array.include() function. Method 1: Use Simple If Condition TypeScript is super set of JavaScript. So we can simply use if condition to do null or undefined checks."},{"title":"How to Format Date as dd\/MM\/yyyy using Pipes in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-format-date-as-dd-mm-yyyy-using-pipes-in-angular\/","pubDate":"Mon, 13 Dec 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-format-date-as-dd-mm-yyyy-using-pipes-in-angular\/","description":"dd\/MM\/YYYY is the most used date format in the websites.\nAngular Date Pipe used to format the dates according to our needs.\nSteps to format date as dd\/MM\/YYYY in Angular using date pipe.\nDeclare the date variable in the component ts file. In the template HTML file, convert the date using date pipe by passing format argument to it. {{dateddmmyyyy | date: 'dd\/MM\/YYYY' }}<\/h3> The problem with the above approach is, we will display the date in multiple places in our websites."},{"title":"Fixing Could not find module @angular-devkit\/build-angular error in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/could-not-find-module-angular-devkit-build-angular\/","pubDate":"Sat, 11 Dec 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/could-not-find-module-angular-devkit-build-angular\/","description":"If you update your Angular application to newer version you might get Could not find module @angular-devkit\/build-angular error while building or running the application.\nThis package @angular-devkit\/build-angular is introduced in Angular 6.0 as a dev dependency.\nSo if you upgrade your application from older version of Angular to Angular 6 or higher, there is a chance that you will get this error.\nUnfortunately there is no straight way to fix this issue."},{"title":"Angular Interview Questions And Answers","link":"https:\/\/www.angularjswiki.com\/angular\/angular-interview-questions-and-answers\/","pubDate":"Fri, 10 Dec 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-interview-questions-and-answers\/","description":"Here is the list of Angular interview questions and answers, which are likely to be asked during the time of interview.\nYou will be asked questions depending upon your experience.\nThe questions may vary from basics to advanced topics of Angular.\nBefore the interview have a look at the list, it might help you to crack the Angular interview.\nNo list or guide will contain all questions, it is depend upon so many factors such as your work experience, interviewer experience (or some times his\/her mood) and finally some luck factor."},{"title":"How To Add Inline Styles in Angular Components","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-add-inline-styles-in-angular-components\/","pubDate":"Fri, 10 Dec 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-add-inline-styles-in-angular-components\/","description":"If the Angular component is small and CSS usage is limited we can create the component with inline styles.\nWhen we create a component in Angular, by default Angular CLI generates the component with external CSS file.\nCREATE src\/app\/user-style\/user-style.component.html (25 bytes) CREATE src\/app\/user-style\/user-style.component.spec.ts (648 bytes) CREATE src\/app\/user-style\/user-style.component.ts (291 bytes) CREATE src\/app\/user-style\/user-style.component.scss (0 bytes) UPDATE src\/app\/app.module.ts (667 bytes) Table of Contents Adding inline styles in Component Metadata Adding inline styles in component template HTML Summary Adding inline styles in Component Metadata To create the component with inline styles in Angular, pass --inline-style flag to ng generate component command."},{"title":"How to create interface in folder in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-create-interface-in-folder-in-angular\/","pubDate":"Wed, 01 Dec 2021 01:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-create-interface-in-folder-in-angular\/","description":"Steps to create interface in folder in Angular using ng generate interface command.\nOpen terminal in Angular project root directory. Pass interface name along with folder name to the ng generate interface command. >ng generate interface model\/product CREATE src\/app\/model\/product.ts (29 bytes) There are several advantages, when we create interfaces in a separate folder.\nInterfaces considered as models, which represents real world data entities.\nWe can create multiple interfaces in the same folder by passing relative path to the ng generate interface command."},{"title":"How to generate component in subdirectory or specific folder in Angular using ng generate","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-generate-component-in-subfolder-specific-directory\/","pubDate":"Wed, 01 Dec 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-generate-component-in-subfolder-specific-directory\/","description":"We can use ng generate component command to create component in sub-directory or specific folder.\nHere are the steps to generate component in a specific folder in Angular.\nOpen terminal at Angular project root directory. Pass the relative path which contains folder name to the ng generate component command. > ng generate component product\/productlist CREATE src\/app\/product\/productlist\/productlist.component.html (26 bytes) CREATE src\/app\/product\/productlist\/productlist.component.spec.ts (661 bytes) CREATE src\/app\/product\/productlist\/productlist.component.ts (296 bytes) CREATE src\/app\/product\/productlist\/productlist.component.scss (0 bytes) UPDATE src\/app\/app."},{"title":"Dealing With the Top 5 Most Known Security Risks in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/dealing-with-angular-security-issues\/","pubDate":"Thu, 18 Nov 2021 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/dealing-with-angular-security-issues\/","description":"As with any other modern software development instrument, security is the number one concern for early Angular application development.\nAngular- a front-end component-based framework- undoubtedly helps mitigate a range of security threats without the need for additional lines of code.\nHowever, even with its magnificent protective shield coupled with Long-term Support (LTS) from Google, applications built on Angular are still prone to attacks.\nIdentifying vulnerabilities is the first step in threat actors\u2019 playbooks."},{"title":"Angular 13 version released by Google","link":"https:\/\/www.angularjswiki.com\/angular\/angular-13-release\/","pubDate":"Wed, 03 Nov 2021 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-13-release\/","description":"On 03-11-2021 ,Google has released Angular 13 version.\nOne of the breaking change in Angular 13 version is Google removed support for IE 11 i.e., End of Internet explorer 11 support.\nMajor changes in Angular 13 End of IE 11 Support. View Engine is removed from Angular 13 version. Angular 13 uses RxJS 7.4 version Angular 13 now supports Typescript 4.4 version. Inlining font Support for Adobe fonts, which increases app performance by speeding up FCP(First Contentful Paint)."},{"title":"How to detect route change in Angular with examples","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-detect-route-change-in-angular-with-examples\/","pubDate":"Fri, 06 Aug 2021 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-detect-route-change-in-angular-with-examples\/","description":"Steps to detect route change in Angular application Urls.\nImport Router, Event, NavigationStart, NavigationEnd, NavigationError from ‘@angular\/router’. And inject router in the constructor. Subscribe to the NavigationStart, NavigationEnd, NavigationError events of the router. Detect the change in URL route in NavigationStart’s subscribe method. We can add progress spinner or progress bar whenever a route change detected in Angular applications.\nNow we will go through an example to understand it further."},{"title":"How To Change Angular Port (ng serve port) number from 4200 to other","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-change-angular-port-ng-serve-port-number-from-4200-to-other\/","pubDate":"Mon, 05 Jul 2021 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-change-angular-port-ng-serve-port-number-from-4200-to-other\/","description":"There are two ways we can change the default angular port number from 4200 to other number.\nUsing ng serve --port flag. Specifying default port number in project’s Angular.json file. By default Angular CLI ng serve command uses port 4200 to run the application.\n** Angular Live Development Server is listening on localhost:4200, open your browser on http:\/\/localhost:4200\/ ** Using ng serve –port flag. This is pretty simple method to change the default port number in Angular application."},{"title":"Angular json pipe pretty format","link":"https:\/\/www.angularjswiki.com\/angular\/angular-json-pipe-pretty\/","pubDate":"Sat, 27 Mar 2021 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-json-pipe-pretty\/","description":"For debugging purpose,We can display the JSON data in component HTML using Json Pipe in Angular.\nTaking product object as explained in Angular Json Pipe.\n<p>{{product | json}}<\/p> <p>{{products | json}}<\/p> Have a look at the output\n{ "Id": 1, "Name": "Angular wiki" } [ { "Id": 1, "Name": "Angular wiki" }, { "Id": 2, "Name": "Typescript" } ] The above output is not pretty-printed\/formatted to display to the user."},{"title":"How to change mat-checkbox color in Angular material","link":"https:\/\/www.angularjswiki.com\/angular\/mat-checkbox-color\/","pubDate":"Tue, 09 Mar 2021 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/mat-checkbox-color\/","description":"mat-checkbox uses default material theme colors.\nBy defualt checkboxes uses the material theme accent color, and we can change it to primary or warn using color property.\nAnd in most of the real world projects we will give our own custom colors to the mat-checkbox and there is no direct way or property though which we can change the mat-checkbox color.\nTo change mat-checkbox color we need to override the default theme css colors."},{"title":"Angular 12.0.0-next.0 version released","link":"https:\/\/www.angularjswiki.com\/angular\/angular-12-release\/","pubDate":"Thu, 11 Feb 2021 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-12-release\/","description":"On 2021-02-10 ie.,Google has released Angular 12.0.0-next.0 version.\nAs part of this release Angular team fixed couple of bugs and added some features.\nThe complete list can be found here.\nhttps:\/\/github.com\/angular\/angular\/blob\/master\/CHANGELOG.md."},{"title":"How to use Tailwind CSS in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/angular-tailwind-css\/","pubDate":"Thu, 11 Feb 2021 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-tailwind-css\/","description":"So many Angular developers around the world are waiting to integrate Tailwind CSS in Angular Applications.\nAngular team released Angular v11.2 version, which includes native support for TailwindCSS.\nIn this tutorial we are going to learn how to use Tailwind CSS in Angular projects.\nTable of Contents Step 1 : Update Angular to version 11.2 Step 2: Install TailwindCSS via npm or yarn Step 3: Generate Tailwind CSS Configuration file."},{"title":"Short Circuiting Assignment Operators in Typescript 4.0 & Angular 11","link":"https:\/\/www.angularjswiki.com\/angular\/short-circuit-assignment-operator-typescript-angular\/","pubDate":"Fri, 05 Feb 2021 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/short-circuit-assignment-operator-typescript-angular\/","description":"Angular 11 supports only Typescript 4.0 version.\nTypescript 4.0 has some cool features that can be used in Angular 11.\u00a0One such feature is short-circuiting assignment operators.\nJavaScript and other languages, supports compound assignment operators.\nCompound-assignment operators perform the operation specified by the additional operator, then assign the result to the left operand as shown below.\n\/\/ Addition \/\/ a = a + b a += b; \/\/ Subtraction \/\/ a = a - b a -= b; \/\/ Multiplication \/\/ a = a * b a *= b; \/\/ Division \/\/ a = a \/ b a \/= b; \/\/ Exponentiation \/\/ a = a ** b a **= b; \/\/ Left Bit Shift \/\/ a = a << b a <<= b; But we cannot use logical and (&&), logical or (||), and nullish coalescing (?"},{"title":"How to Get Query Parameters from URL route in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/get-query-parameters-in-angular\/","pubDate":"Wed, 20 Jan 2021 00:00:06 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/get-query-parameters-in-angular\/","description":"Steps to get query parameters from URL route in Angular\nimport ActivatedRoute from ‘@angular\/router’. Inject ActivatedRoute class in constructor. Access queryParams property of ActivatedRoute class which returns an observable of the query parameters that are available in the current URL route. We will go through an example to understand it further.\nTo pass query parameters in Angular go through the following post.\nQuery Parameters in Angular with examples"},{"title":"Query Parameters in Angular with examples","link":"https:\/\/www.angularjswiki.com\/angular\/query-parameters-in-angular\/","pubDate":"Wed, 20 Jan 2021 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/query-parameters-in-angular\/","description":"Using Query parameters in Angular, we can pass optional parameters to angular routes in our applications.\nThere are two ways we can pass query parameters in angular.\nUsing Router.navigate Using RouterLink. We will go through few examples to understand further.\nTable of Contents Pass query parameters to Router.navigate using queryParams. Passing multiple query parameters. Preserving query parameters using queryParamsHandling Merging query parameters using queryParamsHandling. Pass query parameters to routerLink."},{"title":"ngModelChange and change events in Angular with examples","link":"https:\/\/www.angularjswiki.com\/angular\/ngmodelchange-change-angular\/","pubDate":"Sun, 13 Dec 2020 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/ngmodelchange-change-angular\/","description":"ngModelChange is the @output property of ngModel directive. and it’s specific to Angular framework.\nWhere as (change) event is classic HTML DOM event, independent of Angular framework triggered when a change happened in input element.\nIn this tutorial we will understand the differences between (ngModelChange) and (change) events by going through few examples.\nTable of Contents Understand ngModelChange event using simple example Multiple ngModelChange events. Understand change event using simple Example Summary of differences between ngModelChange vs change."},{"title":"Combining Angular With Arduino","link":"https:\/\/www.angularjswiki.com\/angular\/angular-arduino\/","pubDate":"Wed, 02 Dec 2020 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-arduino\/","description":"When you think about Angular and Arduino, one screams software and the other hardware. While both to some extent related to programmable systems and digital creativity, the two would not typically overlap or intertwine for any particular purpose.\nAngular, as you\u2019re likely aware if you\u2019re reading here, is a Google-backed, open-source development framework for web applications. Initially released as AngularJS back in 2012, the framework has now reached version Angular 11, and has only grown more useful for and popular among software developers over time."},{"title":"Google Has released final version of Angular 11","link":"https:\/\/www.angularjswiki.com\/angular\/angular-11-released\/","pubDate":"Wed, 11 Nov 2020 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-11-released\/","description":"On 11-11-2020 , Google has released final version of Angular 11.\nHere are the complete details regarding Angular 11 version update.\nAngular 11 Update\nAngular 11 features\nAngular 11 Typescript version"},{"title":"Angular 11 features","link":"https:\/\/www.angularjswiki.com\/angular\/angular-11-features\/","pubDate":"Tue, 10 Nov 2020 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-11-features\/","description":"In this post I will be listing down new features in Angular 11 version.\nAngular 11 release date not yet finalized.\nUpdate: Angular 11 version is released\nAngular 11 features. As part of Angular 11 version, Google Added so many new features to existing Angular packages. And few breaking changes from the past releases.\n@angular\/core features @angular\/core\/testing deprecated async function,In Angular 11 they have added a migration that finds all imports and calls to the async function and replaces with waitForAsync function."},{"title":"Double Question Marks(??) or Nullish coalescing Operator in Angular\/Typescript","link":"https:\/\/www.angularjswiki.com\/angular\/double-question-marks-or-nullish-coalescing-operator-in-angular-typescript\/","pubDate":"Wed, 04 Nov 2020 00:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/double-question-marks-or-nullish-coalescing-operator-in-angular-typescript\/","description":"Double question marks(??) or nullish coalescing operator helps us to assign default values to null or undefined variables in Angular and Typescript.\nIt’s often called as Null coalescing operator.\nIt’s introduced as part of Typescript 3.7 version.\nSo to use double question marks or null coalescing operator in Angular we should update our application to latest version of Angular (Minimum Angular 9)\nUpdate to latest versions of Angular\nIf you are familiar with C# language, you will be using it as part of your regular day to day programs."},{"title":"Angular 11 Typescript version","link":"https:\/\/www.angularjswiki.com\/angular\/angular-11-typescript-version\/","pubDate":"Wed, 04 Nov 2020 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-11-typescript-version\/","description":"Angular 11 uses Typescript 4.0 version.\nIf you are using older version of typescript i.e., typescript 3.9. We should upgrade our project version to typescript version 4.0.\nTo know more details about this please go through the Angular 11 update guide.\nUpgrade to Angular 11"},{"title":"How To Remove an element from Array in Angular\/Typescript","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-remove-an-element-from-array-in-angular-or-typescript\/","pubDate":"Mon, 05 Oct 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-remove-an-element-from-array-in-angular-or-typescript\/","description":"To remove an element from an array in Angular or Typescript we can use javascript’s delete operator or Array splice function.\nUsing delete Operator Using javascript delete operator we can remove an element from array in Angular or typescript as shown below.\nvar arrayElements = [1,2,3,4]; console.log(arrayElements); \/\/[1, 2, 3, 4] delete arrayElements[1]; console.log(arrayElements); \/\/ [1, , 3, 4] If you see the above output delete operator removing an element from array at the position 1, instead of element 1."},{"title":"How to fix No provider for HttpClient error in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/no-provider-for-httpclient\/","pubDate":"Sat, 19 Sep 2020 00:00:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/no-provider-for-httpclient\/","description":"To fix NullInjectorError: No provider for HttpClient! error in Angular follow the below steps.\nOpen app.module.ts file of Angular Application. Import HttpClientModule from @angular\/common\/http. Add HttpClientModule to the @NgModule imports array. HttpClient is Angular’s way of communicating with a remote server over HTTP.\nIdeally your AppModule class should be like this below.\nimport { HttpClientModule } from '@angular\/common\/http'; @NgModule({ imports: [ BrowserModule, HttpClientModule, ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } As explained in my previous article EXCEPTION: No Provider For Http!"},{"title":"Angular 11 Release date, features & update to Angular 11 version","link":"https:\/\/www.angularjswiki.com\/angular\/angular-11-roadmap\/","pubDate":"Fri, 18 Sep 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-11-roadmap\/","description":"Angular 11 version is available now. Before upgrading to Angular 11 version follow the below steps.\nUpgrade your application to Angular 10 version Update to Angular 10. Then run ng update command. Today i.e., 11-11-2020 Angular 11 version has released. Angular 11 version is released\nUpdate to Angular 11 Version If you are running your application in version 10 or Angular 11 pre release versions, it’s very easy to upgrade your application to Angular 11."},{"title":"Fixing Can't bind to 'formGroup' since it isn't a known property of 'form' angular error","link":"https:\/\/www.angularjswiki.com\/angular\/cant-bind-to-formgroup-since-it-is-not-a-known-property-of-form\/","pubDate":"Wed, 08 Jul 2020 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/cant-bind-to-formgroup-since-it-is-not-a-known-property-of-form\/","description":"Steps to fix Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ error in Angular\nImport FormsModule, ReactiveFormsModule from ‘@angular\/forms’ in each and every module that uses FormGroup. Add FormsModule and ReactiveFormsModule into imports array of your module. In component html file use formGroup selector to bind the form data. Table of Contents What is formGroup? formGroup in child modules and components."},{"title":"How to get current route URL in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-get-current-route-in-angular\/","pubDate":"Tue, 07 Jul 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-get-current-route-in-angular\/","description":"Steps to get current route URL in Angular.\nImport Router,NavigationEnd from ‘@angular\/router’ and inject in the constructor. Subscribe to the NavigationEnd event of the router. Get the current route url by accessing NavigationEnd’s url property. Now we will take an example and understand it further.\nI have created an Angular app which contains three routes. About,Service and Dashboard.\nimport { Component } from '@angular\/core'; import { Router,NavigationEnd } from '@angular\/router'; @Component({ selector: 'my-app', templateUrl: '."},{"title":"How To Convert a string to Enum in Typescript\/Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-convert-a-string-to-enum-in-typescript-or-angular\/","pubDate":"Mon, 06 Jul 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-convert-a-string-to-enum-in-typescript-or-angular\/","description":"To convert a string to Enum in Typescript or angular follow the below steps.\nPass the given string to Enum object as a key. If the string is part of the enum name entry the value will be returned. And then cast it to the enum object to get enum type of string. Now we will go through an example to understand it further.\nI have a created enum object of type Day, which represents time of Day and a method returnDayOfTime()."},{"title":"How To loop or get names & values of Enums in typescript","link":"https:\/\/www.angularjswiki.com\/angular\/names-of-enums-typescript\/","pubDate":"Thu, 02 Jul 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/names-of-enums-typescript\/","description":"To get the names and values of Enums in typescript,we can loop through the enum object using for loop.\nTable of Contents Numeric enums String enums Mixed or Heterogeneous enums Numeric enums Take an example of an enum which represents different types of Log Entries.\nenum LogEntry { ERROR, WARN, INFO, DEBUG } By default all enums in typescript are numeric enums similar to other programming languages."},{"title":"How to get index of ngFor element in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-get-index-of-element-in-ngfor-angular\/","pubDate":"Thu, 13 Feb 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-get-index-of-element-in-ngfor-angular\/","description":"Steps to get index of ngFor element in Angular\nDeclare a variable inside *ngFor directive using let or as keyword. for instance say indexofelement or simply i. Assign the variable value to index. And display the index of ngFor element using angular expression. We will go through an example to understand it further.\nI have created a component called NgForGetIndex in my Angular project and added an array of books."},{"title":"Angular Decimal Pipe & formatting decimal numbers in Angular with examples","link":"https:\/\/www.angularjswiki.com\/angular\/angular-decimal-pipe\/","pubDate":"Thu, 30 Jan 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-decimal-pipe\/","description":"Angular Decimal Pipe is one of the bulit in pipe in Angular used to format decimal numbers according to the given decimal digits info and locale information.\nTable of Contents How to use Angular Decimal Pipe Angular Decimal Pipe Examples Angular decimal pipe example with country locale Angular Decimal Pipe rounding Rounding Angular number to 2 decimal points Angular Decimal Pipe with No decimal points How to use decimal pipe in Components in Angular formatNumber() method in Angular Removing Comma from number angular decimal pipe Error: InvalidPipeArgument: ‘not a valid digit info’ for pipe ‘DecimalPipe’ How to use Angular Decimal Pipe Angular decimal pipe acceps two parameters"},{"title":"How to Convert input field text to uppercase in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-convert-input-field-text-to-uppercase-in-angular\/","pubDate":"Thu, 30 Jan 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-convert-input-field-text-to-uppercase-in-angular\/","description":"To convert input field text to uppercase in angular we can use (ngModelChange) method.\nWe will go through an example to understand it further.\nWe will create a component called UppercaseInputComponent in our Angular project and then will bind <input> field to a variable called inputValue using (ngModel).\nexport class UppercaseInputComponent implements OnInit { inputvalue = ""; constructor() { } ngOnInit() { } } And in our component file we will create an uppercase input field as shown below."},{"title":"ngPlural & ngPluralCase : Pluralization in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/ngplural\/","pubDate":"Mon, 20 Jan 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/ngplural\/","description":"Pluralization is very tricky. Converting singular words to plural is often difficult Even in english where most plural words end with an (s).\nFor example to display number of comments or likes in facebook we can add an (s) to the end of comment or like words as shown below.\n0 comment(s) 10 comments(s) And some websites follow the above approach to display plural words. So it’s up to the user to add (s) when reading it."},{"title":"How to bind Select element to object in Angular with examples","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-bind-a-select-element-to-object-in-angular\/","pubDate":"Tue, 14 Jan 2020 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-bind-a-select-element-to-object-in-angular\/","description":"To bind select element to object in angular use [ngValue] property.\nWe will go through an example to understand it further. we will create a component called BindSelectToObjectComponent in our angular project.\n@Component({ selector: 'app-bindselecttoobject', templateUrl: '.\/bindselecttoobject.component.html', styleUrls: ['.\/bindselecttoobject.component.scss'], }) export class BindSelectToObjectComponent{ languageObjects : language[]; selectedObject : language; constructor() { this.languages = [ {id: 1, name: "Angular"}, {id: 2, name: "Typescript"}, {id: 3, name: "Javascript"}, {id: 4, name: "Java"}, {id: 5, name: "DotNet"} ] } } interface language{ id:number; name:string; } I created an interface object called language which has id and name properties."},{"title":"ngModel Angular Error: Can't bind to 'ngModel' since it isn't a known property of 'input'","link":"https:\/\/www.angularjswiki.com\/angular\/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input\/","pubDate":"Mon, 30 Dec 2019 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input\/","description":"If you are new to Angular, you might have encountered Can't bind to 'ngModel' since it isn't a known property of 'input' error when you use input element with [(ngModel)].\nimport { Component, OnInit } from '@angular\/core'; @Component({ selector: 'app-input-element', templateUrl: '.\/input-element.component.html', styleUrls: ['.\/input-element.component.scss'] }) export class InputElementComponent implements OnInit { public inputValue : string; constructor() { this.inputValue = "two way Binding"; } ngOnInit() { } } And in input-element."},{"title":"How To Convert string to number in Angular\/Typescript","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-convert-a-string-to-number-in-angular-or-typescript\/","pubDate":"Sun, 29 Dec 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-convert-a-string-to-number-in-angular-or-typescript\/","description":"To convert string to number in angular or typescript follow the below steps.\nCheck if a string is number or not using Number() function. If the string is number then convert Number() returns the numeric value or NaN (Not a Number). We will take a sample typescript string and convert it to number.\nvar stringToConvert = "759"; var numberValue = Number(stringToConvert); console.log(numberValue); \/\/Returns 759 var stringToConvert = "A123"; var numberValue = Number(stringToConvert); console."},{"title":"How to use ngfor,ngif together on same element in angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-use-ngfor-ngif-together-on-same-element-in-angular\/","pubDate":"Sat, 28 Dec 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-use-ngfor-ngif-together-on-same-element-in-angular\/","description":"In Angular, we cannot use two structural directives on the same element.\ni.e., we cannot place *ngFor,*ngIf together on same element.\n<div *ngIf="shouldShow" *ngFor="let order of orders"> <li><\/li> <\/div> The above code returns following error.\nCan’t have multiple template bindings on one element. Use only one attribute prefixed with *\nTable of Contents Reasons Why we cannot use two structural directives on same element."},{"title":"How to select an element in Angular Component Template","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-select-an-element-in-angular-component-template\/","pubDate":"Thu, 26 Dec 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-select-an-element-in-angular-component-template\/","description":"Steps to select an element in Angular component template\nAdd a template reference variable to the component HTML element. Import @ViewChild decorator from @angular\/core in component ts file. Use ViewChild decorator to access template reference variable inside the component. And finally select the element in ngAfterViewInit method by accessing element’s nativeElement property. Now we will go through an example to understand it further.\nWe will create a component called select-element in our angular project."},{"title":"Progress Spinner in Angular using mat-progress-spinner | Material Design","link":"https:\/\/www.angularjswiki.com\/angular\/creating-progress-spinner-in-angular\/","pubDate":"Thu, 14 Nov 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/creating-progress-spinner-in-angular\/","description":"We can create a Progress spinner in Angular using material design component mat-progress-spinner or mat-spinner.\nProgress Spinner displays the progress of an ongoing process by animating the indicator along a fixed invisible circular track in a clockwise direction. i.e., mat-progress-spinner is a circular progress indicator.\nmat-progress-spinner is part of angular material module called MatProgressSpinnerModule.\nThis tutorial contains step by step tutorial to implement progress spinner in angular by following material design specifications."},{"title":"Fixing Could not find Angular Material core theme error in Angular Material","link":"https:\/\/www.angularjswiki.com\/angular\/could-not-find-angular-material-core-theme\/","pubDate":"Tue, 05 Nov 2019 00:00:00 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/could-not-find-angular-material-core-theme\/","description":"I have been working with Angular Material for the past one year.\nRecently I have created a new project with Angular Material.\nStrangely, when I try to run the application nothing has been loaded in the webpage and in console log, I got a warning saying\nCould not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https:\/\/material."},{"title":"How To Use Angular Pipes in Components & Service ts files","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-use-angular-pipes-in-components-and-services\/","pubDate":"Sun, 20 Oct 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-use-angular-pipes-in-components-and-services\/","description":"Steps to use angular pipes in components and service ts files\nImport angular pipe in app.module.ts file and add it to the providers array. In Component file, import angular pipe & inject the pipe into the constructor. And Finally use the angular pipe transform method & pass the required parameters according to pipe defination to format the values. Now we will understand it further using examples.\nTable of Contents Use Date Pipe in Angular Components & Services ts file Use Currency Pipe in Angular Components & Services ts file Use Date Pipe in Angular Components & Services ts file To use date pipe in component & services follow the below steps"},{"title":"How to add conditional class in Angular using ngClass","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-add-a-class-based-on-condition-in-angular\/","pubDate":"Thu, 17 Oct 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-add-a-class-based-on-condition-in-angular\/","description":"To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below.\n<div [ngClass]="{'classname' : condition}"><\/div> And in the above code, class name will be added only when the condition is true.\nWe can add a single class or multiple classes dynamically based upon the conditions.\nWe will go through few examples to understand it further."},{"title":"How to Check Angular CLI Version in Command prompt","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-check-angular-cli-version-in-command-prompt\/","pubDate":"Wed, 16 Oct 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-check-angular-cli-version-in-command-prompt\/","description":"To Check Angular CLI version use ng --version or ng v or npm list -global --depth 0 commands.\nng --version command returns the details of version of Angular CLI installed and in addition to that version of Angular development packages like @angular-devkit\/architect,rxjs etc.. as shown below.\nAngular CLI: 8.1.1 Node: 10.16.0 OS: win32 x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit\/architect 0.801.1 @angular-devkit\/core 8.1.1 @angular-devkit\/schematics 8.1.1 @schematics\/angular 8.1.1 @schematics\/update 0.801.1 rxjs 6."},{"title":"Angular Date Pipe & formatting dates in Angular with examples","link":"https:\/\/www.angularjswiki.com\/angular\/angular-date-pipe-formatting-date-times-in-angular-with-examples\/","pubDate":"Wed, 19 Jun 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-date-pipe-formatting-date-times-in-angular-with-examples\/","description":"Angular date pipe used to format dates in angular according to the given date formats,timezone and country locale information.\nUsing date pipe, we can convert a date object, a number (milliseconds from UTC) or an ISO date strings according to given predefined angular date formats or custom angular date formats.\nTable of Contents How to Use Angular Date Pipe Angular Date Pipe Examples List of all predefined date formats in Angular Angular date pipe timezone example How to display UTC date time in angular using date pipe Angular date pipe example with country locale Creating Custom Date Pipe in Angular Defining Custom date formats in Angular How to Use Angular Date Pipe Angular date pipe accpets three parameters"},{"title":"How To Use Font Awesome icons in Angular Applications","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-use-font-awesome-icons-in-angular-applications\/","pubDate":"Sun, 09 Jun 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-use-font-awesome-icons-in-angular-applications\/","description":"In this tutorial I will explain how to use Font Awesome icons in Angular applications using @fortawesome\/angular-fontawesome package.\nAngular Font Awesome icons package i.e, @fortawesome\/angular-fontawesome is an official Angular component for Font Awesome 5+ icons.\nFirst we will learn basic Font Awesome icons rendering in Angular and then we will go through some cool Font Awesome icons features like animations,layering,transforming etc..\nTable of Contents Installing Font Awesome icons in Angular applications Installing pro version Font Awesome icons in Angular Global level configuration Project level configuration Using Font Awesome icons in Angular applications Steps to use Font Awesome icons at component level Step 1: Import FontAwesomeModule in AppModule Step 2: Import font awesome icons in angular component directly What is Font Awesome icon library?"},{"title":"Angular Currency Pipe & Format Currency In Angular with examples","link":"https:\/\/www.angularjswiki.com\/angular\/angular-currency-pipe-formatting-currency-in-angular\/","pubDate":"Sat, 09 Feb 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-currency-pipe-formatting-currency-in-angular\/","description":"Angular Currency Pipe is one of the bulit in pipe in Angular used to format currency value according to given country code,currency,decimal,locale information.\nTable of Contents How to use Angular Currency Pipe Angular Currency Pipe example Angular Currency Pipe without symbol Angular Currency Pipe No Decimal Angular Currency Pipe example with locale Display Currency symbol to the right using Angular Currency Pipe Creating Custom Angular Currency Pipe List of All Countries currency codes of Angular Currency Pipes How to use Angular Currency Pipe Angular Currency Pipe takes currency value as input and currencyCode,display,digitsInfo and locale as parameters as shown below"},{"title":"Angular TitleCase Pipe:Capitalize First Letter Of Each Word In Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-capitalize-first-letter-of-each-word-in-angular\/","pubDate":"Sat, 09 Feb 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-capitalize-first-letter-of-each-word-in-angular\/","description":"To capitalize first letter of each word in Angular use Angular’s\u00a0TitleCasePipe.We have to pass input to the titlecase pipe as shown below\n<p>{{'titleCasePipe capitalizes first letter of each word in angular' | titlecase}}<\/p> <!-- Output --> <!--TitleCasePipe Capitalizes First Letter Of Each Word In Angular--> Angular TitleCasePipe is one of the built in pipes which converts text to titlecase.\nTable of Contents Angular TitleCasePipe Syntax Angular TitleCasePipe Examples Angular TitleCasePipe Syntax The syntax is very simple Just we need to pass input of type string to titlecase pipe"},{"title":"How To Delete A Component In Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-delete-a-component-in-angular\/","pubDate":"Fri, 08 Feb 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-delete-a-component-in-angular\/","description":"Steps to delete a component in Angular\nRemove the import line reference from Angular app.module.ts file. Remove the component declaration from @NgModule declaration array in\u00a0app.module.ts file And then manually delete the component folder from Angular project. Finally Delete all the references of component manually from the Angular project. In Angular CLI,there is no command available to delete a component created by Angular CLI as of now.\nThere is no\u00a0ng delete component command as part of Angular CLI."},{"title":"How To Install And Use JQuery In Angular Projects","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-install-and-use-jquery-in-angular-projects\/","pubDate":"Sat, 02 Feb 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-install-and-use-jquery-in-angular-projects\/","description":"jQuery plugin in Angular will be very useful while we are doing DOM manipulations.In this tutorial I will be explaining how to install and use jquery in Angular Projects\nTable of Contents Install and Use jquery in Angular Install and Use jquery in Angular with typescript jquery @types Should I use jquery in Angular Projects Install and Use jquery in Angular To install jquery in Angular use the following node npm command"},{"title":"Angular Material Divider : Mat-Divider Example","link":"https:\/\/www.angularjswiki.com\/angular\/angular-material-divider-mat-divider-example\/","pubDate":"Tue, 29 Jan 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-material-divider-mat-divider-example\/","description":"Angular Material Divider component _mat-divider_\u00a0a simple line divider that groups elements in list and layout by following material design styles.\nTable of Contents Importing mat-divider module Angular Material Divider mat-divider types Simple\u00a0mat-divider example mat-divider Inset example mat-divider vertical example mat-divider style mat-divider color mat-divider thickness mat-divider properties mat-divider not showing mat-divider vertical not working mat-divider is not a known element Importing mat-divider module To use mat-divider we have to import MatDividerModule from angular material module."},{"title":"How To Update Angular CLI To Latest Version","link":"https:\/\/www.angularjswiki.com\/angular\/update-angular-cli-version-ng-update-to-latest-6-7-versions\/","pubDate":"Tue, 22 Jan 2019 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/update-angular-cli-version-ng-update-to-latest-6-7-versions\/","description":"Updating Angular CLI to the latest version (Angular v15) is pretty much simple if you are using Angular 9 or 10 version above.\nJust update @angular\/core and @angular\/cli by using ng update command.\nng update @angular\/core @angular\/cli or you can use npx command\nnpx @angular\/cli update @angular\/core @angular\/cli If you are using Angular material You have to update it as well using ng update command.\nng update @angular\/material The Angular latest Official stable version is Angular v15 which is released on 17 November 2022."},{"title":"How To Read Local JSON Files In Angular","link":"https:\/\/www.angularjswiki.com\/angular\/how-to-read-local-json-files-in-angular\/","pubDate":"Fri, 02 Nov 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/how-to-read-local-json-files-in-angular\/","description":"We can read local JSON files in Angular,several different ways depending upon the Angular version we are using.\nIn this post I am listing out different methods for reading JSON files in Angular applications.\nBy using resolveJsonModule By using HttpClient By using ES6 import statements Table of Contents Solution 1: Reading local JSON files using resolveJsonModule in Angular 7⁄6.1 above Solution 2: Reading local JSON files using HttpClient in Angular 5 or 4 Solution 3: Reading local JSON files in Offline Angular Applications Reading local JSON files in Angular 2+ versions Solution 1: Reading local JSON files using resolveJsonModule in Angular 7⁄6."},{"title":"Angular EXCEPTION: No Provider For Http! Error Fix","link":"https:\/\/www.angularjswiki.com\/angular\/angular-exception-no-provider-for-http-error-fix\/","pubDate":"Mon, 10 Sep 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-exception-no-provider-for-http-error-fix\/","description":"To avoid Angular EXCEPTION: No provider for Http! error we need to import\u00a0HttpClientModule from\u00a0@angular\/common\/http.\nimport { HttpClientModule } from '@angular\/common\/http'; @NgModule({ imports: [ BrowserModule, HttpClientModule, ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } And this\u00a0HttpClientModule introduced in Angular 4.3.\nIf you are using earlier versions of Angular import HttpModule from @angular\/http to fix EXCEPTION: No provider for Http!\nimport { HttpModule } from '@angular\/http'; @NgModule({ imports: [ BrowserModule, HttpModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } And this HttpModule is deprecated from Angular 5."},{"title":"Angular Material Buttons : Mat-Button Example","link":"https:\/\/www.angularjswiki.com\/angular\/buttons-in-angular-using-material-design-mat-button-example\/","pubDate":"Thu, 23 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/buttons-in-angular-using-material-design-mat-button-example\/","description":"Angular Material button module MatButtonModule(mat-button,mat-raised-button,mat-icon-button,mat-fab,mat-mini-fab) enhances the user experience of normal buttons (<button>) and anchor (<a>)tags by following Material design principles.\nWhen you want to perform an action in webpage use button and use an\u00a0anchor tag to navigate to other pages.\nButtons are placed anywhere in webpage and also places like:\nDialogs Modalwindows Forms Cards Toolbars Table of Contents Import mat button module MatButton Directive MatAnchor Directive Types of Angular Material Buttons Text buttons Outlined Buttons Contained buttons Floating action buttons mat-button example mat-stroked-button example mat-flat-button example mat-raised-button\u00a0example mat-icon-button example mat-button with icon and text example mat-fab example mat-mini-fab example mat button api mat-button color change and theming mat-button disabled mat-button disableRipple mat-button isIconButton mat-button\u00a0isRoundButton mat-button\u00a0ripple mat-button focus method Angular Materials Buttons Demo mat button not a known element Import mat button module To import Mat Button Module use the following code."},{"title":"Progress Bar in Angular using Material component mat-progress-bar","link":"https:\/\/www.angularjswiki.com\/angular\/progress-bar-in-angular-mat-progress-bar-examplematerial-design\/","pubDate":"Mon, 20 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/progress-bar-in-angular-mat-progress-bar-examplematerial-design\/","description":"We can create a beautiful Progress bar in Angular using material design component mat-progress-bar.\nThis mat-progress-bar is part of angular material module called MatProgressBarModule.\nIn this tutorial we learn how to use angular material progress bar in our daily projects by implementing reading position indicator in a webpage.\nTable of Contents Use of Angular Material Progress Bar Step 1: Import Angular MatProgressBarModule Step 2: Use mat-progress-bar selector in component html Step 3: Give percentage to Progress bar Step 4: Style Progress bar or Change the color of mat-progress-bar mat-progress-bar types or mode mat-progress-bar\u00a0determinate mode mat-progress-bar indeterminate mode mat-progress-bar buffer mode mat-progress-bar query mode mat-progress-bar StackBlitz Demo mat-progress-bar example Reading position indicator using mat-progress-bar mat-progress-bar reading position indicator StackBlitz Demo mat-progress-bar is not a known element mat-progress-bar properties Use of Angular Material Progress Bar <mat-progress-bar> is a horizontal progress bar in Angular."},{"title":"Mat-Icon List : 900+ Angular Material Icons","link":"https:\/\/www.angularjswiki.com\/angular\/angular-material-icons-list-mat-icon-list\/","pubDate":"Thu, 16 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-material-icons-list-mat-icon-list\/","description":"<mat-icon> selector is used to display Material icons in Angular.We have around 900+ Angular Material icons.To show the below <mat-icon> list icons,We need to load material icons css provided by Google\n<mat-icon> is part of angular material module called\u00a0MatIconModule.We can use font ligature as an icon by putting the ligature text in <mat-icon>\u00a0component.\nFor example <mat-icon>home<\/mat-icon> displays home icon.\nWe have to import MatIconModule from Angular Material Modules."},{"title":"Loop Object Key Values In Angular Using *NgFor & Angular Keyvalue Pipe","link":"https:\/\/www.angularjswiki.com\/angular\/angular-keyvalue-pipe-loop-object-key-values-using-ngfor\/","pubDate":"Wed, 15 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-keyvalue-pipe-loop-object-key-values-using-ngfor\/","description":"KeyValue pipe released in Angular 6.1 to loop through objects,Maps and arrays.Now by passing KeyValue pipe to *ngFor we can loop through objects key values & maps.\nPrior to this Angular 6.1 release we cannot iterate directly through objects key values & maps using *ngFor directive.\nTo tackle this issue Angular\u00a0keyvalue pipe has been introduced.\nThis keyvalue pipe converts Object or Map into an array of key value pairs."},{"title":"How To Use Ng-Template In Angular?","link":"https:\/\/www.angularjswiki.com\/angular\/what-is-ng-template-in-angular\/","pubDate":"Fri, 10 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/what-is-ng-template-in-angular\/","description":"ng-template is an Angular element used to render HTML templates.\nWe use\u00a0ng-template with angular *ngIf directive to display else template.\nSo what exactly this ng-template will do?\nWhether it really renders HTML template, we will see with an example.\n<div> ng-template works!<\/div> <ng-template>Inside ng-template tag<\/ng-template> If you see the output it will display only ng-template works\u00a0which is in div element.And have a look at the generated HTML source code."},{"title":"Dynamically Change NgIf Then,Else Templates At Runtime In Angular","link":"https:\/\/www.angularjswiki.com\/angular\/dynamically-change-ngif-thenelse-templates-at-runtime-in-angular\/","pubDate":"Sun, 05 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/dynamically-change-ngif-thenelse-templates-at-runtime-in-angular\/","description":"We can take full advantage of\u00a0ngIfThen,ngIfElse\u00a0template references in *ngIf directive to change then or else\u00a0templates dynamically at runtime. Go through the below example to understand it further.\nUnderstanding Angular\u2019s NgIf, Else, Then With Examples\nI have created a\u00a0component called\u00a0NgifthenelseComponent in my Angular project.\nimport { Component, OnInit,ViewChild, TemplateRef } from '@angular\/core'; @Component({ selector:'app-ngifthenelse', templateUrl:'.\/ngifthenelse.component.html', styleUrls: ['.\/ngifthenelse.component.css'] }) export class NgifthenelseComponent implements OnInit { show:boolean; constructor() { this."},{"title":"Understanding *ngif directive & \"*ngIf else then\" in Angular","link":"https:\/\/www.angularjswiki.com\/angular\/understanding-angulars-ngif-else-then-with-examples\/","pubDate":"Sat, 04 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/understanding-angulars-ngif-else-then-with-examples\/","description":"We all know that angular’s *ngIf directive displays or removes an element from DOM based on given condition.\nTake a look at the below example.\n<div *ngIf="display">Hi I am Visible<\/div> If the display property is true then <div> element will be added to the HTML DOM.\nWhat if we want to display an alternate HTML, if the *ngif condition is false?\nInitially, I used to write two *ngIf blocks to handle these kinds of scenarios as shown below."},{"title":"Difference Between NgIf And Hidden Or Display:none In Angular","link":"https:\/\/www.angularjswiki.com\/angular\/difference-between-ngif-and-hidden-or-displaynone-in-angular\/","pubDate":"Thu, 02 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/difference-between-ngif-and-hidden-or-displaynone-in-angular\/","description":"The main difference between angular ngIf directive & hidden or display:none is ngIf will add or remove the element from DOM based on condition or expression. hidden\u00a0attribute in html5 and display none CSS will show or hide the HTML element.\nWe will go through the examples to understand them further.\nTable of Contents ngIf in Angular hidden or display:none\u00a0in Angular Why ngIf directive remove the element rather than hide it?"},{"title":"NgOnInit & Constructor Differences In Angular With Examples","link":"https:\/\/www.angularjswiki.com\/angular\/what-is-the-difference-between-constructor-and-ngoninit-in-angular\/","pubDate":"Wed, 01 Aug 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/what-is-the-difference-between-constructor-and-ngoninit-in-angular\/","description":"ngOnInit and constructor methods in Angular might be confusing to you,if you are new to Angular.In this tutorial, we will cover the differences between ngOnInit &\u00a0constructor.\nTable of Contents What is a Constructor? What is ngOnInit() in Angular? When is ngOnInit Executed? Understand difference between constructor & ngOnInit() in Angular with example When to use constructor & when to use ngOnInit in Angular Constructor usage in Angular ngOnInit() method usage in Angular ngOnInit vs Constructor in Angular What is a Constructor?"},{"title":"Port 4200 Is Already In Use. Use \u2018\u2013Port\u2019 To Specify A Different Port Error","link":"https:\/\/www.angularjswiki.com\/angular\/port-4200-is-already-in-use-use-port-to-specify-a-different-port-error\/","pubDate":"Fri, 16 Feb 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/port-4200-is-already-in-use-use-port-to-specify-a-different-port-error\/","description":"Port 4200 is already in use. Use \u2018-port\u2019 to specify a different port error occures sometimes when we run our angular app using ng serve\nThat means there is another\u00a0existing service already running on port 4200. Table of Contents Port 4200 is already in use.Use ‘-port’ to specify a different port error Reasons Fix Port 4200 is already in use.Use ‘-port’ to specify a different port error in Mac & Linux Fix Port 4200 is already in use."},{"title":"Angular Or Angular 7 Hello World Example","link":"https:\/\/www.angularjswiki.com\/angular\/angular-2-hello-world-example\/","pubDate":"Tue, 13 Feb 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-2-hello-world-example\/","description":"I will explain how to create an Angular 7 app with a simple \u201cHello World\u201d example. This hello world example work in Angular 4,Angular 5,Angular 6,Angular7.\nLet us start with Angular Hello World example to know the basics of Angular 7.\nBefore reading further, please go through my previous tutorial on how to setup local development environment for Angular.\nSetup Angular in Local Development Environment\nWe will use Angular CLI as mentioned in the above tutorial to create our Angular application."},{"title":"Angular 7 Or Angular Local Development Environment Setup","link":"https:\/\/www.angularjswiki.com\/angular\/angular-2-or-angular-local-development-environment-setup\/","pubDate":"Mon, 12 Feb 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/angular-2-or-angular-local-development-environment-setup\/","description":"The best way to learn Angular 7 (or Angular) is to setup our own local development environment. In this tutorial, I will explain how to setup local development environment for Angular.\nBefore reading this article, I would recommend to read following article if you have any confusion regarding Angular 2 and Angular 4 or any other versions.\nIs it Angular 2 or Angular?\nTable of Contents Prerequisites: Install Node."},{"title":"Is Node.Js Required For Angular 2 Or Angular?","link":"https:\/\/www.angularjswiki.com\/angular\/is-node-js-required-for-angular-2-or-angular\/","pubDate":"Sun, 11 Feb 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/is-node-js-required-for-angular-2-or-angular\/","description":"Yes. Node.js required for Angular 2 or Angular apps.\nWe need to install Node.js to develop Angular Apps.\nIf you are familiar with Angular JS 1.x. All we need to do is to add Angular Js file in script tag.But this not the case for Angular.\nReasons why we need Node.js for Angular \u201cAngular\u201d is entirely new framework and it is (Angular or Angular 2) written in Typescript. Browser does not understand Typescript JS (i."},{"title":"Is It Angular 2 Or Angular 4 Or Just Angular?","link":"https:\/\/www.angularjswiki.com\/angular\/is-it-angular-2-or-angular-4-or-just-angular\/","pubDate":"Sat, 10 Feb 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/is-it-angular-2-or-angular-4-or-just-angular\/","description":"Angular 2 is completely new framework than Angular Js 1.X and written in typescript. It was a total breaking change.\nRecently in March 2017, Google released Angular 4. However, it just an update to Angular 2. To remove this confusion Google started calling it as \u201cAngular\u201d without version suffix.\nSo It\u2019s just \u201cAngular\u201d.\nGo through History of AngularJs\nGoogle clearly mentioned that, we should start avoiding GitHub\/NPM libraries prefixed with ng2- or angular2-."},{"title":"History of AngularJs","link":"https:\/\/www.angularjswiki.com\/angular\/history-of-angularjs\/","pubDate":"Tue, 30 Jan 2018 01:01:05 +0000","guid":"https:\/\/www.angularjswiki.com\/angular\/history-of-angularjs\/","description":"When I started learning AngualJs I have couple of questions in my mind like who is the creator AngularJs? When it started? Why its named Angular? etc etc.\nLong back I read one quote\nThe best things in life are not planned, they simply just happen;\nThat’s exactly what happened with Angularjs. There is an interesting story behind the birth of Angularjs.\nThe History of AngularJs It all started in 2008 and 2009, Misko hevery (a developer at Google) working on a part time project to simplify web application development."}]}}