What is .NET Standard

.Net Standard is a set of specifications / APIs which is to be followed by all .Net implementations like .Net Framework, .Net Core etc. The specifications are set with the intention to bring in uniformity in .Net ecosystem. .Net specification also enables developers to produce portal libraries which are compatible with various .Net implementations which follow the same .Net Standard.

What's new in .Net Core 3.0

The .Net Core preview 1 version was released in Dec’ 2018. One of the major enhancements in this version of .Net Core is the support for Windows & WPF applications. Additionally .Net Core also brings enhancements to the way the applications are packaged and shared. Enhancements for faster JSON processing using Utf8JsonReader. Finally .NET Core 3.0 implements .NET Standard 2.1.

Let us see each of the new features of .Net Core 3.0 in detail

What's new in .Net Core 2.2

Similar to .Net Core 2.1, the .Net Core 2.2 version also includes performance enhancements, additionally it adds enhancements to event handling, runtime services, JIT compiler and application development enhancements.

What's new in .Net Core 2.1

.Net Core 2.1 mainly focus on enhancing performance both build and execution performance, in addition it also added more support to the tools library by adding more commands and global tool commands. Along with .Net Core 2.1, Entity Framework Core 2.1 was also released which added a lot of interesting featured to EF Core. Let us now look into the new features of .Net Core 2.1 in detail.

What’s New in .Net Core 2.0

.Net Core 2.0 is the 2^nd Major version of .Net Core released in August 2017, it was released along with Asp.Net 2.0 and Entity Framework 2.0. .Net Core 2.0 brings some improvements like tooling support, language support, support for .Net Standard 2.0, Side-by-side support for .NET Core SDKs, better integration with Visual Studio etc. In this post we shall see each of these in detail.

.Net Core version History

The first version of .Net Core was released in June 2016, from then on .Net core has been receiving new versions and feature additions from time-to-time. I this post we shall see some of the Major version released in .Net Core and a brief overview of features released in each version of .Net core.

.Net vs .Net Core

.Net Core is the new .Net framework released by Microsoft, it has many advantages over the previous version of .Net Framework. In this post let us compare the features of the original .Net framework with the .Net Core.

Advantages of .Net Core

.Net Core is the new .Net framework from Microsoft, the focus of .Net Core is to provide a light weight, faster platform for developing applications which have cross platform support. Microsoft is focusing more on .Net Core, hence we can expect more feature additions and developments to happen in .Net core in the years to come. Following are some of the advantages of .Net Core over the previous version of .Net

What is .Net Core?

.Net Core is an open-source development platform developed and maintained by Microsoft. The main idea behind creation of .Net Core is cross platform compatibility. The older versions of .Net framework can execute only in Windows environment, .Net core can execute in Windows, Linux & Mac Operating systems.

Using .Net core we can create console applications, class libraries and Web (MVC & Web API) applications. .Net core is a lighter version compared to the previous version of .Net hence is supports limited project types at this point. The lighter version makes it easier to ship it with applications developed in .Net core, it also supports deployment using Dockers.

Angular Pipes

Angular Pipes

Angular Pipes Angular built-in pipes Angular built-in pipes examples Angular Chaining pipes Angular Custom Pipes Pure vs impure pipes Angular Custom Pipes example

Angular Directives

Angular Directives

What is an Angular Directive Types of Angular Directives Angular Custom Directives Custom Attribute Directive example Passing values to Custom Attribute Directive Angular - ElementRef Angular - ViewChild Decorator Custom Structural Directive Custom Structural Directive example

What are Web Components

Web Components are a set of browser standards which allows us to create custom HTML elements and use them in HTML pages. Web Components use 3 technologies to create these reusable elements.

Custom Elements – JavaScript class which contains the Element’s definition and behavior.

Shadow DOM – Used to render to custom component separately without affecting the actual DOM.
HTML Templates – The

Web Component can be created by first creating a class with the actual component implementation. Once the class is created use CustomElementRegistry.define() register the custom element. 

What are Angular Elements

Angular Elements is an interesting new feature introduced in Angular 6. Angular Elements allows us to create Angular Components, package them and allows us to re-use the components in non-Angular environments like jQuery, HTML etc.

Angular Elements are angular components which are packaged into Custom Elements. Custom Elements allows us to create custom HTML tags which have their pre-defined functionality, these custom tags can be used in any HTML page. Custom Elements is a Web Component feature which helps us create custom elements and reuse them in HTML pages.

Angular Custom Pipes example

Angular provides built-in pipes like date, uppercase, etc to format/transform values. Angular also allows us to create custom pipes for situations where we cannot use the built-in pipes. Custom pipes are created using the @Pipe decorator. Pipes are classes which implement PipeTransform and use the transform() method to provide the transformation logic. The trasform() method takes the input value and pipe parameter values as its arguments.

We can use the ng generate pipe command to create custom pipes. In the following example we will create a simple squareNumber pipe which will take the input value and return the square value of the number. Let us start by create a new custom pipe using the following command.

Pure vs Impure pipes

Angular pipes execute based on changes detected to the input value to which the pipe is applied. Based on how the changes should be detected there are 2 types of pipes Pure and Impure pipes.

By default pipes are pure in Angular. Pure pipes get executed when there is a change to the input value to the pipe. These changes include changes to primitive types like String, Number, Boolean etc, and changes to object references i.e when assignment happens to object, arrays etc.

Note that pure pipes get triggered only when the reference of the object/array is changed. Pure pipes will not get triggered when we add an element to an existing array (or) when we update a property of an input object, but will get executed when the input array is assigned with a different array or when an input object is assigned with a different object. When we add an element to the existing array the reference remains the same hence the pipe will not get executed.

Impure pipes get executed for every change detected to the component like a key press, mouse move etc. Impure pipes get executed more often when compared to pure pipes. Hence impure pipes should be implemented with greater care.

In some cases pure pipes might not solve the need, for example if we want a pipe to get executed based on addition/removal of elements from an array, then a pure pipe will not work, in these cases we should develop an impure pipe.

Angular Custom Pipes

In the previous posts we saw about the built-in pipes in Angular, their syntax, usage, chaining etc. Angular also provides us the ability to create our own custom pipes to suite our requirement. When we cannot use any of the built-in pipes for our requirement we can create a custom pipe. Also for larger applications, create custom pipes helps in reusing code/functionality.

Custom pipes are nothing but classes like Components and custom Directives, Custom pipe classes use the @Pipe decorator. The pipe class implements the PipeTransform interface's transform method that accepts an input value followed by optional parameters and returns the transformed value.

While creating the custom pipe class, use the @Pipe decorator and specify the name of the custom pipe as follows.

Angular chaining pipes

Chaining pipes is Angular nothing but arranging more than one pipe in sequence so that the input value gets transformed in stages through the various pipes chained together. The successive pipes in the chain should be separated by a pipe symbol.

{{<input value> | <pipe 1> | <pipe 2> | . . . | <pipe n>}}

While chaining pipes we can also specify parameters for any of the pipes in the chain, in which case the pipe and its parameter are separated by a colon (:) symbol. Parameters are optional, also we can selectively specify parameters for certain pipes in the chain and ignore for other pipes.

 {{<input value> | <pipe 1> : <parameter> | <pipe 2> | . . . | <pipe n> <parameter>}}

In the following example we will use a date pipe, followed by an uppercase pipe. The input value will be a date object which holds the current date.

Angular built-in pipes examples

Angular provides different types of built-in pipes like DatePipe, CurrencyPipe, Upper/Lower/Title case pipes etc. In this post we shall see examples of some of the commonly used built-in pipes.

DatePipe
DatePipe is used format date and time, it takes a Date object followed by a date pipe, followed by a formatting parameter which tells how the date should be formatted

<Date Object> | date : <format>

Following are some of the sample for DatePipe formatting.

Pipe	Output
{{ currentDate | date: 'short' }}	11/27/18, 11:56 PM
{{ currentDate | date: 'medium' }}	Nov 27, 2018, 11:58:42 PM
{{ currentDate | date: 'long' }}	November 27, 2018 at 11:58:08 PM GMT-5
{{ currentDate | date: 'shortDate' }}	11/28/18
{{ currentDate | date: 'mediumDate' }}	Nov 28, 2018
{{ currentDate | date: 'longDate' }}	November 28, 2018
{{ currentDate | date: 'shortTime' }}	12:02 AM
{{ currentDate | date: 'mediumTime' }}	12:02:05 AM
{{ currentDate | date: 'longTime' }}	12:02:05 AM GMT-5

CurrencyPipe
The CurrencyPipe transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

CurrencyPipe takes a number as input, followed by the currency pipe and a parameter to specify the required format.

<number> | currency : <format parameters>

Following are some of the sample for CurrencyPipe formatting.

Pipe	Output
{{ 1500.45 | currency }}	$1,500.45
{{ 1500.45 | currency : 'USD' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'symbol' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'code' }}	USD1,500.45

Angular built-in pipes

Angular pipes provide us an important feature of formatting / transforming data to a desired way in the view.

For example date formatting is one common requirement which we need in all applications. Angular provide different Date Pipes like shortDate, longDate, fullTime etc which come in handy to display different formats of dates in the UI.

Angular Pipes

Pipes in Angular are used to format / transform data and display it in the UI. Pipes are not new in Angular, for those familiar with AngularJS can connect the same concept in Angular. The very basic pipe takes one input followed by the pipe | symbol which is again followed by the type of pipe to be used for transformation.

<input> | <pipe type>

Pipes can have additional parameters to add more formatting / specification on how the transformation should be done, parameters are followed by the pipe type with a colon : symbol

<input> | <pipe type> : <parameter>

Pipes can have multiple parameters chained in sequence, each parameter in the chain is separated with a colon : symbol

<input> | <pipe type> : <parameter1> : <parameter2> . . . : <parameterN>

Custom Structural Directive example

Structural directive in Angular manipulate the DOM by adding/removing a set of elements. Attribute directives on the other hand decorate the element with more content/features. Structural directives can be identified with the * mark in front of them. In this example we will create a simple structural directive *ngShow which will show/hide the embedded content based on a condition. Let us start by creating a new directive using the following ng command.

Custom Structural Directive

Structural directive in Angular alter the DOM by adding/removing elements to the DOM based on specific conditions.  Attribute directives on the other hand can be used to app specific properties / styles to the element which is using the directive. We saw the example of the highliter Attribute directive which added a background color for highlighting the element which uses the directive.

ngIf is a built-in structural directive, based on the condition/expression we pass to this directive we can show/hide a block of elements in the DOM. Structural directives are represented with a * symbol before the directing like *ngIf.

Passing values to Custom Attribute Directive

In the Highlighter directive custom attribute directive example we saw how to create a custom attribute directive and use it in a component. In the Highlighter directive example we just had to add the directive name in the HTML element and that’s it the directive used ElementRef to get a handle of the DOM element and set the background color of the element.

There are cases where we want to pass some values from the HTML element to the directive to perform more meaningful operations in the directive. To pass values to the Directive class we have to declare the parameters as @Input in the directive class as follows.

export class ExpValidatorDirective implements OnChanges  {
  @Input() expression: string
  ...
}

And when using the directive in the Component, we can pass values to the directive like properties as follows.

<span expValidator [expression]="value to be passed to the Directive"> </span>

In the following example we will create an Expression validator directive, this directive will take 2 parameters the first one is a regular expression and the second one is the value to evaluate. 

Angular – ViewChild Decorator

The ViewChild decorator in Angular is used to query DOM elements in a Template or Directive or a Child component.

Accessing DOM elements can be done by adding a #reference to the element in the template and by using the ViewChild decorator in the component to get a handle to the element. The reference to the element will be available in the component only after the view initialization is completed, hence we can use this handle in the ngAfterViewInit lifecycle hook.

The following sample adds a reference #refInput to the template, and uses the reference to access the DOM element in the component.

Angular – ElementRef

Angular provides different ways to access the DOM elements directly in the component / directive instance. If you are familiar with react you can think of something similar to refs in react which provides direct access to DOM elements.

ElementRef is one of the options provided in Angular to access DOM elements. ElementRef is bound to a single element and allows us to reference that element in the component class and alter the element. Angular also provides reference options like TemplateRef, ViewRef, ComponentRef and ViewContainerRef to reference DOM elements.

ElementRef comes in handy when we create custom directives, using ElementRef we can get a handle to the DOM element which uses the directive. Using the handle we can get/set properties from the DOM element.

Using ElementRef to access a DOM element directly is not a recommended approach and should be avoided if possible. Within a single component using ElementRef can be replaced with using model binding etc.

Custom Attribute Directive example

Custom Attribute directives can be attached to HTML elements like input, span etc to provide more features / functionalities to the element. Custom directives can be created using the ng generate directive command. Similar to components which use the @Component decorator, a directive uses the @Directive decorator. The directive class can implement the life-cycle hooks and alter the bahaviour of the directives.

In the following example let us create a very simple Highlighter directive which can be used in a label/span tag and will highlight the label with a color. Let us begin by creating a new directive using the ng generate command as follows.

Angular Custom Directives

Directives in angular are special notations which allows us to extend the behavior of DOM elements in the view template. Like components directives also have a selector and used in the view template to extend the functionality of HTML tags. When the Angular compiler finds a directive in the view template it executes the class behind the directive and modifies the DOM accordingly.

Angular provides built-in directives like ngIf, ngFor etc, apart from these we can also define our own custom directives and use them in the view template.

Custom directives can be created using the ng generate directive command as follows.

Types of Angular Directives

Angular has 3 different types of directives

       1.       Component Directive 

       2.       Structural Directive &

       3.       Attribute Directive

What is an Angular Directive

Directives in angular are special notations which allows us to extend the behavior of DOM elements in the view template. For example the ngFor is a built-in Angular directives, the ngFor directive is used to repeat a set of HTML elements for a predefined number of times thereby creating a table/list structure in the view template.

Directives are not totally new to the Angular world, we had directives like ng-repeat in AngularJS which did the same thing as ngFor. Since Angular has evolved from AngularJS, the Directives structure and templates have also evolved with it since Angular 2+

Directives are classes declared using @Directive. Directives also have different life-cycle hooks which we can implement to alter the behavior of the Directives.

A new directive can be created using the following CLI command.

ng generate directive

Angular Lifecycle Hooks

Angular Lifecycle Hooks

What are Lifecycle Hooks Lifecycle hooks of an Angular Component ngOnChanges lifecycle hook ngOnInit lifecycle hook ngDoCheck lifecycle hook ngOnDestroy

ngOnDestroy lifecycle hook

The ngOnDestroy lifecycle hook gets executed just before Angular destroys the directive/component. Use this event to unsubscribe Observables and detach event handlers to avoid memory leaks.  It is the perfect place to clean the component. Let us see on how to use this lifecycle hook with a simple example.

Similar to our ngOnOnit example, we have a service call using an observable to make a http ajax call to get data from a service, in this example we will use the ngOnDestroy hook to unsubscribe the observable and do a cleanup when the component in unloaded.

ngDoCheck lifecycle hook

The ngDoCheck lifecycle hook gets executed when Angular runs the change detection process. ngOnChanges also gets executed when changes are detected the difference is that ngOnChanges() detects changes for those properties which are passed by value. ngDoCheck() detects changes for those properties also which are passed by reference such as arrays. For performance reasons OnChanges does not fire when the input property is an array/object, in these cases we can use ngDoCheck to perform our own custom change detection.

Let us see how this works with a simple example. We will extend the example which we used for ngOnChanges, we will add one more @Input property to the child component, this time we will add an object instead of a string so that we can see that ngDoCheck gets triggered but not ngOnChanges when the object is changed.

ngOnInit lifecycle hook

The ngOnInt lifecycle hook is executed when the component is initialized, this event can be used to initialize data required by the component. The most common use of this event is to make ajax/api calls to fetch data required to be populated in the component. We can also use this event to initialize properties of the component. This hook gets executed after ngOnChanges() and before any child components are initialized.

Let us see how this works with a simple example. In this example we use the ngOnInit() event to call a service method which uses an Observable to get API data from a service. The response data is stored in a userList object, which can be rendered in the component UI.

ngOnChanges lifecycle hook

The ngOnChanges lifecycle hook is executed when any of the components data-bound input properties are changed. Let us see how this works with a simple example.

We have a parent component which has a nested child component. The parent component has a property “message”, the component also has a button on click of which we change the text of the message property in the button’s click handler. We embed a child component and pass the message as an @Input property to the child component. When we click the button in the parent component the message property changes and hence the value passed in the @Input property will also change, this should trigger the ngOnChanges lifecycle hook in the child component.

Lifecycle hooks of an Angular Component

The following are the lifecycle hooks of an Angular component/directive. These life cycle hooks are executed in the order listed below.

What are Lifecycle Hooks?

An Angular component goes through different stages when it is initialized, changes and destroyed these stages are called lifecycle hooks. These lifecycle hooks helps us interact with the components and its properties through the various stages before it is rendered in the browser, we can make use of these lifecycle hooks to alter the behavior of the component. The constructor is the first method to be executed before any of the lifecycle hook is executed.

At a high level Angular application processing consists of the following 3 stages.

Angular Modules

Angular Modules

What are Angular Modules Feature Modules Feature Module example in Angular Types of Feature Modules Eager, Lazy and Preloading modules in Angular Eager Loading module example in Angular Lazy loading modules in Angular Lazy Loading module example Preloading modules in Angular

Binding in Angular 6

Binding in Angular 6

What is Binding in Angular Types of Binding in Angular Interpolation in Angular Property Binding Event Binding Two way binding

Angular Basic Examples

Angular Basic Examples

HelloWorld example in Angular 6 Service example in Angular 6 Promise example in Angular 6 Observable example in Angular 6 Child component example in Angular 6 Input property example in Angular 6 Output property example in Angular 6 Routing example in Angular 6 Route Guard example in Angular 6

Angular Overview

Angular Overview

What is Angular? Advantages of Angular Angular version History Angular 1x vs Angular 2+ What's new in Angular 4 What's new in Angular 5 What's new in Angular 6 What's new in Angular 7 What's new in Angular 8 What's new in Angular 9 What's new in Angular 10 Angular AOT Compiler JIT vs AOT compiler in Angular Angular Routing Angular Route Guards What are Observables RxJS Observables Observables in Angular Input properties in Angular Output properties in Angular Angular Universal

Preloading modules in Angular

We saw different ways of loading modules in an Angular Application

Eager loading
Laze Loading &

Pre Loading

Lazy Loading module example

Let us see how Lazy loading is implemented using a simple example. Let us start with creating a new Angular application using the ng new command as follows.

ng new LazyLoadApp -app --routing

Lazy loading modules in Angular

Lazy loading refers to loading modules with a delay, it is suitable for medium to larger applications where the number of dependent modules are more and loading all of them during the initial load is not feasible. In lazy loading each route is mapped to a module, but the module is not loaded till the route is invoked. Initial loading of the application will be quick since only the root module gets loaded when the application loads in the browser.

To implement Lazy Loading we need a root module and a one or more feature modules. In the routing configuration of the route module we map each route to one of the feature modules, when the route is invoked the corresponding feature module is loaded dynamically and rendered in the browser.

What’s new in Angular 7

Angular 7 was released in October’ 2018.  Angular 7 provides new cli prompts which creating new angular objects like Components, Services etc.

For example when we use ng new command will prompt if the user wants to add routing, and provide options for different types of routing. The command ng add @angular/material will prompt the user if they want to include ng add @angular/material

Angular Universal

Angular Universal is a concept which enables server side rendering (SSR) of Angular applications. By default Angular applications are executed in the browser and rendered to the user. With server side rendering the Angular application is compiled into HTML in the server side and sent to the browser as HTML this enables quick rendering of the page in the browser.

Usually the server side rendering is used to render the first page of a website so that the user does not have to wait long once he hits the URL in the browser. Once the first page is rendered to the user, the Angular application gets downloaded to the browser and the subsequent requests will be server by processing the Angular application. Without server side rendering the user has to wait for the Application to be downloaded and processed in the client side before he sees the first page.

Observables in Angular

We saw that are a way of implementing asynchronous streaming operations, where an observable observables can emit multiple values to its subscribers. 

Angular used observables internally for various features like EventEmitters, Http service to implement Ajax calls, and in the routing module to handle route requests.

Angular provides an EventEmitter class that is used when publishing values from a component through the @Output() decorator. EventEmitter extends Observable, adding an emit() method so it can send arbitrary values.

Angular’s HttpClient returns observables from HTTP method calls. Previously we were using promises to implement ajax calls, Angular uses Observables by default.

Router.events provides events as observables. You can use the filter() operator from RxJS to look for events of interest, and subscribe to them in order to make decisions based on the sequence of events in the navigation process.

Below is a sample code implementation of using observables in Angular services to make Ajax calls, and the component code to subscribe and use the data from the observable.

RxJS Observables

RxJS stands for Reactive Extension for JavaScript. As the name implied RxJS is used to implement reactive programming in JavaScript. Reactive programming deals with implementing asynchronous streams. RxJS provides an implementation of Observable type which is used in Angular to implement a producer – subscriber pattern.

An observable is a function that produces a stream of values and emits it to its subscribers over time. When you subscribe to an observable, you are an observer. Observer receive the emitted values.

Observables can emit 3 types of notifications

next – To emit the next value in the list
complete – When the observable is done with emitting all the values
error – When an error occurred in the observable.

We can understand how the observables and observer work with a simple example as follows.

What are Observables

Observables provide a new way of passing data asynchronously between a publisher and a subscriber. Observables can be used to pass multiple values from a publisher to its subscribers over time.

A publisher creates an instance of Observable and defines a subscribe() function. When a subscriber subscribes to the publisher this function will get executed. The function will not get executed till a subscriber subscribers.

Observables are like an array of items which are delivered to the subscribers over a period of time. Angular uses observables internally in its event system and in the Http service. Observables are not built into Angular, instead Angular uses a library RxJs to implement observables.

Promises can also be used to make asynchronous Http calls. The advantage of observables over promises is that promise can deliver only one value, while observables can deliver a list of values over time. Also promises cannot be cancelled once initiated, while observables can be cancelled at any time.

Angular Routing

Routing in Angular is used to load different components based on the route selected by the user. Routing is essential for medium to larger size applications since we cannot load all the components in a single view.

If you have worked on MVC applications you know that there is a route handler which parses the request route and redirect to the corresponding view. Angular Routing is similar the Routing module handles the request route and loads the corresponding component.

The routing services in Angular are present in the package @angular/router, we need to import RouterModule, Routes from this package to implement routing in Angular.

JIT vs AOT compiler in Angular

Angular applications consists of components and service classes written in TypeScript and HTML templates. Browsers cannot understand TypeScript hence they need to be compiled into JavaScript.

Angular provides 2 types of compilers for this compiling process.

1. Just-In-Time (JIT) compiler.
2. Ahead-of-Time (AOT) compiler

Angular AOT Compiler

AOT stands for Ahead of Time. AOT compiler helps pre-compile Angular applications so that they can be rendered faster in the browser.

We know that Angular applications consists of components and service classes written in TypeScript and HTML templates. Browsers cannot understand TypeScript hence they need to be compiled into JavaScript.

Angular provides 2 types of compilers for this compiling process.

Eager loading Module example in Angular 6

Eager loading is the default type of module loading in Angular, this approach is suitable for smaller applications where all the dependent modules are loaded initially when the application is loaded in the browser.

In eager loading we import all the dependent components into the main module and map the components to different routes in the module routing. When a specific route is invoked the corresponding component is loaded in the root component.

This example is similar to the one which we saw in the Routing example. We import 2 components About & Contact in the application module and map them in the modules routing configuration.

Eager, Lazy and Preloading modules in Angular

In the previous posts we have seen about Feature modules which are added to the root module for better modularity and maintainability of the Angular applications. Depending on the need there are 3 different ways in which modules can be loaded in an Angular application.

Eager loading
Laze loading &
Preloading

Types of Feature Modules

Feature Modules are additional modules which can be added to the root module for better modularity and maintainability of the Angular applications. Feature modules also help improving the performance of larger applications using lazy loading where only the root module is loaded initially other modules are loaded on demand thereby improving performance.

There are 6 different types of feature modules in Angular, they are.

Feature Modules in Angular

Feature Modules are additional modules which can be added to the root module for better modularity and maintainability of the Angular applications. As the application grows it becomes difficult to maintain all the components, services etc in a single root module, hence we organize the components into sub-modules called Feature Modules and hook them to the root module.

The feature modules should be included in the imports[] section of the root module so that they can be loaded when required. Once we add the feature modules in the import list, we render the components in the feature module in the root modules components by embedding the feature module component’s selector tags anywhere in the root modules components.

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule, myFeatureModule],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


<!-- Main comonent template -->

<app-feature-component></app-feature-component>

Feature Module example in Angular

Feature Modules are additional modules which can be added to the root module for better modularity and maintainability of the Angular applications. As the application grows it becomes difficult to maintain all the components, services etc in a single root module, hence we organize the components into sub-modules called Feature Modules and hook them to the root module.

In this example let us see how to create a FeatureModule, import it in the root module and render the contents of the FeatureModule components in the root modules components.

What are Angular Modules

In Angular Modules are the one which combine the various units like components, service, directives etc into a full application. Every Angular application should have at least one Module called the root module which binds the units together and bootstraps the application. Larger applications can have additional modules for better modularity and maintainability.

Angular modules are classes decorated with the @NgModule decorator. The following are some of the important properties declared while creating an Angular Module.

Two way binding in Angular

Two way binding is nothing but the ngModel which we used in AngularJS. As the name indicates two-way binding binds changes in the view to the model and any changes in the model to the view.

Two way binding is represented with a combination of square and curly braces in Angular [(ngModel)]. The property to be bound follows the [()] symbol as follows.

[(ngModel)] = 'productName'

Let us understand two way binding with a simple example, we have a textbox in the view whose value is bound using two-way binding to a property in the component myValue. When the component initializes the value set in the component class will get displayed in the textbox, and when the user changes the value in the textbox the change is reflected in the model, we will show this by displaying the value of property myValue in a label using interpolation.

Event Binding in Angular

Event binding is one-way binding in Angular from the view to the component class. 

Event binding is used to handle events which arise out of the controls in the view, like button click event, textbox blur event etc. 

Event binding in Angular is represented using a set of braces (). The event to be triggered is placed inside the braces like (click), and the handling function comes after the = sign, as follows. 
(click)="clickHandler()"

Let us understand event binding with a simple example, we have a button in the view whose click event is bound to the handler function clickHandler(), in the hander function we set the property clickMessage which will get displayed in the view as interpolation.

app.component.ts
import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor() { }

  clickMessage ='';

  clickHandler() {

    this.clickMessage = 'You clicked the Button.';

  }

}
app.component.html
<div<

  <input type="button" (click)='clickHandler()' value="Click Me"<

  {{clickMessage}}

</div<

In the view we tie the buttons click event with the event handler function clickHandler. In the event handler function we set the clickMessage property, and this gets displayed in the view as an interpolation. The output is as follows. 

Property Binding in Angular

Property binding is one-way binding in Angular from the component class to the view template. Property binding is similar to interpolations but there are few differences in the way we bind them to the view.

Property binding is mostly used to assign values to HTML tags, for example we can use property binding to assign the source URL of an image tag, assign values to a textbox etc. Property binding is used in places where we can directly assign the property without any manipulations, interpolations are used in places where we need to append the property values with other text in the template.

Let us understand property binding with a very simple example, we will set a property title in the component and assign it as value to a textbox in the view.

Interpolation in Angular

Interpolation is the simplest form of data binding in Angular, Interpolation is one-way data binding from the Component class to the view template. Interpolation is implemented using a double set of curly braces enclosing a property which is defined in the component.

{{property}}

At runtime Angular gets the value of the property from the component and displays it in the view.  Interpolation can be used to display text/messages in the view. Interpolation comes in handy when we need to append components property values with other text in the view.

Let us understand Interpolation with a very simple example, we will set a property title in the component and display it in the View using interpolation.

Types of Binding in Angular

Binding is used to bind the model properties and controller functions to the View. Let us now see the different types of bindings offered by Angular.

Angular provides 4 different types of binding.

1. Interpolations

2. Property Binding

3. Event Binding

4. Two way binding

What is Biding in Angular?

Binding is the concept by which the properties and functions in the model/controller are bound to the View. Remember that Angular is a client side MVC architecture.

In AngularJS the $scope was the model which contains the model properties and the controller had the function. Views are HTML files or other files like the MVC view files (.cshtml). Both the model properties and the controller functions are bound to the view using Binding.

In Angular the Component class contains the model properties and functions and the template .html files represent the View. The model properties and functions are bound to the view template file using Binding. 

Output property example in Angular 6

Output properties are outbound properties which flows from a child component to its parent component. These are events which originate from the child component and get handled in the parent component.

In this example we shall see on how to declare a @Output property in a child component and how to pass an event through the @output property to the parent component and handle the event in the parent component.

Let us start with the Input component example and extent it by adding a @Output property to it.

Output properties in Angular

Output properties are outbound properties which flows from a child component to its parent component. These are events which originate from the child component and get handled in the parent component.

Output properties are marked with the @Output decorator and returns an Angular EventEmitter.
Output properties are declared using the @Output decorator as follows.

Input property example in Angular 6

Input properties are inbound properties which flows into a component from a parent component. Input properties are setter properties marked with the @Input decorator.

In this example we shall see on how to declare a @Input property in a child component and how to pass value to it from the parent component. We will get the value of the @Input property and display it in the child components view template.

Input properties in Angular

As the name implies @Input properties are inbound properties which flows into a component from a parent component. Input properties are setter properties marked with the @Input decorator.

Input properties are declared using the @Input decorator as follows.

@Input() Message: string

Once the property is declared in a component, we can pass values to the component from the parent component along with the component’s selector tag as follows.



Here parentMsg is a property defined in the parent component whose value gets passed to the child component through the Message @Input property.