Recently I’ve started using Docker and have become a huge fan. I’ve mainly used it with the development of my side projects and have come to love the benefits of using it.
When it comes to Docker there are quite a few benefits of but some of the primary reasons to choose Docker is that Docker provides portability, predictability, and scalability for your applications. When containerized, an application can be ported to any system regardless of OS as long as it runs Docker and you can expect the application to run in the same consistent manner on all machines/servers.
Update Angular 15 By default when you generate a new application with Angular 15, the schematic will no longer generate environments automatically for you. The CLI does provide a generate option if you still wish to use environments.
To add enironments to your project simply run ng generate environments --project <project-name>. Prior version of Angular used environment.ts as the development environment and environment.prod.ts for production. With Angular 15, it inverses the naming, environment.
A common string manipulation operation that I do quite often in Angular templates is to truncating long text to specific length with an ellipsis. From what I’ve found there currently isn’t a truncate pipe built into Angular. The closest thing I’ve found is the SlicePipe which could be used in replacment of this pipe but doesn’t have a suffix option.
The code snippet below is my current solution for a truncate pipe with options for length and suffix.
I was working on a side project with a lot of forms and want a simple way to set focus to a specific form control on each page/view when the page/view loads.
The code snippet below is my current solution for this.
import { AfterViewInit, Directive, ElementRef } from '@angular/core'; @Directive({ selector: 'input[fooAutoFocusControl],textarea[fooAutoFocusControl],select[fooAutoFocusControl]' }) export class FooAutoFocusControlDirective implements AfterViewInit { constructor( private _elementRef: ElementRef ) { } ngAfterViewInit(): void { this.
In this post we will take the state store created in the previous post make more redux like. The first thing we need to answer is what is redux?.
According the to offical redux website:
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.&
In simple terms, redux is a pattern to follow to manage global application data which can be shared across multiple components.
Managing State in Angular with Rxjs Managing state can be a challenage in many applications. For larger Angular projects there are libraries to solve this problem that you may have used before to manage your state; NGRX, NGSG, and a few others. These libraries are great options for larger project but can be a little time consuming to use when building small applications. One thing I’ve been looking for is a more simplified pattern for managing state in smaller Angular projects.
In a previous post we created generic crud service that we could extend from in order to provide basic crud operations to an Angluar service. I had received a comment and was ask how I would apply this pattern with pagination. Pagination can be either client side or server side so this is really dependant on how the pagination is implemented.
Since we just created server side pagination, I figured I’d provide an update to the generic crud service and modify it to work with a paginated findAll method.
In our previous post we create a basic Crud API with an endpoint to pull all users from the database. Pulling all users may not not be the best solution especially if millions of rows exist in the users table. A common approach to solving this to use pagination. You can think of pagination as only getting the page of a book that you need rather than getting the whole book.
Prerquisites The following dependencies are required for this project.
NodeJS Angular CLI NestJS CLI Setup This post builds upon our previous post here. You can also clone this Github repository if you prefer to skip the first part.
Creating Our CRUD Endpoints We are going to quickly create endpoints to create, read, update and delete users from our SQLite database. We will also create a “find all” endpoint which will return all users in the database.
One of the new technologies I’ve been very interested in has been the Nest.JS framework. Nest.JS is a wrapper around Express (or Fastify) that provides a ton build in features that would otherwise require some configuration/boilerplate code. In the next few blog post I’m going to build out a very simple CRUD api with support for pagination. We’re also going to use Angular to build a simple table showing our paginated endpoint in use.
