Tech Seeker

In this article, we will render items using angular material card components and then implement 'Search', 'Sorting', and 'Pagination'. Create Angular(v15) Application: To accomplish our demo let's create the Angular(v15) application. Make sure to install the Angular CLI tool into our local machine because it provides easy CLI commands to play with the angular application npm install -g @angular/cli Run the below command to create Angular application ng new name_of_your_project Setup JSON Server(Fake API): Let's set up a fake API by setting up the JSON server on our local machine. Run the below command to install the JSON server globally onto your local system. npm install -g json-server Now go to our angular application and add a command to run the JSON server into the 'package.json' file. Now to invoke the above-added command run the below command in the angular application root folder. npm run json-server After running the above comm

In this article, we are going to implement a CRUD example sample of Angular(v14) using the Angular Material(v14) UI components. Angular: Angular is a framework that can be used to build a single-page application. Angular applications are built with components that make our code simple and clean. Angular components compose of 3 files like TypeScript(*.ts), HTML File(*.html), CSS File(*.css) Components typescript file and HTML file support 2-way binding which means data flow is bi-directional. The component typescript file listens for all HTML events from the HTML file. Create Angular(14) Application: Let's create the Angular(14) application to accomplish our demo. Make sure to install the Angular CLI tool into our local machine because it provides easy CLI commands to play with the angular application. npm install -g @angular/cli Run the below command to create Angular application ng new name_of_your_project While creating the app CLI needs a few inputs from us: (1) Add the

In this article, we will implement a small angular application about item sorting using the angular material drag&drop. Key Notes About Angular Material Drag&Drop: Let's know about a few key things on angular material drag&drop like: DragDropModule load from the library '@angular/cdk/drag-drop' The 'cdkDrag' attribute makes an element draggable. The 'cdkDropList' attribute on an element that surrounds a set of 'cdkDrag' elements groups the draggable into a reorderable collection. So it creates a boundary of the region for dragging. The 'cdkDropListDropped' is an event fired after dipping the item. Create An Angular Application: To accomplish our demo let's create a sample angular application. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Now let's install angular material into our application. Command To Install Angular Material: ng add @angular/mate