Skip to main content

Angular Easily

Search This Blog

Contact Us

Get link
Facebook
Twitter
Pinterest
Email
Other Apps

You can communicate with us at the following address.
Email - 1: vikasratnasarade@gmail.com
Email - 2: vikassarade1@ymail.com

Get link
Facebook
Twitter
Pinterest
Email
Other Apps

Comments

Post a Comment

Popular Posts

Hide-show or add-remove columns dynamically in angular material table

Hi, in any application we mostly show the data in tabular format and user like that data handling, if we provide them multiple options to view the data. like in our one of the previous posts (click here to go to the post) we have seen how to add pagination, searching and sorting etc to the angular material table so the user can use that according to his need. In this post, we are going to add one more feature to our angular material table that is, hide/show columns dynamically or we also can say add/remove columns dynamically. We are going to do that in angular purely, we are not going to install any third-party plugin or library. Let’s do it. [If you have any problem related to the Angular material table please check our following posts: Click here for a simple material table with searching, sorting, and pagination, Click here for inline editing and validation with template-driven forms in the angular material table, Click here for multiple expandable rows in the ang

Angular inline editing and validation with material table and template driven form

Hey guys, i n our angular application, mostly we only display the data in a material table but, nowadays, there are many users who want to edit data in a table itself instead of going on a separate page or popup. S o as an angular developer we must have to provide them a way to do that, and while adding edit functionality in a table we also need to tack care of validation as well. In this post, we are going to see how to do inline editing and validations with angular's material table and we are going to use a template-driven form for the same. Let’s do it step by step. [If you have any problem related to the Angular material table please check our following posts: Click here for a simple material table with searching, sorting, and pagination, Click here for multiple expandable rows in the angular material table, Click here for add/remove columns dynamically in the angular material table, Click here for a table inside a row and multiple paginators in the

Angular material table with searching sorting and pagination

Hey guys, in this post we are going to see how to implement a material table in your angular project. Herewith the material table, we are going to add a few basic features like searching, sorting, and pagination, etc. Let’s do it step by step. [you will get a link to download the project at bottom] [If you have any problem related to the Angular material table please check our following posts: Click here for add - remove columns dynamically in the angular material table, Click here for inline editing and validation with template-driven forms in the angular material table, Click here for multiple expandable rows in the angular material table, Click here for a table inside a row and multiple paginators in the angular material table, Click here for adding custom and common filter/search in the angular material table] At the very first to use the material we have to install angular material and it depends on CDK so we have to install angular CDK as well.

Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js)

Many times, we add multiple dependencies into our angular application and get done our things. Mostly our angular app just runs fine, when we do ng serve. but, sometimes it fails when we try to build using ng build - - prod command. Following is the example of the same. We have added a few packages into our application and it worked fine but when we are trying to build the application, we got the following error. PS D:\Angular-DemoApps\Angular 8 - prime ng> ng build --prod ERROR in ./node_modules/primeng/fesm5/primeng-autocomplete.js Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js): TypeError: Cannot read property 'kind' of undefined

Pop up / Context menu on Right click in Angular

Hey guys, in this tutorial we are going to see how to implement a mouse’s right-click event of any dom element in angular and show context menu on right-click. We are going to use the same project from our blog to do this task. [At the bottom you will get a link to download the project ] Very first let's create the menu content, for that create a menu component Command: ng g c righclickmenu And add a list of menu item into it Here is HTML of

Multiple expandable / collapsible rows in angular material table

Hey guys, in this post we are going to see how to make expandable/collapsible rows with the angular material table. Angular material table already provided us a solution for expandable/collapsible rows but, at a time we can expand only one row. So here we are going to see how to expand/collapse multiple rows at the same time, and very important is without installing any third-party package or tool. Let’s do it step by step. [You can download the project on the link given below at the end of the page] [If you have any problem related to the Angular material table please check our following posts: Click here for a simple material table with searching, sorting, and pagination, Click here for inline editing and validation with template-driven forms in the angular material table, Click here for add/remove columns dynamically in the angular material table, Click here for a table inside a row and multiple paginators in the angular material table] At the HTML side

View/download pdf and excel file in angular using rest API in java spring MVC

Hey guys, in this post we are going to see how to show pdf file In browser and how to download excel and pdf file (we can’t view excel file in the web browser, because a browser is not capable to view excel file). Let’s do it step by step. [At the bottom of this tutorial, you will get a link of the project to download] For this demo, we are going to refer to our same previous example. At very first, here we will create rest API in spring.

Table inside row and Multiple material Paginator's in angular material table

Hey guys, in this post we are going to see how to apply multiple angular material paginators when we are having multiple angular material tables. And very important is, here we are adding tables inside the other table’s row. Last time we saw how to make expandable rows ( click here for expandable rows - example) and in the same example, we are going to add a table inside that expandable row. Let’s do it step by step. [ If you are preparing for an interview please click here - angular interview questions and answers ] [If you have any problem related to the Angular material table please check our following posts: Click here for a simple material table with searching, sorting, and pagination, Click here for inline editing and validation with template-driven forms in the angular material table, Click here for multiple expandable rows in the angular material table, Click here for add remove columns dynamically in the angular material table] Same as the las

Custom filter/search and common filter/search in angular material table

Hi there, while dealing with tabular data (in this post we are going to talk about material table), we must have to provide search functionality to the user otherwise the user might get frustrated to find the intended record. But mostly we provide a common search text box and that it will search for data in the hole table and most importantly in all columns, what if the user wants to search a value in a particular column. So here we are going to see how to add custom filters in the angular material table and very important is, we are not going to install any third-party library. Angular material table already provided you with filter predicates and all, so you might get both codes, for common search and custom search but, they are not going to work with each other. So here we are going to solve this, in this post we are going to implement custom search/filter and common search/filter and they are going to be work with each other. Let us do it. [If you have any problem relate

Dynamic tabs in angular (Lazy loading) with Routing

Hey guys, in this post we are going to see how to create tabs dynamically in which each tab will contain data from each component. There are many ways to create tab structure, in this post we are going to focus on lazy-loaded component, which means all components that will act as a tab will be loaded in lazily with help of routing. Let’s do it step by step. If you are not interested in lazy loading and you want tabs with simple selector please click here to visit post tabs with eager loading [at the bottom of the post you will get the link to download the project] [ If you are preparing for an interview please click here - angular interview questions and answers ] At very first, install angular material and angular cdk to support material. Following is the installation command and description.

Powered by Blogger