Angular Notes:

• You can use services to share data across components:
  • i.e. cart.service.ts

• After generating a new Component, 
  • With IDEs, newly generated component will be automatically imported on app.module.ts to be used globally.
  • We must add/declare a new route on app.module.ts
    • { path: ‘path-to-component’, component: MyComponent },
      • Path-to-component is the domain_name.com/parth-to-component

• Imports array under @NgModule({ imports: [ MyXYZModule, at app.module.ts
  • This imports: array registers the modules to be use globally among other components

• When we decide to use a Component or a Service inside an other component. 
  • Declare a variable right under the ‘export class’ declaration.
    • I.e. shippingCosts;
  • Inject the service or the component in between the normal parentheses of the constructor method. 
    • i.e. constructor ( private cartService: CartService) {}
  • After above two steps if we want to set the property of the injected service to the initially declared variable
    • Under ngOnInit() { method body}
    • this.shippingCosts = this.cartService.getShippingPrices();

• The async pipe returns the latest value from a stream of data and continues to do so for the life of a given component. When Angular destroys that component, the async pipe automatically stops. For detailed information about the async pipe, see the AsyncPipe API documentation.
  • i.e. <div class="shipping-item" *ngFor="let shipping of shippingCosts | async">

Forms in Angular link

There are two parts to an Angular Reactive form: 

1. the objects that live in the component to store and manage the form, 
2. and the visualization of the form that lives in the template.