NgModule metadata An NgModule is defined by a class decorated with @NgModule().  The @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module.  The most important properties are as follows. declarations : The components, directives, and pipes that belong to this NgModule. exports : The subset of declarations that should be visible and usable in the component templates of other NgModules. imports : Other modules whose exported classes are needed by component templates declared in this NgModule. providers : Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.) bootstrap : The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property. import { NgModule }    ...

ActivatedRoute  The ActivatedRoute is specific to each routed component loaded by the Angular Router. It contains information about the route, its parameters, and additional data associated with the route. import { ActivatedRoute } from '@angular/router';

RouterLink The routerLink defines how the user navigates to the route (or URL) declaratively in the component template. < a [ title ] = "product.name + ' details'" [ routerLink ] = "['/products', productId]" >       {{ product.name }} </ a > The RouterLink directive gives the router control over the anchor element. In this case, the route (URL) contains one fixed segment (/products) and the final segment is variable, inserting the id property of the current product. Ref: angular.io

OnInit  ( interface OnInit ) A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an ngOnInit() method to handle any additional initialization tasks. export class ProductAlertsComponent implements OnInit { } ngOnInit() A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. export class ProductAlertsComponent implements OnInit {   ngOnInit() {   } } Ref: angular.io

* ngFor <div * ngFor = "let item of items" > </div> * ngFor is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Any directive with an asterisk, * , is a structural directive. The interpolation syntax {{ }} renders a property's value as text. <div * ngFor = " let item of items " >    <h3> {{ item.name }} </h3> </div> Ref: angular.io

Router Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app. The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies. If the router determines that the current application state requires particular functionality, and the module that defines it hasn't been loaded, the router can lazy-load the module on demand. The router interprets a link URL according to your app's view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box. Ref: angular.io

Service  For data or logic that isn't associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class. Angular supports two-way data binding , meaning that changes in the DOM, such as user choices, are also reflected in your program data. A singleton service is a service for which only one instance exists in an app. There are two ways to make a service a singleton in Angular: Declare root for the value of the @Injectable() providedIn property. This tells Angular to provide the service in the application root. Include the service in the AppModule or in a module that is only imported by the AppModule import { Injectable } from '@angular/core' ; @ Injectable ({    providedIn : 'root' , }) export class...

Interpolation {{ }} lets you render the property value as text;    <h3> {{ item.name }} </h3> The interpolation syntax {{ }} : <div * ngFor = " let item of items " >   <h3> {{ item.name }} </h3> </div> Event binding lets your app respond to user input in the target environment by updating your application data. Event binding ()   uses a set of parentheses, ( ) , around the event, as in the following <button> element:  <button (click)="share()"> Share </button> Property binding lets you interpolate values that are computed from your application data into the HTML. property binding [ ] lets you use the property value in a template expression. < a [ title ] = "product.name + ' details'" >    {{ product.name }} </ a > Pipes Use pipes to display dates and currency values that are appropriate for a user's locale. Angular pr...

Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work. A template combines HTML with Angular markup that can modify HTML elements before they are displayed.  Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding: Ref: angular.io

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient. Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment. The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata. Ref: angular.io

NgModules  The basic building blocks of an Angular application are NgModules NgModules which provide a compilation context for components.  NgModules associate related code into functional sets. An Angular app is defined by a set of NgModules.  An app always has at least a root module that enables bootstrapping that launches the application. NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, They export selected functionality for use by other NgModules. Every Angular app has at least one NgModule class, The root module, which is conventionally named AppModule and resides in a file named app....

The fundamental building blocks of an Angular apps are  NgModules . NgModules  provides a compilation context for  components .  NgModules collect related code into functional sets. Angular app is structured by a set of NgModules.  An app always has at least a  root module  that enables bootstrapping of app,  and typically it has many more  feature modules . Mainly Angular App consist of followings: NgModules Components Template Services Routing Depedency Injections Ref: angular.io

Angular is a  framework   and  platform for building client applications using HTML and (TS)TypeScript.  Angular is written in TypeScript language.  Angular implements core side functionality as a set of TypeScript libraries that you need to import into your apps while developing Apps. Ref: angular.io