DEV Community: Jozsef

When and how to use mergeMap

Jozsef — Sat, 23 Sep 2023 10:53:49 +0000

If a developer uses Angular without knowing the power of RxJS the code can turn into a huge mass very fast.

When the inner observable needs a value from the outer observable, we can and must use mergeMap!

As a result, we not just gonna have nicer and more readable code, but we can follow the async pipe pattern.
It has also performance advantages if the outer event triggers twice then the first execution will be canceled.

With mergeMap

Without mergeMap

I am a Full-stack [Angular, Java] contractor/freelancer developer, if you would like to contact me here is my website !

You can find me on LinkedIn as well.

Subscribe() vs Async Pipes

Jozsef — Fri, 22 Sep 2023 11:37:15 +0000

When working with observables in Angular, it's considered best practice to utilize pipes because they offer a cleaner and more streamlined approach. Subscribing to a stream directly in a component requires us to manually manage the unsubscription process, typically in the ngOnDestroy() lifecycle method. However, when you use the async pipe, Angular automatically handles subscriptions for you, eliminating the need for implementing ngOnDestroy or manually unsubscribing from observables.

It's worth noting that there is an issue when using the subscribe() method directly. When working with the OnPush change detection strategy, subscribing to observables in the ngOnInit() method may not work as expected out of the box.

Although using subscribe() in the template can make the code more readable and understandable, opting for the async pipe is generally more advantageous in terms of performance and helps in avoiding memory leaks.

Async pipe

Subscribe()

I am a Full-stack [Angular, Java] freelancer developer, if you would like to contact me here is my website !

You can find me on LinkedIn as well.

Create simple form with Angular

Jozsef — Fri, 04 Mar 2022 06:39:37 +0000

This article will introduce how to set a simple form in Angular with ReactiveFormsModule.

In order to use ReactiveFormsModule functionalities you need to import ReactiveFormsModule in your module.

FromGroup containes all the input field value and binds those into a single json object. These are key values pair, keys can be accessable from the template through FormGroup instance.
FromControl has two optional paramter, the first one the value of the control and the second is the validators.
FormArray can holds and array of FormControl, its very hand to use when dynamic froms are required in form.

In the template FormGroup and its properties (FormControl, FormArray) can be bindable though formGroup, formControlName, formArryName

This simple demo project can be found under this repo!

Angular Data Bindings

Jozsef — Sat, 12 Feb 2022 15:47:20 +0000

#prerequisite

ng new property-binding-demo
ng g c home

String Interpolation

In Angular, Interpolation is used to display data from component to view (DOM).

The code in your home.component.ts

public appName : string  = 'My first string interpolation';

The home.component.html should look like as follows

<h3>String interpolation</h3>
<p>{{appName}}</p>

Event Binding If there is any action (mouse click or keyboard action) then the event will be raised. We have different ways to bind an event to DOM element.

The home.component.ts has a function which receive an event parameter

public logEvent(event) {
  console.log(event.target)
}

The home.component.html has to call the logEvent() method as follows

<h3>Event Binding</h3>
<button (click)="logEvent($event)">Click ME</button>

Property binding This used to bind the data from property of a component to DOM elements. It is denoted by [].

public userName : string  = 'Bob';

In the home.component.html input element will be initialized with userName value

<h3>Property binding</h3>
<input type="text" [value]="userName">

Class Binding

It helps to create component with dinamic styling.

Define css classes in in home.component.css

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

In home.component.ts declare a propery and bind one of the css class name and create a function which chnages its value.

public colorProperty : string = 'red';

public changeColor() {
    this.colorProperty === 'red' ? this.colorProperty = 'blue' : this.colorProperty ='red'
 }

In home.component.html bind from component to view as below

<h3>Style binding</h3>
<div [style.color]="colorProperty">
  Style binding content
</div>
<button (click)='changeColor()'>Change Color</button>

Two-way Binding

Is a two-way interaction, data flows in both ways (from component to views and views to component).
FormModule do the necessary setup to enable two-way data binding, therefore it is necessary to import.

Create a separate property for twoWayBinding in home.component.ts

 public twoWayBinding : string = 'init';

Update HomeComponent view (home.component.html) as mentioned below

<h3>Two-way data binding</h3>
<input type="text" [(ngModel)]="twoWayBinding"/>
{{twoWayBinding}}

Property is bind to form control ngModeldirective and if you enter any text in the textbox, it will bind to the property.

Integrate Angular 13 with Firebase Auth

Jozsef — Thu, 03 Feb 2022 10:11:54 +0000

@angular/fire version 7.2.0 and Angular 13.2.0 are used !

Create a separate module for auth responsibility, the structure will look like this:

auth.module.ts

make sure that you have the correct credentials in environment.ts and environment.prod.ts

select Project settings and you can find there your web app's Firebase configuration

auth.service.ts

I think it is better to handle observables in Angular than promises, that's why I used rxjs from which create observable from promise, you can read the official docs here

auth.component.ts

You can find the app on this repository

Basics of Angular Lazy Loading

Jozsef — Wed, 02 Feb 2022 09:08:21 +0000

Angular lazy loading means that when the application route loads only those modules will load which is on-demand. If we want to achieve lazy loading it's necessary to break down the application into small separated modules.

It is a very useful built-in angular feature, as the app complexity grows its size is getting bigger and bigger that leads to slow application, especially on mobile!

create application:
ng new lazyloading-demo
create modules
ng g module home
ng g module products

create a separate module for routing paths

const routes: Routes = [
  {path : '' , component : ProductsComponent}
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
  ],
  exports: [RouterModule]
})
export class ProductsRoutingModule { }

import ProductsRoutingModule into products.module.ts and the same thing has to be done for Home module.
Make sure that in routes array has at least one component which point to empty path, that will be the landing page of the module.

const routes: Routes = [
  {path: 'home' , 
     loadChildren : () => import('./home/home.module').
     then(module => module.HomeModule)},
  {path : 'products' , 
    loadChildren : () => import('./products/products.module').
    then(module => module.ProductsModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

When you queryhttp://localhost:4200/home in the network tab you can see that src_app_products_products_module_ts.js loads.

You can find this small demo app on this repository!

Angular Lifecycle Hooks

Jozsef — Mon, 31 Jan 2022 13:33:27 +0000

Angular lifecycle hooks expose lots of events so developers can define the custom initialization of components.

First create a new angular app.

ng new life-cycle-demo

Create the components :
ng g c cmponents/parent
ng g c cmponents/children

In the parent.componet.html template paste the ng-content
<ng-content></ng-content>

In the children.component.html we want to define an event which chnages a property value of a children component
<button (click)="changeText()">Change property value</button>

In the parent.component.ts

export class ParentComponent implements OnChanges,
  OnInit,
  DoCheck,
  AfterContentInit,
  AfterContentChecked,
  AfterViewInit,
  AfterViewChecked {

  constructor() { }

  ngDoCheck(): void {
    console.log("Parent : ngDoCheck()")
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("Parent : ngOnChanges")
  }

  ngAfterViewChecked(): void {
    console.log("Parent : ngAfterViewChecked()")
  }

  ngAfterViewInit(): void {
    console.log('Parent: ngAfterViewInit()')
  }

  ngAfterContentChecked(): void {
    console.log('Parent: ngAfterContentChecked()')
  }

  ngAfterContentInit(): void {
    console.log('Parent: ngAfterContentInit()')
  }

  ngOnInit(): void {
    console.log('Parent: ngOnInit() ')
  }

}

The intrefaces has to be implemented in the children.compoent.ts

export class ChildrenComponent implements OnInit,
  OnChanges,
  DoCheck,
  AfterContentInit,
  AfterContentChecked,
  AfterViewInit,
  AfterViewChecked {

  componentProperty: string = '';

  constructor() { }

  ngDoCheck(): void {
    console.log('Children ngDoCheck()')
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Children ngDoCheck()')
  }

  ngAfterViewChecked(): void {
    console.log('Children ngAfterViewChecked')
  }

  ngAfterViewInit(): void {
    console.log('Children ngAfterViewInit()')
  }

  ngAfterContentChecked(): void {
    console.log('Children ngAfterContentChecked()')
  }

  ngAfterContentInit(): void {
    console.log('Children ngAfterContentInit()')
  }

  ngOnInit(): void {
    console.log('Children ngOnInit()')
  }

  changeText() {
    this.componentProperty = "text changed"
  }

}

In the app.component.html

<app-parent>
  <app-children></app-children>
</app-parent>

The expected output
Parent: ngOnInit()
Parent : ngDoCheck()
Children ngOnInit()
Children ngDoCheck()
Children ngAfterContentInit()
Children ngAfterContentChecked()
Parent: ngAfterContentInit()
Parent: ngAfterContentChecked()
Children ngAfterViewInit()
Children ngAfterViewChecked
Parent: ngAfterViewInit()
Parent : ngAfterViewChecked()

Parent : ngDoCheck()
Children ngDoCheck()
Children ngAfterContentChecked()
Parent: ngAfterContentChecked()
Children ngAfterViewChecked
Parent : ngAfterViewChecked()

If we triger the action from the Children component the

Parent: ngDoCheck,
Children: ngDoCheck,
Children ngAfterContentChecked(),
Parent ngAfterContentChecked(),
Children ngAfterViewChecked,
Parent ngAfterViewChecked

will execute in order.

There is one action that was not listed which is the OnDestroy this executes the last in the order. Normally Programmers use this to clean up resources like Prmoise or Subscriptions.

The most pupular actions are OnDestroy and OnInit.

OnInit runs when a component has fully initialized the developer also can have access to injected properties and it executes only once, and OnChnages and DoCheck execute every change detection. Therefore expensive, heavy code like HTTP calls are placed in the OnInit action.