Angular

Binding within HTML Template

{{}} string interpolation (within HTML template)

() one-way event binding OUT of a component

[] one-way attribute binding INTO a component

[()] Two-way binding (used for forms)

<app-asset-view
*ngFor="let item of codes"
code="item.code"
[price]="item.price"
>

<app-asset-view
*ngFor="let item of codes"
[code]="item.code"
[price]="item.price"
>

Custom Events

All httpClient services are OBSERVABLE

export class InsightsComponent implements OnInit {
  reportData = { name: '', id: 1 }; // define the reportData as an object with name and ID
  // reportData = {}; // this is where our returned data from the API will go
  // we need access to the service
  constructor(private typicodeService: TypicodeService) {}

  ngOnInit(): void {}
  makeServiceCall() {
    // we call the service method by subscribing to it
    // remember the api call will be async so subscribing responds when it returns
    this.typicodeService
      .getApiData({ category: 'users', id: 1 })
      .subscribe((data) => {
        this.reportData = data;
      });
  }
}

A recommend way is to define the key-value pairs in the reportData - easy for the service to call and html to get & show - is to define a Class

And treat the Class as an *Interface

Old way

Every time typing a letter into the search engine - send a request object to the back end - and send the response - then destroy. - really expensive

Now

Every time make a key stroke - one simple observable says: something happened and I’ll handle it. Then observable sends request to the server and come back with the answer. Here’s the response to that most recent change, and the same observable then sits there - as an observable - and any subscriber to that observable will be told about the change and response

Observable

Observable is an object that encapsulated an async request. you make the async request (e.g. http request to the server REST endpoints) and the call immediately returns the Observable object. We can subscribe to the Observable with a function that is called when the response comes back later.

Production and Deployment

ng build --configuration

To avoid name conflict with cache