Anil Singh | Code-sample.com

The “ track by ” expression to specify unique keys.   The “ track by ” takes a function that has two arguments: index and item. If “track by” is given, Angular tracks changes by the return value of the function. Understanding About *ngFor Mechanisms:- By default, when you use * ngFor without “track by”, *ngFor tracks array of objects changing through object identity. If you are going to modify (add, update, remove) any element of * ngFor , then update the tracking algorithm by providing your object id to the “track by”function.” Why use “track by”with ngFor directive? The “ngFor” directive may perform poorly with large lists. A small change to the list like, adding a new item or removing an existing item may trigger several DOM manipulations. Syntax of ngFor Angular: < tr   *ngFor = "let user of users; let i = index" >      < td > {{user.name}} </ td >    ...

How to Angular 6+ filter records between two dates? The Angular Filters are used to display or modify the live data as per your filter text. We can write the filter expression using the pipe (|) character i.e. {{ yourData| filterTypes }} There are different types of filter which are given below. 1.       Uppercase Filter                                    2.       Lowercase Filter 3.       Currency Filter 4.       OrderBy Filter 5.       Filter Example 1 : let users: any [] = [{ "id" : 1, "name" : "Anil Singh" , "date" : "2019-06-01" },     { "id" : 2, "name" : "Sunil" , "date" : "2019-08-07" },     { "id" : 3,...

The Angular coding guideline will helps us to understand to write the great code. It must be follows each and every Angular developers. Explore -   What Are Differences in Angular 9, 8, 7, 6, 5, 4, 2? Single Responsibility - Apply the single responsibility principle (SRP) to all components, services, and other symbols. This helps make the app cleaner, easier to read and maintain, and more testable. Rule of One - Do define one thing, such as a service or component, per file and consider limiting files to 400 lines of code. Small functions - Do define small functions and consider limiting to no more than 75 lines. General Naming Guidelines - Do use consistent names for all symbols and the recommended pattern is - feature.type.ts. Separate file names with dots and dashes - 1.       Do use dashes to separate words in the descriptive name. 2.       Do use dots to separate the descriptive name from the ...

Do put bootstrapping and platform logic for the app in a file named main.ts. Do include error handling in the bootstrapping logic. Avoid putting app logic in main.ts. Instead, consider placing it in a component or service. Example looks like - import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule }               from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule)   .then(success => console.log(`Bootstrap success`))   .catch(err => console.error(err));

Angular Console is the user interface for the Angular CLI.  Angular Console developed by Nrwl . Angular Console is free open source, cross-platform tool that provides a graphical UI for the Angular CLI. Angular Console helps us to spend less time in remembering the CLI commands and more time being productive Angular Console keeps all major commands like ng, build, start, serve and so on. Angular Console is a great tool and useful for both experts and beginners Angular developers. Why Angular Console? Professional developers use both command-line tools and user interfaces. They commit in the terminal, but resolve conflicts in VSCode or WebStorm. They use the right tool for the job. You may either install the Angular Console extension for Visual Studio code directly from Microsoft's marketplace . Download for Windows, Mac or UNIX: Available as a desktop app(Mac/Windows) What Are the Features? 1.       Trivial Code Generation...