Using Static Asset Files in Angular

We already know Angular lets every component define its own private styles. Similar smart features exist for other static asset files like images. In today’s article I will explore this area.

Continue reading

Advertisements

Angular Async Validator

Asynchronous custom validators are useful for doing server side form validation. For example in a user registration page you can check to see if a user ID is already in use. In this tutorial we will build an asynchronous validator and use it in a template driven form. User will be asked to enter a part number for a new product. The validator will check if the part number is already in use.
Continue reading

Binding String and Number to Angular Checkbox

By default Angular and Material checkboxes bind to boolean properties.

export class MyComponent {
    isActive:boolean = true
}
<input type="checkbox" [(ngModel)]="isActive"/>

<mat-checkbox [(ngModel)]="isActive">Check me</mat-checkbox>

But what if you have string or integer numbers indicating a boolean state. For example, we often use “Y”, “N”, 1 and 0 as boolean indicators in the database. Let’s explore a few ways of doing this.

Using Checked and Change Event Binding

We can separately bind the checked property and the change event for the checkbox.

export class MyComponent {
    strValue: String = "Y"
}
<input type="checkbox" 
  [checked]="strValue === 'Y'" 
  (change)="strValue = $event.target.checked ? 'Y' : 'N'"/>

For Material checkbox the $event variable has a different type. You need to directly access the checked property.

export class MyComponent {
    intValue: number = 1
}
<mat-checkbox 
  [checked]="intValue === 1" 
  (change)="intValue = $event.checked ? 1 : 0">Check me
</mat-checkbox>

Using Property Accessor

Another approach is to define a new property in the component that simply maps the String or number values to boolean using property accessors.

export class MyComponent {
    isActive: number = 1

  get isActiveBool() {
    return this.isActive == 1
  }

  set isActiveBool(newValue:boolean) {
    this.isActive = newValue ? 1 : 0
  }
}

This will define a new property called isActiveBool which is just the isActive property converted to a boolean. Now you can bind this new property to a checkbox.


<input type="checkbox" [(ngModel)]="isActiveBool"/>

<mat-checkbox [(ngModel)]="isActiveBool">Check me</mat-checkbox>

I find this second approach cleaner. It also gives you a chance to do more complex mapping from any data type to boolean.

ReactJS from Scratch

ReactJS ships a tool called create-react-app that can generate a new project for you. This gets one started very quickly. But I see several problems with a generated project:

  1. The build process is heavily abstracted. Meaning, it hides how Webpack and Babel are used and configured.
  2. It launches a web server that uses Websocket to automatically refresh a web page when you modify any code.

These may sound like conveniences rather than problems. But neither will be acceptable in most real life projects. We need to be able to configure Webpack and Babel the we like. Also, most likely we will need to go through a regular web server like Nginx etc.

This is also inconvenient for someone who is new to ReactJS and Webpack. So many things are hidden away from you that you think you are not quite learning how the system operates.

In this article I will create a ReactJS project from scratch. We will use Webpack and Babel. We will learn how to configure them.

Continue reading