Angular- Directive to Allow Number Only in Input Textbox

In this post, we will create a directive which will allow only numbers to input textbox. User will not allow to enter any other value, only numbers.

Below is the code of directive which will check the input value and allow if the input value is number-

import { Directive, HostListener } from '@angular/core';

@Directive({ selector: '[allowNumberOnly]' })
export class AllowNumberOnly {
  readonly NUMBER_REGEX = '^[0-9]';
  @HostListener('keypress', ['$event'])
  onKeyPress(event: any): boolean {
    if (!new RegExp(this.NUMBER_REGEX).test(event.key)) {
      return false;
    }
    return true;
  }
}

To use the directive in application, we need to add the directive under declarations array of App Module file.

Basics of Web API- HTTP

Hyer-Text Transfer Protocol(HTTP)

• HTTP(Hyer-Text Transfer Protocol) is a communication protocol on the web that is used to transmit data.
• Extensible using Headers to send/receive extra information
• Stateless, doesn’t maintain state unless using HTTP cookies to maintain the communication session or state.

HTTPS

S stands for secure, which means communication between client and server will happen via a secure channel using SSL\TLS encryption protocol.

TLS is the successor of SSL. TLS v1.3 is the latest version. The minimum recommended version of TLS is TLS v1.2, which the website should use to maintain a secure website.

HTTP Request Methods

1. GET-Used to retrieve data. We can pass the parameter via query string to retrieve data based on the parameter.
2. POST-Used to submit data within request body. This is usually used to pass personal or confidential data.
3. PUT-Used to edit record to resource server without creating new record.
4. DELETE-Used to delete a record in resource server.

Other methods are PATCH, OPTIONS, HEAD, TUNNEL, TRACE.

Content Types

1. Plain-Data will be sent ‘as-is’ in plain text without any encryption, serialization or encoding.
2. json-Data will be serialize in JSON format when sent from POST or PUT request body.
3. form-url-encoded-This is represented as key-value pair of request parameter that are sent as request body.
4. form-data-Used when uploading form fields that includes file upload. It uploads data in multiple parts. Use it when sending binary or large payload.

Angular - Bind Route Info to Component Inputs (Angular16)

In building Angular application,most of the time we use the Router to render different pages for different urls, and based on the url we also load the data based on its path parameters or query parameters.

In the latest version of Angular v16, we will get a new feature that will simplify the process of retrieving route information in the component and make it way easier.Now we can bind route parameters to the corresponding component’s inputs

You can pass the following data to a routing component’s inputs-

1. Route data — resolvers and data properties
2. Path parameters
3. Query parameters

We will be able to pass the route information to the component inputs, so we don’t need to inject the ActivatedRoute service anymore.

Below are some examples-

Route data — resolvers and data properties

// Routes
const routes: Routes = [
  {
    path: 'about',
    component: MyComponentComponent,
    resolve: { elementId: () => 'elementId1' },
  },
];
// Component Code
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponentComponent implements OnInit {
  @Input() elementId: string = ''; //this will come from the resolved data
  ngOnInit(): void {
    console.log(this.elementId); // get elementId here
  }
}

Angular- Required Component Inputs in Angular16

Angular16 has introduced a new feature to define the inputs as required for component and directives. We can now specify that a component or directive requires certain inputs to function properly.

By using this new feature, we can insure that all necessary data is present before the component or directive logic/functionality executed, resulting better code quality, fewer errors. To use it we can set the new required option in our input:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponentComponent {
  @Input({ required: true }) elementId: string;
}

There will be a compilation error if the consumer doesn’t initialize this input:

Default values for lambda expressions - C#12

In C#12, you can now define default values for parameters on lambda expressions. The syntax and rules are the same as adding default values for arguments to any method or local function.For example:

var addWithDefault = (int addTo = 2) => addTo + 1;
addWithDefault(); // 3
addWithDefault(5); // 6

Prior to C# 12 you needed to use a local function or the unwieldy DefaultParameterValue from the System.Runtime.InteropServices namespace to provide a default value for lambda expression parameters.

Using directives for additional types - C#12

C# 12 extends using directive support to any type.Now you can use the using alias directive to alias any type, not just named types. That means you can create semantic aliases for tuple types, array types, pointer types, or other unsafe types. Below are few examples :

using Measurement = (string, int);
using PathOfPoints = int[];
using DatabaseInt = int?;

You can now alias almost any type. You can alias nullable value types, although you cannot alias nullable reference types.

Primary Constructor - C# 12

Primary constructor allows you to add parameters to calss declaration itself and use these values in class body. Promary constructor was introduced for records in C#9. C#12 extends it to all classes and structs.

Enable Preview Version In Visual Studio 2022

To enable the preview version in Visual Studio 2022, follow the below steps-

1. Run the Visual Studio Installer as Adminitrator.
   
2. When installer window open, go to More > Update Settings :
   

Angular- Event Binding

In Angular, events are handled by using the following syntax-

(event name)="event handler method"

For example-

Above, (click) binds the button click event and onShow() statement calls the onShow() method of a component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '',
})
export class AppComponent {
  onShow() {
    console.log('Show button clicked!');
  }
}