Angular Use of Dependency Injection and Models

Models and deserialization.

For effective and optimized code , we use model in angular projects.
All models needs to be deserialized when queried from our API. This simply specifies the way the data from our API is mapped into our model classes.

This interface is implemented by our models; deserialize will do mapping of data to object.
H

How to Use Model:

1.Make a model class in module.
2.Declare a class which can be exported to our component.
3.Declare properties to be used in our component form .

Ex-
export class Model {
    param1: string;
}

4.Also we can declare constructor to initialize  values to them.
5.Now , Import it into your component. This will give you the added benefit of being able to use it in other components:

Import { Model } from './model';

6.Initialize in the component:

export class testWidget {
   public model: Model;
   constructor(){
       this.model = new Model();
       this.model.param1 = "your string value here";
   }
}

We can initialze the value  here also in the constructor.

7.Now to bind data in our template forms we use this object along with the property.

Ex:[(ngModel)] = "model.param1"
<div>This is a test and {{model.param1}} is my param.</div>

8.Also we can assign the data from response directly to our object created with use of Object.assign

Ex: this.model = Object.assign(response);

Use of services and dependency  injection

Depency Injection allows to create a class using @Injectable decorator that can be injected  to our component by giving the componet access to that service.

To define a class as a service in Angular, use the @Injectable() decorator.

It provides the metadata that enables Angular to inject it into a component as a dependency.

Similarly, use the @Injectable() decorator to indicate that a component   has a dependency.

For any depency to be injected to our componet it should not always be a service  ,it can also be a function or a value , only it should be declared using @injectable decorator.

After creating service , we need to import it  in our component and decalare in constructor.

Ex: We have created service as : employee.service.ts
    Declare in constructor as
    public employeeService: EmployeeService:

When you create a service via cli using ng g service, creates a provider with the root injector for your service by including provider metadata in the @Injectable() decorator. 

@Injectable({
 providedIn: 'root',
})

Either you need to define any success or error message aftter hitting of the api and getting the response.

Ex:.pipe(
      tap(
        (success) => {  this.messageService.add({ severity: 'success', summary: 'Order created Successfully' }); },
        (error) => { }
      )
    )
    ;

References:

https://www.techiediaries.com/angular-httpclient/

https://nehalist.io/angular-7-models/

https://angular.io/guide/architecture-services