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...