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

If your backend service uses different names for the XSRF token cookie or header, use HttpClientXsrfModule.withOptions () to override the defaults. imports : [    HttpClientModule ,    HttpClientXsrfModule . withOptions ({      cookieName:   'My-Xsrf-Cookie' ,      headerName:   'My-Xsrf-Header' ,   }), ], withOptions() - Configure XSRF protection. An object that can specify either or both cookie name or header name. 1.       Cookie name default is XSRF-TOKEN . 2.       Header name default is X-XSRF-TOKEN . static   withOptions ( options : { cookieName? :   string ;  headerName ?:  string ; } = {}):  ModuleWithProviders < HttpClientXsrfModule > HttpClientXsrfModule - Configures XSRF protection support for outgoing requests. class   HttpClientXsrfModu...

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