Other versions available: Angular: Angular 9, 8, 7, 6, 2/5 React: React + Recoil, React Hooks + Redux, React + Redux Vue: Vue 3 + Pinia, Vue 2 + Vuex Next.js: Next.js 11 AngularJS: AngularJS.NET: Blazor WebAssembly In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) Find centralized, trusted content and collaborate around the technologies you use most. const headers = new HttpHeaders().set('Authorization', 'Bearer my-token'), Example Angular component at https://stackblitz.com/edit/angular-http-post-examples?file=app/components/post-request-headers.component.ts. Subscribe to Feed: Making statements based on opinion; back them up with references or personal experience. rev2022.11.3.43003. I've been building websites and web applications in Sydney since 1998. Data table with sorting, pagination, and filtering. This sends the same request as the above but sets the response type to a custom Article interface that defines the expected response properties. By default, no style is provided by the react-table package. The auth guard is an angular route guard that prevents unauthenticated users from accessing restricted routes, it does this by implementing the CanActivate interface which allows the guard to decide if a route can be activated with the canActivate() method. I'm a web developer in Sydney Australia and co-founder of Point Blank Development, I've been building websites and web applications in Sydney since 1998.. Other than coding, I'm currently attempting to travel around Australia by motorcycle with my wife Tina, you can follow our adventure on YouTube, Instagram, Facebook and our website TinaAndJason.com.au. Angular 13 How to Make REST Search Call using RxJS Debounce ? The example angular app has just two routes - a By clicking Accept all cookies, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. To use this approach you need to install the jw-paginate package from npm with the command npm install jw-paginate. : This tag is Correct handling of negative chapter numbers, Verb for speaking indirectly to avoid a responsibility. Search fiverr to find help quickly from experienced Angular developers. The example contains a hard coded array of 150 objects split into 15 pages to demonstrate how the pagination component works. Im having issue with sorting and pagination with angular material table. const headers = new HttpHeaders({ 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' }), To set or update headers on an existing HttpHeaders object call the set() method, e.g. Why can we add/substract/cross out chemical equations for Hess law? Update the ~src/components/expanded.table.js file. In an Angular application, we usually use predefines directive like ng-repeat in version 1 and *ngFor structural directive in Angular 2+ version to render a list of items by assigning a collection object. Angular, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, HTTP, RxJS, Share: Tutorial built with Angular 10.0.4. To subscribe to this RSS feed, copy and paste this URL into your RSS reader. Lets get started! This is the app component template (/src/app/app.component.html) from the example, it renders the current page of items using the *ngFor Angular directive on line 5, and includes the pagination component () on line 8. The table provides inputs that will automatically apply the correct CSS styling so that the rows and columns become sticky. Version Check: Data table with sorting, pagination, and filtering. Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/angular-10-pagination-example). But in React, there is no such property available which can be used to traverse over the Collection of data or Objects. Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content. Today we as a developer need some advanced forms on the web application to display information in more interactive ways. Do US public school students have a First Amendment right to be able to perform sacred music? Clear on reload. Lets create a new function component PaginationTableComponent at this location ~src/components/pagination.table.js and update with following code. This is the app module (app.module.ts) from the example, the pagination module is imported on line 3 and added to the imports on line 10. Create a new file ~src/components/basic.table.js and update with the following code: Above we have some consts defined columns,data to keep table columns definition and data which will be going to render inside the table. Facebook And despite pagination is set to 5 its showing all the data. Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content. In order to fix the header row to the top of the scrolling viewport containing the table, you can add You can check more demos and examples of the official sites and implement the same in Angular application. Once your account is created, you'll be logged-in to this account. Simple POST request with a JSON body and response type This sends an HTTP POST request to the Reqres api which is a fake online REST api that includes a /api/posts route that responds to POST requests with the contents of the post body and an id property. Angular 13 How to Make REST Search Call using RxJS Debounce ? Data table with sorting, pagination, and filtering. In this tutorial, we will learn How to add a Rich Text editor in the Angular application by using a very popular and expert plugin named Quill. The response type is set to so it handle any properties returned in the response. Angular 14 Draggable Grid Blocks using angular-gridster2 Tutorial, Angular 13 Dynamic FormsGroups using Reactive Form Tutorial, Phone (Mobile) Validation Using ReGex in React Js StackBlitz Example, Angular Material 13 Server Side Table Pagination Example, Angular 13 Material Dialog Example Positions, Fullscreen, Events Tutorial, React JS Sticky Fixed Header using On Scroll Event Handler, Vue Bootstrap Date & Time Picker Calender Component Example. document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() ); document.getElementById( "ak_js_2" ).setAttribute( "value", ( new Date() ).getTime() ); When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. Tags: Once your account is created, you'll be logged-in to this account. When the migration is complete, you will access your Teams at stackoverflowteams.com, and they will no longer appear in the left sidebar on stackoverflow.com. If you have an Angular 9 CLI project, you could simply use our schematics to add ng-bootstrap library to it. React Table package provides a lot of useful components to enhance the features and functionalities to build datagrids. Twitter. RSS, RSS, Have look at the following details displaying various sub-component directives available to be used inside the : : Title of the respective card : The subtitle of the respective card : All the data and information which is the body of the card needs to be written in this section. Angular 13 How to Make REST Search Call using RxJS Debounce ? @tabletigr I saw it was cidades, was just wondering if the component was doing something else. About. There are 2 required properties for using the Angular 10 pagination component: There are also a few optional properties: This is the app component (/src/app/app.component.ts) from the example, it creates a hardcoded array of items to be paged in the ngOnInit() method, and updates the current page of items in the onChangePage() callback method. Example Angular component at https://stackblitz.com/edit/angular-http-put-examples?file=app/components/put-request-typed.component.ts. This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13. Atom, Class Files. What's a good single chain ring size for a 7s 12-28 cassette for better hill climbing? Tutorial built with Angular 9.1.9. This feature requires a pro account With a Pro Account you get: unlimited public and private projects; There are three themes available for the table to be added in theme property above: 'plain', 'grid' and 'plain'. Angular 10, TypeScript, Pagination, Share: Here for the sake of simplicity, we are implementing in App component. Rich text editors or What You See Is What You Get editors to provide a full-featured textarea where users can do text formating, add multi-media content, use emojis use text heading change text size or color, etc.if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[300,250],'freakyjolly_com-box-3','ezslot_4',604,'0','0'])};__ez_fad_position('div-gpt-ad-freakyjolly_com-box-3-0'); This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13. Before making HTTP requests from your Angular app you need to do a couple of things. Data are coming from store as observable and stored into table sucessfully. We can convert dynamic data into a table using a jsPDF Autotable library which can be converted into a PDF file to download or open in a new browser tab.if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[468,60],'freakyjolly_com-medrectangle-3','ezslot_9',623,'0','0'])};__ez_fad_position('div-gpt-ad-freakyjolly_com-medrectangle-3-0'); In this article, we will learn How to install and use the jspdf-autotable in the Angular 8/9 project to create a PDF document of JSON object data in the form of a table.if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[300,250],'freakyjolly_com-medrectangle-4','ezslot_1',605,'0','0'])};__ez_fad_position('div-gpt-ad-freakyjolly_com-medrectangle-4-0'); The jspdf-autotable package use jsPDF library which is a very well known and popular library to create PDF files of HTML, Images and JSON data. MATLAB command "fourier"only applicable for continous time signals or is it also applicable for discrete time signals? This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13. Angular CLI: 9.0.6 Example Angular component at https://stackblitz.com/edit/angular-http-put-examples?file=app/components/put-request-error-handling.component.ts. Or run on Stackblitz: Conclusion. In single-page applications like Angular, we create pages that are data-driven, where a single page can be used to load different types of data. Angular 14 Draggable Grid Blocks using angular-gridster2 Tutorial; Angular 13 Dynamic FormsGroups using Reactive Form Tutorial; Phone (Mobile) Validation Using ReGex in React Js StackBlitz Example; Angular Material 13 Server Side Table Pagination Example; Angular 13 Material Dialog Example Positions, Fullscreen, Events Tutorial Does it make sense to say that if someone was hired for an academic position, that means they were the "best"? Angular material provides a wide variety of UI components, Datatables is one of the topmost used components to create a tabular grid with multiple features and functionality support. Breakdown of the Angular 10 Alert Module Code. Angular 14 Draggable Grid Blocks using angular-gridster2 Tutorial, Angular 13 Dynamic FormsGroups using Reactive Form Tutorial, Phone (Mobile) Validation Using ReGex in React Js StackBlitz Example, Angular Material 13 Server Side Table Pagination Example, Angular 13 Material Dialog Example Positions, Fullscreen, Events Tutorial, React JS Sticky Fixed Header using On Scroll Event Handler, Vue Bootstrap Date & Time Picker Calender Component Example. But we can easily customize them according to our needs. Thanks for contributing an answer to Stack Overflow! The user service contains a single method for getting all users from the api, I included it to demonstrate accessing a secure api endpoint using a JWT token after logging in to the application, the token is added to the authorization header of the http request in the JWT Interceptor above.. import { Injectable } from '@angular/core'; import { HttpClient } from Console. In this tutorial we discussed how to create a datatable and implement search filter globally and for each column. Sorting columns name are the same with columnDef but yet its not working. To use Quill editor in Angular project we need to install the Angular directive and Quill library by running following NPM commands given below:if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[580,400],'freakyjolly_com-box-4','ezslot_14',606,'0','0'])};__ez_fad_position('div-gpt-ad-freakyjolly_com-box-4-0'); In the angular.json file at the project root, update styles and scripts property array as shown below: To use Quill in the application, open the app.module.ts file and import the QuillModule then add in imports array as shown below: After the installation and configuration part. You can follow our adventures on YouTube, Instagram and Facebook. The data collection is created in the form of a parent-child structure with a modified column definition. This sends the same request as the above but sets the response type to a custom Article interface that defines the expected response properties. What does puncturing in cryptography mean, Make a wide rectangle out of T-Pipes without loops. Other versions available: Angular: Angular 9, 8, 7, 6, 2/5 React: React + Recoil, React Hooks + Redux, React + Redux Vue: Vue 3 + Pinia, Vue 2 + Vuex Next.js: Next.js 11 AngularJS: AngularJS.NET: Blazor WebAssembly In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) const headers = new HttpHeaders({ 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' }), To set or update headers on an existing HttpHeaders object call the set() method, e.g. Tags: To create the editor in a component we just need to add the directive. This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13. Stack Overflow for Teams is moving to its own domain! If the method returns true the route is activated (allowed to proceed), otherwise if the method returns false the route is We and our partners use data for Personalised ads and content, ad and content measurement, audience insights and product development. For that, we need to import the useFiltersand useGlobalFilterfunctions. Facebook Angular 14 Draggable Grid Blocks using angular-gridster2 Tutorial, Angular 13 Dynamic FormsGroups using Reactive Form Tutorial, Phone (Mobile) Validation Using ReGex in React Js StackBlitz Example, Angular Material 13 Server Side Table Pagination Example, Angular 13 Material Dialog Example Positions, Fullscreen, Events Tutorial, React JS Sticky Fixed Header using On Scroll Event Handler, Vue Bootstrap Date & Time Picker Calender Component Example. And despite pagination is set to 5 its showing all the data. In this tutorial, we will learn How to add a Rich Text editor in the Angular application by using a very popular and expert plugin named Quill. How do I simplify/combine these two methods? Tags: We can convert dynamic data into a table using a jsPDF Autotable library which can be converted into a PDF file to download or open in a new browser tab. link Sticky Rows and Columns . In this Angular tutorial, Well be discussing how to develop an Angular 12 application performing CRUD operations having Bootstrap 4 styles. This sends a request to an invalid url on the api then assigns the error to the errorMessage component property and logs the error to the console. Site design / logo 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA. Search fiverr to find help quickly from experienced Angular 10 developers. This sends the same request again with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header. Sometimes a user may need to download the data presented on an application page to be downloaded in a PDF file so this plugin resolves those tasks very easily. Continue with Recommended Cookies. Now render this BasicTableComponent in the App.js function component as shown below: Run React app by hitting $ npm start, it will look like this: Search filters can be added on each column of the Table and single filter for whole table cells. Node: 12.15.0. Angular 9|8 Pagination Example using ngx-pagination in Tables, Angular + Material | How to Install Angular Material in Angular Project, Angular 9|8|7 Material Table Column Width, Text Alignment Customization, Angular | How to Get Dropdown Selected Text using Common Service Method, Angular 10|9 Copy to Clipboard using Material or ngx-clipboard package, Slick Carousel Example using ngx-slick-carousel - Angular 12, Angular 9|8|7 Hide Div on Click Ouside Angular Tutorial, Angular 8|9 Typescript | How to Download PDF/ EXCEL or other files instead of opening in new tab, Reactstrap | Add Bootstrap UI components in React using Reactstrap . This is a simple example of how to implement client-side pagination in Angular 10. Check out the official documentation here. The useTable function provided by react-table takes the columns and data objects and distribute values to properties we will be using inside the table using destructuring. Below is a breakdown of the pieces of code used to implement the alert / toaster notification example in React, you don't need to know the details of how it all works to use the alerts in your project, it's only if you're interested in the nuts and bolts or if you want to modify the code or behaviour. We will discuss all of them with examples here. If you want to make further customisations such as changing the HTML template of the component, I'd recommend just copying the pagination component code into your own custom Angular component, it's only about 60 lines of code and will give complete flexibility to make any changes you like. The jw-paginate package contains the core pagination logic used to paginate any array or list of items in javascript. const headers = new HttpHeaders().set('Authorization', 'Bearer my-token'), Example Angular component at https://stackblitz.com/edit/angular-http-put-examples?file=app/components/put-request-headers.component.ts. Add the HttpClientModule to the imports array of your AppModule like below on lines 3 and 10. Angular 8,9 Rich Text Editor using Ngx-Quill Example Tutorial, Echarts for Angular Charts using ngx-echarts | Tutorial with Examples, Angular 12 Range Slider Example - @angular-slider/NGX-slider Tutorial. Why does the sentence uses a question form, but it is put a period in the end? This is a simple example of how to implement client-side pagination in Angular 10. I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. Tutorial built with Angular 10.0.4. Below is a quick set of examples to show how to send HTTP GET requests from React to a backend API using the axios HTTP client which is available on npm.. Other HTTP examples available: React + Axios: POST, PUT, DELETE React + Fetch: GET, POST, PUT, DELETE Vue + Axios: GET, POST Vue + Fetch: GET, POST, PUT, DELETE Angular: GET, POST, PUT, DELETE Once your account is created, you'll be logged-in to this account. When the productCategories observable is called this.paginator and this.sort are not available as they are inside the ngIf condition. Found footage movie where teens get superpowers after getting struck by lightning? We can easily implement the expand/collapse functionality in tables created using react-table components. I'm a web developer in Sydney Australia and co-founder of Point Blank Development, I've been building websites and web applications in Sydney since 1998.. Other than coding, I'm currently attempting to travel around Australia by motorcycle with my wife Tina, you can follow our adventure on YouTube, Instagram, Facebook and our website TinaAndJason.com.au. Example Angular component at https://stackblitz.com/edit/angular-http-post-examples?file=app/components/post-request-typed.component.ts. For more info see JavaScript - Pure Pagination Logic in Vanilla JS / TypeScript. To view the purposes they believe they have legitimate interest for, or to object to this data processing use the vendor list link below. @MrKhan I just fixed the numbers again, i broke them working on the button rendering. 2. Add the HttpClientModule to the imports array of your AppModule like below on lines 3 and 10. This has been dramatically improved in Xcode 9. app and copy somewhere like ~/Documents. Below is a quick set of examples to show how to send HTTP POST requests from React to a backend API using the axios HTTP client which is available on npm.. Other HTTP examples available: React + Axios: GET, PUT, DELETE React + Fetch: GET, POST, PUT, DELETE Vue + Axios: GET, POST Vue + Fetch: GET, POST, PUT, DELETE Angular: GET, POST, PUT, if you move the if condition inside the table, sorting and pagination should start to work. Other versions available: Angular: Angular 10; In this post we'll go through an example of how to implement JWT authentication with refresh tokens in Angular 9. The below headers are created as a plain javascript object, they can also be created with the HttpHeaders class, e.g. Other than coding, I'm currently attempting to travel around Australia by motorcycle with my wife Tina, you can follow our adventure on YouTube, Instagram, Facebook and our website TinaAndJason.com.au. More Angular Posts. 2. Breakdown of the React Alert / Toaster Notification Code. This sends the same request again with a couple of headers set, the HTTP Authorization header and a custom header My-Custom-Header. Lets get started to implement the jspdf-autotable in our Angular application. This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13. To learn more, see our tips on writing great answers. Below is a breakdown of the pieces of code used to implement the alerts example in Angular 10, you don't need to know all the details of how it works to use the alert module in your project, it's only if you're interested in the nuts and bolts or want to modify the code or behaviour. If you would like to change your settings or withdraw consent at any time, the link to do so is in our privacy policy accessible from our home page. The object passed to the request subscribe() method contains two callback functions, the next() function is called if the request is successful and the error() function is called if the request fails. In single-page applications like Angular, we create pages that are data-driven, where a single page can be used to load different types of data. Why is proving something is NP-complete useful, and where can I use it? This feature requires a pro account With a Pro Account you get: unlimited public and private projects; I'm a web developer in Sydney Australia and co-founder of Point Blank Development, In this React 16 + tutorial, well look into how to implement advanced Datatables in a React application having features like Filter, Pagination, Sorting, Row Column Resizing, Row Expand Collapse and many more.if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[300,250],'freakyjolly_com-box-3','ezslot_13',604,'0','0'])};__ez_fad_position('div-gpt-ad-freakyjolly_com-box-3-0'); Representing data not remained limited to simple HTML tables these days. Console. You can follow our adventures on YouTube, Instagram and Facebook. Just import them in the component as shown below:if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[300,250],'freakyjolly_com-banner-1','ezslot_7',629,'0','0'])};__ez_fad_position('div-gpt-ad-freakyjolly_com-banner-1-0'); Add the createPDF method which will create a table them download it as a PDF document: The complete app.component.ts file will look this: In the App template just a button element to call the createPDF method: That's it now you can run the application by executing $ ng serve --open npm command. Angular 9|8|7 Convert Tables into PDF File using jspdf-autotable Example, Angular 9|8|7 Download PDF Files in Browser Instead of Opening in New Tab Quick Solution, Generate Multipage PDF using Single Canvas of HTML Document using jsPDF, Angular Material File Upload Component Example, How to Export PDF from HTML in Angular 12, Angular 9|8|7 Input File Image/ File Upload to Base64 Tutorial by Example, Angular 12 PDF Viewer Example - ng2-pdf-viewer - Embed PDF Document in Component, Angular 9|8|7 Convert Directive into Shared to use in Feature Modules, How to Create Multipage PDF from HTML Using jsPDF and html2Canvas, Angular 8|9 Typescript | How to Download PDF/ EXCEL or other files instead of opening in new tab, Angular + Material | How to Install Angular Material in Angular Project, Angular 9|8|7 Material Table Column Width, Text Alignment Customization, Scroll Progress Bar in Angular Applications . dnbermjydavk.angular.stackblitz.io. Below is a quick set of examples to show how to send HTTP POST requests from Angular to a backend API. Below is a quick set of examples to show how to send HTTP GET requests from React to a backend API using the axios HTTP client which is available on npm.. Other HTTP examples available: React + Axios: POST, PUT, DELETE React + Fetch: GET, POST, PUT, DELETE Vue + Axios: GET, POST Vue + Fetch: GET, POST, PUT, DELETE Angular: GET, POST, PUT, DELETE This sends an HTTP PUT request to the JSONPlaceholder api which is a fake online REST api that includes a /posts/1 route that responds to PUT requests with the contents of the put request body and the post id property. How many characters/pages could WordStar hold on a typical CP/M machine? Twitter. Angular material provides a wide variety of UI components, Datatables is one of the topmost used components to create a tabular grid with multiple features and functionality support. Atom, The example contains a hard coded array of 150 objects split into 15 pages to demonstrate how the pagination component works. Example Angular component at https://stackblitz.com/edit/angular-http-post-examples?file=app/components/post-request-error-handling.component.ts. This sends an HTTP POST request to the Reqres api which is a fake online REST api that includes a /api/posts route that responds to POST requests with the contents of the post body and an id property. Sorting Not Working Angular Material Design Table, Angular material MatTableDataSource Serverside pagination not working, Content projection inside angular-material table, Sorting is not working on Material Table in Angular. We used Bootstrap styling for Table and other form controls. Angular - HTTP Interceptor to Set Auth Header for API Requests if User Logged In; Angular 11 - CRUD Example with Reactive Forms Install the angular pagination component with the command npm install jw-angular-pagination. In C, why limit || and && to evaluate to booleans? Im having issue with sorting and pagination with angular material table. The JW Angular pagination component is unstyled by default, you can use the below CSS selectors to add your own custom styles. About. For adding emojis use modules as shown below:if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[580,400],'freakyjolly_com-banner-1','ezslot_3',629,'0','0'])};__ez_fad_position('div-gpt-ad-freakyjolly_com-banner-1-0'); Conclusion: Adding rich text editors provides much flexibility to the user to easily format informal in required layouts. This package is beautifully built with some advanced and must have cool features required by users. Clear on reload. Other than coding, I'm currently attempting to travel around Australia by motorcycle with my wife Tina, you can follow our adventure on YouTube, Instagram, Facebook and our website TinaAndJason.com.au. 1. I've been building websites and web applications in Sydney since 1998. JSON, https://stackblitz.com/edit/angular-10-pagination-example, JavaScript - Pure Pagination Logic in Vanilla JS / TypeScript, https://github.com/cornflourblue/jw-angular-pagination/blob/master/projects/jw-pagination/src/lib/jw-pagination.component.ts, https://www.facebook.com/JasonWatmoreBlog, https://www.facebook.com/TinaAndJasonVlog, Angular 10 - Basic HTTP Authentication Tutorial & Example, Angular + Template-Driven Forms - Required Checkbox Example, Angular 10 - Custom Modal Window / Dialog Box, Angular 10 - Facebook Login Tutorial & Example, Angular 10 - Dynamic Reactive Forms Example, Angular 10 - Template-Driven Form Validation Example, Angular 10 - Role Based Authorization Tutorial with Example, Angular - Combined Add/Edit (Create/Update) Form Example, Angular 10 Boilerplate - Email Sign Up with Verification, Authentication & Forgot Password, Angular 10 - JWT Authentication with Refresh Tokens, Angular 10 - User Registration and Login Example & Tutorial, Angular 10 - Fake Backend Example for Backendless Development, Angular + Reactive Forms - Required Checkbox Example, Angular 10 - JWT Authentication Example & Tutorial, Angular 10 - Reactive Forms Validation Example, Angular 10 - Communicating Between Components with Observable & Subject.