Previous
Next  

Class Provider: useClass

As we know that Angular provides different types of providers such as class provider, alias provider, value provider and factory provider. So in this article we will learn about class provider step by step with example.

useClass is a class provider that creates and returns a new instance of a specified class. It is used in the following way. 

providers: [ 
    { provide: SahosoftService, useClass: AngularService }
]

In the previous configuration, the first part is the token and the second part is the provider definition object. The class type of the provider definition object must be the same as the token class or its subclass. AngularService is the subclass of SahosoftService. Suppose you have used SahosoftService as DI using the constructor in any component or service, from the previous configuration will get the AngularService object as DI.

In the case of the useClass configuration, if the provider definition is the same class as the class used for the token indicated below.

providers: [ 
    { provide: SahosoftService, useClass: AngularService }
]

Thus, the provider can configure the service in short as follows.

providers: [ 
    SahosoftService
]

Now we will create an example for Class Provider: useClass and Folder structure for this example as shown below. 

src
├── app
│   ├── services
│   │   ├── angular.service.ts
│   │   ├── python.service.ts
│   │   ├── sahosoft.service.ts
│   ├── angular.component.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── python.component.ts
│   ├── sahosoft-details.component.ts

sahosoft.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class SahosoftService {
	companyname = 'Sahosoft';
	course = 'Tutorials';	
	getCompanyName() {
		return this.companyname;
	}
    getCourse() {
		return this.course;
	}		
}

angular.service.ts

import { Injectable } from '@angular/core';
import { SahosoftService } from './sahosoft.service';

@Injectable()
export class AngularService extends SahosoftService {
	companyname = 'Sahosoft';
	course = 'Angular Course';	
}

python.service.ts

import { Injectable } from '@angular/core';
import { SahosoftService } from './sahosoft.service';

@Injectable()
export class PythonService extends SahosoftService {
	companyname = 'Sahosoft';
	course = 'Python Course';
}

sahosoft-details.component.ts

import { Component, OnInit } from '@angular/core';
import { SahosoftService } from './services/sahosoft.service';


@Component({
	selector: 'sahosoft-details',
	providers: [ 
		SahosoftService
   ],  
    template: `
	   <h3>
           {{companyname}} Provides {{course}}
       </h3>
	`
})
export class SahosoftDetailsComponent implements OnInit {
	companyname: string;
	course: string;
    constructor(private sahosoftService: SahosoftService) {	}
	ngOnInit() {
		this.companyname = this.sahosoftService.getCompanyName();
		this.course = this.sahosoftService.getCourse();
	}	
}

angular.component.ts

import { Component } from '@angular/core';
import { SahosoftService } from './services/sahosoft.service';
import { AngularService } from './services/angular.service';

@Component({
	selector: 'angular',
	providers: [
		{ provide: SahosoftService, useClass: AngularService }
	],
	template: `
	  <h3>
          {{companyname}} provides {{course}}
      </h3>
	`
})
export class AngularComponent {
	companyname: string;
	course: string;
	constructor(private sahosoftService: SahosoftService) { }
	ngOnInit() {
		this.companyname = this.sahosoftService.getCompanyName();
		this.course = this.sahosoftService.getCourse();
	}
}

python.component.ts

import { Component } from '@angular/core';
import { SahosoftService } from './services/sahosoft.service';
import { PythonService } from './services/python.service';

@Component({
    selector: 'python',
    providers: [ 
	    { provide: SahosoftService, useClass: PythonService }
	],    
    template: `
	       <h3>
               {{companyname}} provides {{course}}
           </h3>
	`
})
export class PythonComponent {
	companyname: string;
	course: string;
    constructor(private sahosoftService: SahosoftService) {	}
	ngOnInit() {
		this.companyname = this.sahosoftService.getCompanyName();
		this.course = this.sahosoftService.getCourse();
	}	
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
          <sahosoft-details></sahosoft-details>
          <python></python>
		  <angular></angular>
  `
})
export class AppComponent {
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { SahosoftDetailsComponent } from './sahosoft-details.component';
import { PythonComponent } from './python.component';
import { AngularComponent } from './angular.component';

@NgModule({
  imports: [     
        BrowserModule
  ],
  declarations: [
        AppComponent,
		AngularComponent,
		PythonComponent,
            SahosoftDetailsComponent
  ],
  providers: [ 
  ],  
  bootstrap: [
        AppComponent
  ]
})
export class AppModule { }

when you run the application, you will get the output as shown below.

sahosoft-Tutorials-Class-Provider-useClass

download demo source code

class provider: useclass
 Previous
Next