How to validate only gmail in Angular Reactive Form | Example

Angular Reactive Form Validate Only Gmail

You can Easy Validate Email in Angular Reactive Form Below Given code use and It will be help you for you needed. 

 this.testForm=this.formBuilder.group({

      email:['', [Validators.required, Validators.email, Validators.pattern('^.+@gmail.com$')]],

})

TypeScript - Classes - Example - Demo

TypeScript - Classes

Typescript Javascript Classes is object-oriented programming languages like Java and C#, classes are the fundamental entities used to create reusable components. Functionalities are passed down to classes and objects are created from classes. However, until ECMAScript 6 (also known as ECMAScript 2015), this was not the case with JavaScript. JavaScript has been primarily a functional programming language where inheritance is prototype-based. Functions are used to build reusable components. In ECMAScript 6, object-oriented class based approach was introduced. TypeScript introduced classes to avail the benefit of object-oriented techniques like encapsulation and abstraction. The class in TypeScript is compiled to plain JavaScript functions by the TypeScript compiler to work across platforms and browsers.

A class can include the following:
Constructor
Properties
Methods

Typesript Classes Example Below

TypeScript - Interfaces | Example | demo

TypeScript - Interfaces

 
Interface is a structure that defines the contract in your application. It defines the syntax for classes to follow. Classes that are derived from an interface must follow the structure provided by their interface.

 
The TypeScript compiler does not convert interface to JavaScript. It uses interface for type checking. This is also known as "duck typing" or "structural subtyping".
An interface is defined with the keyword interface and it can include properties and method declarations using a function or an arrow function.

1.Interface as Function Type

2.Interface for Array Type

3.Optional Property

4.Read only Properties

You can see all Example Interface Below Demo

TypeScript - Rest Parameters | Example | Demo

TypeScript - Rest Parameters

Typescript Rest Parametes you learned about functions and their parameters. TypeScript introduced rest parameters to accommodate n number of parameters easily.

When the number of parameters that a function will receive is not known or can vary, we can use rest parameters. In JavaScript, this is achieved with the "arguments" variable. However, with TypeScript, we can use the rest parameter denoted by ellipsis ....

We can pass zero or more arguments to the rest parameter. The compiler will create an array of arguments with the rest parameter name provided by us.

Rest Parameters Example

Demo Rest Parameters

TypeScript - Function Overloading | Example | Demo

TypeScript - Function Overloading



TypeScript Function Overloading witch can realy help to overloading function and make good function provides the concept of function overloading. You can have multiple functions with the same name but different parameter types and return type. However, the number of parameters should be the same.


The last function should have the function implementation. Since the return type can be either string or number as per the first two function declarations, we must use compatible parameters and return type as any in the function definition.
Function overloading with different number of parameters and types with same name is not supported

Function Overloading Example Below

Function Overloading Demo

TypeScript - Arrow Functions | Example | Demo

TypeScript - Arrow Functions

The Typescipt Arrow Function is very Import function is ES6 with the arrow function help make gootd coding Fat arrow witch notations are used for anonymous functions i.e for function expressions. They are also called lambda functions in other languages.


The Typescirpt Arrow Function Using fat arrow =>, we dropped the need to use the function keyword. Parameters are passed in the parenthesis (), and the function expression is enclosed within the curly brackets { }.

The Below Give Example Typescript Arrow Function witch can help you for Leanring

Arrow Function Example

TypeScript - Functions | Example | Demo

TypeScript - Functions

The Typescript Functions are the primary blocks of any program. In JavaScript, functions are the most important part since the JavaScript is a functional programming language. With functions, you can implement/mimic the concepts of object-oriented programming like classes, objects, polymorphism, and, abstraction.

 
The Typescript Functions ensure that the program is maintainable and reusable, and organized into readable blocks. While TypeScript provides the concept of classes and modules, functions still are an integral part of the language.

The given below Example you can see how to work Typscript Function

Demo Typscript Function

TypeScript - while Loop | Example | Demo

TypeScript - while Loop
The Typescript while loop is another type of loop that checks for a specified condition before beginning to execute the block of statements. The loop runs until the condition value is met.

The below given Example While loop checking condition

Demo

TypeScript - for Loops | Example | Demo

TypeScript - for Loops TypeScript is types following types below:
1. for loop
2 . for..of loop
3 for..in loop

Let's take Demo For Loop

Example For Typescript Loops

TypeScript - Switch - Example - Demo

TypeScript - Switch - Example - Demo

Type Script Using Switch Example. The switch statement is used to check for multiple values and executes sets of statements for each of those values. A switch statement has one block of code corresponding to each value and can have any number of such blocks. When the match to a value is found, the corresponding block of code is executed.

Example Demo

DEMO

TypeScript - if else | Example | Demo

Here you will be leanr Typescript If Else condition. An if statement can include one or more expressions which return boolean. If the boolean expression evaluates to true, a set of statements is then executed.

Example

Demo If Else

Type Assertion in TypeScript | Example | Demo

Here, you will learn about how TypeScript infers and checks the type of a variable using some internal logic mechanism called Type Assertion.
Type assertion allows you to set the type of a value and tell the compiler not to infer it. This is when you, as a programmer, might have a better understanding of the type of a variable than what TypeScript can infer on its own. Such a situation can occur when you might be porting over code from JavaScript and you may know a more accurate type of the variable than what is currently assigned. It is similar to type casting in other languages like C# and Java. However, unlike C# and Java, there is no runtime effect of type assertion in TypeScript. It is merely a way to let the TypeScript compiler know the type of a variable.

Example Here

Demo

Assertion Demo

Type Inference in TypeScript | Example | Demo

Type Inference in TypeScript
TypeScript is a typed language. However, it is not mandatory to specify the type of a variable. TypeScript infers types of variables when there is no explicit information available in the form of type annotations.
Types are inferred by TypeScript compiler when:
1. Variables are initialized
2. Default values are set for parameters
3. Function return types are determined

Example

Demo

Demo Inference

TypeScript Data Type - Never | Example | Demo

TypeScript Data Type - Never
TypeScript introduced a new type never, which indicates the values that will never occur.
The never type is used when you are sure that something is never going to occur. For example, you write a function which will not return to its end point or always throws an exception.

Example

Demo

Demo

TypeScript Data Type - Void | Example | Demo

TypeScript Data Type - Void

Similar to languages like Java, void is used where there is no data. For example, if a function does not return any value then you can specify void as return type.

Example

Demo:

Demo

TypeScript Data Type - Any | Example | Demo

TypeScript Data Type - Any

TypeScript has type-checking and compile-time checks. However, we do not always have prior knowledge about the type of some variables, especially when there are user-entered values from third party libraries. In such cases, we need a provision that can deal with dynamic content. The Any type comes in handy here.

Example

Demo

Demo

TypeScript - Union | Example | Demo

TypeScript - Union

TypeScript allows us to use more than one data type for a variable or a function parameter. This is called union type.

Example

Demo

Demo

TypeScript Data Type - Enum | Example | Demo

TypeScript Data Type - Enum

Enums or enumerations are a new data type supported in TypeScript. Most object-oriented languages like Java and C# use enums. This is now available in TypeScript too.
In simple words, enums allow us to declare a set of named constants i.e. a collection of related values that can be numeric or string values.
There are three types of enums:
1. Numeric enum
2. String enum
3 Heterogeneous enum

1. Numeric Enum

Numeric enums are number-based enums i.e. they store string values as numbers. Enums can be defined using the keyword enum. Let's say we want to store a set of print media types. The corresponding enum in TypeScript would be:
2 String Enum
String enums are similar to numeric enums, except that the enum values are initialized with string values rather than numeric values.
The benefits of using string enums is that string enums offer better readability. If we were to debug a program, it is easier to read string values rather than numeric values.
3 Heterogeneous Enum
Heterogeneous enums are enums that contain both string and numeric values.

Example

Demo

Demo

TypeScript - Tuples | Example | Demo

TypeScript - Tuples

TypeScript introduced a new data type called Tuple. Tuple can contain two values of different data types.
Consider the following example of number, string and tuple type variables.

Example | Demo

Demo: Demo

TypeScript - Arrays | Example | Demo

An array is a special type of data type which can store multiple values of different data types sequentially using a special syntax.
TypeScript supports arrays, similar to JavaScript. There are two ways to declare an array:

Array Methods

Method	Description
pop()	Removes the last element of the array and return that element
push()	Adds new elements to the array and returns the new array length
sort()	Sorts all the elements of the array
concat()	Joins two arrays and returns the combined result
indexOf()	Returns the index of the first match of a value in the array (-1 if not found)
copyWithin()	Copies a sequence of elements within the array
fill()	Fills the array with a static value from the provided start index to the end index
shift()	Removes and returns the first element of the array
splice()	Adds or removes elements from the array
unshift()	Adds one or more elements to the beginning of the array
includes()	Checks whether the array contains a certain element
join()	Joins all elements of the array into a string
lastIndexOf()	Returns the last index of an element in the array
slice()	Extracts a section of the array and returns the new array
toString()	Returns a string representation of the array
toLocaleString()	Returns a localized string representing the array

Demo Example

TypeScript Data Type - Boolean | Example | Demo

Boolean values are supported by both JavaScript and TypeScript and stored as true/false values.

TypeScript Boolean:

let isOn:boolean = true; let isOff:boolean = true;

Note that, Boolean with an upper case B is different from boolean with a lower case b. Upper case Boolean is an object type whereas lower case boolean is a primitive type. It is always recommended to use boolean, the primitive type in your programs. This is because, while JavaScript coerces an object to its primitive type, the TypeScript type system does not. TypeScript treats it like an object type.

Demo | Example