NgModules configure the injector and the compiler and help organize related things together.
An NgModule is a class marked by the @NgModule decorator. @NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime. It identifies the module's own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.
An Angular app needs at least one module that serves as the root module. As you add features to your app, you can add them in modules. The following are frequently used Angular modules with examples of some of the things they contain:
BrowserModule@angular/platform-browserWhen you want to run your app in a browser
CommonModule@angular/commonWhen you want to use NgIf, NgFor
FormsModule@angular/formsWhen you want to build template driven forms (includes NgModel)
ReactiveFormsModule@angular/formsWhen you want to build reactive forms
RouterModule@angular/routerWhen you want to use RouterLink, .forRoot(), and .forChild()
HttpClientModule@angular/common/httpWhen you want to talk to a server
There are five general categories of feature modules which tend to fall into the following groups:
A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
Observables provide support for passing messages between publishers and subscribers in your application.
Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it.
An observable can deliver multiple values of any type—literals, messages, or events, depending on the context.
A handler for receiving observable notifications implements the Observer interface. It is an object that defines callback methods to handle the three types of notifications that an observable can send:
BehaviorSubject , ReplaySubject & AsyncSubject
A variant of Subject that requires an initial value and emits its current value whenever it is subscribed to.
A variant of Subject that “replays” or emits old values to new subscribers. It buffers a set number of values and will emit those values immediately to any new subscribers in addition to emitting new values to existing subscribers.
While the BehaviorSubject and ReplaySubject both store values, the AsyncSubject works a bit different. The AsyncSubject is aSubject variant where only the last value of the Observable execution is sent to its subscribers, and only when the execution completes.
Property Binding: Binding data from component to view. Property binding can be achieved through
<img src="{{imagepath}}" width="300px" height="150px" alt="image not found"> <img [src]="imagepath" width="300px" height="150px" alt="image not found"> <img bind-src="imagepath" width="100px" height="100px" alt="image not found">Event Binding:
<button on-click="SendData(value)">Click to send Data</button>Two way Data Binding: two-way binding can be used by combinging the two, such as: ([……]). This allows for a continuous sync between the presentation and the View layer of the application.
<input type="text" [(ngModel)]="showoutput">Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.
@NgModule({ declarations: [ AppComponent, NavMenuComponent, HomeComponent, CounterComponent, FetchDataComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, RouterModule.forRoot([ { path: '', component: HomeComponent, pathMatch: 'full' }, { path: 'counter', component: CounterComponent }, { path: 'fetch-data', component: FetchDataComponent }, ]) ], providers: [], bootstrap: [AppComponent]})export class AppModule { }BrowserModule to have browser specific services such as DOM rendering, sanitization, and location.index.html host web page.