FAQ

NgModules

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.

Frequently Used Modules

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

When you want to run your app in a browser


CommonModule
@angular/common

When you want to use NgIf, NgFor


FormsModule
@angular/forms

When you want to build template driven forms (includes NgModel)


ReactiveFormsModule
@angular/forms

When you want to build reactive forms


RouterModule
@angular/router

When you want to use RouterLink, .forRoot(), and .forChild()


HttpClientModule
@angular/common/http

When you want to talk to a server

Types of Feature Modules

There are five general categories of feature modules which tend to fall into the following groups:

  • Domain feature modules: Domain feature modules deliver a user experience dedicated to a particular application domain like editing a customer or placing an order. They typically have a top component that acts as the feature root and private, supporting sub-components descend from it.
  • Routed feature modules: Routed feature modules are domain feature modules whose top components are the targets of router navigation routes.
  • Routing modules: A routing module provides routing configuration for another module and separates routing concerns from its companion module.
  • Service feature modules: Service modules provide utility services such as data access and messaging. Ideally, they consist entirely of providers and have no declarations. Angular's HttpClientModule is a good example of a service module.
  • Widget feature modules: A widget module makes components, directives, and pipes available to external modules. Many third-party UI component libraries are widget modules.

Providers

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

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.


observers

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:

  • next Required. A handler for each delivered value. Called zero or more times after execution starts.
  • error Optional. A handler for an error notification. An error halts execution of the observable instance.
  • complete Optional. A handler for the execution-complete notification. Delayed values can continue to be delivered to the next handler after execution is complete.

BehaviorSubject , ReplaySubject & AsyncSubject

  • BehaviorSubject

A variant of Subject that requires an initial value and emits its current value whenever it is subscribed to.

  • ReplaySubject

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.

    • AsyncSubject

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.

Source: https://medium.com/@luukgruijs/understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject-8cc061f1cfc0

Bindings

Property Binding: Binding data from component to view. Property binding can be achieved through

  • Interpolation use 2 sets of curly brackets {{ }} to enclose the property/field name. 
              <img src="{{imagepath}}" width="300px" height="150px" alt="image not found">
  • Using square brackets wrap the element property and assign the component property to this element property.
               <img [src]="imagepath" width="300px" height="150px" alt="image not found">
  • Using "bind-" prefix
               <img bind-src="imagepath" width="100px" height="100px" alt="image not found">

Event Binding:

  • Binding events using brackets () . <button (click)="logevent()">Log</button>
  • Binding events using "on-" <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">

EventEmitter

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.

Declarations, imports, providers and bootstrap

@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 { }


  • declarations—this application's lone component.
  • imports—import BrowserModule to have browser specific services such as DOM rendering, sanitization, and location.
  • providers—the service providers.
  • bootstrap—the root component that Angular creates and inserts into the index.html host web page.