~/devreads

#angular

15 posts

2 Jun

Michael Li 2 min read

Have you ever wondered if there was an easier way to sort imports automatically in your Angular project? Disorganized imports make code harder to read, slow down code reviews, and cause unnecessary merge conflicts. Sorting them manually requires a lot of effort — what if you could automate it? Introducing simple-import-sort simple-import-sort is an ESLint […] The post How to…

development practiceseslintangular

31 Mar

Sulaiman Bah 4 min read

Recently, I’ve been performing some heavy lifting on my client project in the form of state management. For context, we use Angular on our front end, and need to keep tabs on all data points a user is changing. Our team chose to use NgRx, a state management tool based on React’s Redux package, but […] The post Angular NgRx:…

angularredux

6 Oct 2022

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

Nowadays most applications are developed based on large CSS libraries like Bootstrap, Tailwind CSS, etc.. and sometimes multiple frameworks. But your application components are not using all of the styles and it adds more weight to the application performance. This post will explain the Angular post-build process to remove unused CSS and hidden JavaScript files that enhance the application security…

angularbuildcssjavascriptobfuscate

16 Nov 2021

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

UI automation is the most important part of the CI/CD(continuous integration and continuous delivery) process. Integration testing helps you to avoid manual regression testing and improve the application quality. In this post I will explain how to implement UI automation testing to existing Angular projects using the Cypress tool, this is a great alternative for Protractor. Take a look at…

angularautomationci-cdcypressprojects

20 Dec 2020

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

Nowadays Google Firebase is my most favorite application. This is offering great web solutions like hosting, authentication, storage and database in a simple way. This article explains how to upload images(supports video) into Firebase storage with Ionic and Angular applications. This covers the user authentication part to protect storage uploads and improving default Firebase security rules. Take a look at…

angularfirebasegoogleionicstorage

28 Oct 2020

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

Ionic is a great component framework that can build both iOS and Android apps from the same source code using Capacitor. In this video I have explained how to generate a signed Android release APK version using Ionic application and publishing on Google play store. For this process you need a Google play console subscription that costs $25 for life…

androidangularapkgoogleionic

14 Oct 2020

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

Modern web and mobile user experiences is a worldwide thing. Localization of your application (supporting multiple languages) will help you to reach worldwide people. Angular is offering Internationalization(i18n) plugins to enrich your application with multiple languages. In this post I will discuss the implementation with lazy loading design pattern with supporting dynamic content. Take a quick look at the live…

angularmulti languagetranslatetypescript

19 Aug 2020

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

Developing and hosting your own Angular, React applications has never been easier, but now there are many options like Google Firebase, Heroku and etc. Github Pages is offering some great features with free of cost no credit card required and no bandwidth limitations. Just create a public repository and commit all of your product ready files. It has a custom…

angularcnamednsfreegithub

19 May 2020

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

Are you interested to create and publish NPM packages/libraries to enrich Angular functionality? Take a quick look at this post. You can share solutions with other developers. A simple package can solve many problems and resolve the issue quickly. If you are working with multiple applications? Package approach will help you to solve the components problems easily. In this post…

angularbootstraplibrarynodenpm

11 Mar 2020

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

This article is more about understanding the Event Emitters in Angular and Ionic. Data flow is the most important when you build an application to communicate with components. Event Emitters will help you to even bind using @Input @Output decorators. Here is a simple example to display and update the user profile using Angular Event Emitters. For this demo I…

angularcomponentsevent emittersionicjavascript

1 Nov 2019

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

This post is about displaying the API records with delete and update actions using new Ionic and Angular reactive programming. This is a continuation of Ionic Angular series and it explains to you how to distribute the data between the components using RxJS method like BehaviorSubject. All of the feed API responses/records storing in a reactive object, This help the…

androidangularapiionicios

11 Sept 2019

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

This is a continuation of my previous article creating an Ionic Angular project with welcome and tabs home page. Today’s post explains how to implement login authentication system for your Ionic Angular application with guards and resolvers. It will show you how to log in with a user and store the user data and protect the routes, so it deals…

androidangularapiionicios

27 Aug 2019

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

As I promised to continue the Angular/Ionic project series, as a developer perspective mock server is the most important to progress the development. We should not depend on the production or development API for front-end development. This post is about creating a simple Node Express server with mock JSON object files. You can import the project to any of the…

angularmocknodenodejsreactjs

19 Aug 2019

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

I received lots of tutorial requests from my readers in that most of them asked me, how to use Ionic 5 to create a welcome page with login and signup pages. Ionic updated there code base with latest Angular 8 features. Now we can implement the routes and guards pretty easy way. Ionic is recommending to use Capacitor to generate…

androidangularcapacitorionicios

1 Jul 2019

srinivas.tamada@gmail.com (Srinivas Tamada) 1 min read

Multi-tenants is an architecture concept that can handle multiple projects in a single project container. If you look at popular sites like Nike.com or Mi.com, you will find out the project redirection based on the continent or country region. This post more about understanding the Angular 8 project package configuration, using this how are we leveraging the project for multi-tenant…

angulararchitecturetenanttypescriptweb development