How to dynamically instantiate a directive with class name in angular?

Angular framework allows us to create component dynamically, But not directives, I posted an article earlier on how to add directives dynamically In this post, I am going to walk through an advanced use-case where we need to instantiate and attach directives dynamically. Let’s take a situation where we have an inline editable data-table to update product details like description, category, price, and inventory. The business requirement is to have a visual indicator for an Read more…

How to block route component UI based on user role in angular?

I came across a situation in angular application where user should be restricted to edit/modify fields in the page based on user role. I like to share the idea I implemented. I hope it will be really helpful for some of you. I am gonna take this below screen as an example, Let’s say we have 3 tab contents are loaded via routes in User Settings page. Personal Detail Tab Contact Detail Tab Payment Detail Read more…

Caching Http Request with custom decorator @MatchUrl in angular?

In this article we are going to learn about 3 topics in angular / typescript Simple Caching Http Interceptor Custom Decorators Caching is more often a good technique to improve application performance. We are going to cache Http response for performance optimization using angular HTTP Interceptors. Simple Caching Service Let’s created a simple angular service, with put() method to store response in Map and get() method to retrieve response from Map. I am using request Read more…

How to submit angular form when button is outside the form tag?

In modern web application User experience is top most priority, many UX design would be more challenging to achieve without compromising coding standards and validation. I like to share one of the design I came across and the solution I applied. Here is multi tab design, here user information like personal detail, contact detail & payment details are folded into the tab. Instead of showing all the information in one single long page. Here you Read more…

How to create ReactApp using npx command and tools?

Create & Start React App We are going to learn how to create react app using Node Package Runner. In short npx is the command for node package runner npx command is available in node version 5.x onwards, please make sure you have Node.js & npm installed globally. If you have not installed, please visit this post on how to install node-js Open terminal if you are using Mac or command prompt if you are Read more…

How to show required fields error on reactive form submit in angular 2/4/6?

Angular provides couple of ways to bind validation to form elements. One way is using ngModel directives and it’s applicable for template driven forms. Next way is using FormControl or FormGroup directives and its applicable for reactive forms. We are going to learn here how to show validation error message for the required fields in reactive form when user hit submit button without touching any fields in the form. Reactive form validation examples available in the internet Read more…

How to add directive dynamically in angular 2/4/6?

Many of angular developers who has experience in angularJs would be familar of adding directives dynamically using $compile service. If you are expecting the same feature in angular framework, then simple answer is NO Angular doesn’t expose $compile service to recompile your template and when you add attribute to DOM elements, angular wouldn’t recognize even though attribute is part of angular directive. There are few workaround to add directive dynamically, Let me walk through those Read more…