Post
Ask Question

Basic Need Of Web App Development Using Angular 7

When I started a web application using Angular 7 in the past, I faced a lot of problems, such as not being sure about the basic requirements. So, for this article, I have collected four simple requirements to start a web application using Angular 7.
  1. Bootstrap4 configuration in angular.json file
  2. Toaster Plugin integration.
  3. Spinner Integration.
  4. jQuery Data Tables Integration.

Bootstrap 4 Configuration in angular.json file globally in Angular 7

 
We all know about how Bootstrap is given a rich UI for making a simple design usage for developers but here, I have given small steps to configure this Bootstrap 4 globally in Angular 7.
 
Following are the steps to start the configuration.
 
Step 1
 
Firstly, install Bootstrap 4 using Angular CLI.
 
npm install bootstrap@4 jquery --save
 
Step 2
 
Now, we need to configure the angular.json file. 
  1. "styles": [  
  2.    "src/styles.css",  
  3.    "node_modules/ngx-toastr/toastr.css",  
  4.    "node_modules/bootstrap/dist/css/bootstrap.min.css"  
  5. ],  
  6. "scripts": [  
  7.    "node_modules/jquery/dist/jquery.min.js",  
  8.    "node_modules/bootstrap/dist/js/bootstrap.min.js"  
  9. ]  
Based on the above configuration, we can directly consume the bootstrap class at component level.
 

Toaster integration in Angular 7

 
By using Toaster, we can display an error message "we are getting a problem in run time" and we can easily inform the user.
 
Step 1 
 
Firstly, install Toaster using Angular CLI.
 
npm install ngx-toastr --save
 
Step 2
 
Now, we need to configure in the angular.json file.
  1. "styles": [  
  2.    "styles.scss",  
  3.    "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6  
  4. ]  
Step 3
 
The below code needs to be imported to the app.module.ts file.
  1. import { ToastrModule } from 'ngx-toastr';  
  2.   
  3. imports: [  
  4. CommonModule,  
  5. BrowserAnimationsModule, // required animations module  
  6. ToastrModule.forRoot({  
  7.    timeOut: 10000,  
  8.    closeButton:true,  
  9.    newestOnTop:true,  
  10.    positionClass: 'toast-bottom-center',  
  11.    preventDuplicates: true,  
  12.    }) // ToastrModule added  
  13. ],  
Step 4
 
The below code is used in component page level.
  1. import { ToastrService } from 'ngx-toastr';  
  2.   
  3. export class YourComponent {  
  4. constructor(private toastr: ToastrService) {}  
  5. showSuccess() {  
  6.   this.toastr.success('Hello world!', 'Toastr fun!');  
  7.   }  
  8. }  
Step 5
  
For the global settings to load a spinner at the service file level, if we define this below code in service level, we can call this method from component level.
  1. fireToasterMsg(msg: string, subMsg: string, msgType: string) {  
  2.    switch (msgType) {  
  3.       case 'success': { this._toaster.success(msg, subMsg); };  
  4.       case 'info': { this._toaster.info(msg, subMsg); };  
  5.       case 'error': { this._toaster.error(msg, subMsg) };  
  6.       case 'warning': { this._toaster.warning(msg, subMsg) };  
  7.       default: { this._toaster.info(msg, subMsg) };  
  8.    }  
  9. }  
Step 6 - Call the Toaster
 
this._usrSrv.fireToasterMsg('Internal Sever Error','Santosh Testing Demo','error'); 
 

Spinner for loading integration in Angular 7

 
With the use of Spinners, we can control the user action whenever a function works at runtime.
 
Step 1
 
Firstly, install ngx-spinner using Angular CLI and you can also check here.
 
npm install ngx-spinner --save
 
Step 2
 
The below code is to Import NgxSpinnerModule in root module(AppModule) level.
  1. // Import library module  
  2. import { NgxSpinnerModule } from 'ngx-spinner';  
  3.    @NgModule({  
  4.    imports: [  
  5.       // ...  
  6.       NgxSpinnerModule  
  7.    ]  
  8. })  
Step 3
 
Now, we need to use the NgxSpinnerService service wherever you want to use the ngx-spinner.
  1. import { NgxSpinnerService } from 'ngx-spinner';  
  2. class AppComponent implements OnInit {  
  3.    constructor(private spinner: NgxSpinnerService) { }  
  4.    /** spinner starts on init */  
  5.    this.spinner.show();  
  6.    /** spinner ends */  
  7.    this.spinner.hide();  
  8. }  
Step 4
 
Now, we must configure the below code in our template app.componet.html file to maintain globally.
  1. <ngx-spinner bdOpacity=0.8 bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-spin-clockwise" fullScreen="true">  
  2.    <p style="color: white"> Loading... </p>  
  3. </ngx-spinner>  
Here, you can also get different types of spinner animations at the following URL.
 
http://github.danielcardoso.net/load-awesome/animations.html
 

jQuery Data Table integration in Angular 7

 
Most of the developers know very well about jQuery Data Tables, but here, we can know how to integrate these to our Angular 7 project. So by using these, we can display the information in table format and we can apply data table features like navigation, sorting,..etc. 
 
Step 1
 
Firstly, install the below jQuery DataTable dependencies using Angular CLI.
 
npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
 
Step 2
 
Here, we need to add the below dependency scripts and styles in the angular.json file.
  1. {  
  2.     "projects": {  
  3.         "your-app-name": {  
  4.             "architect": {  
  5.                 "build": {  
  6.             "options": {  
  7.         "styles": ["node_modules/datatables.net-dt/css/jquery.dataTables.css"],  
  8.      "scripts": ["node_modules/jquery/dist/jquery.js", "node_modules/datatables.net/js/jquery.dataTables.js"],  
  9.     ...  
  10.    }   
Step 3
 
The below code is to Import DataTablesModule in the root module(AppModule) level.
  1. import {  
  2.     DataTablesModule  
  3. } from 'angular-datatables';  
  4. @NgModule({  
  5.     declarations: [  
  6.         AppComponent  
  7.     ],  
  8.     imports: [  
  9.         BrowserModule,  
  10.         DataTablesModule  
  11.     ],  
  12.     providers: [],  
  13.     bootstrap: [AppComponent]  
  14. })  
  15. export class AppModule {}   
Step 4
 
By the below code, we can understand how to consume and use jQuery Data Table in component page level.
  1. import {  
  2.     Subject  
  3. } from 'rxjs';  
  4. export class EmployeeListComponent implements OnInit {  
  5.     dtOptions: DataTables.Settings = {};  
  6.     empListData: Employee[];  
  7.     // We use this trigger because fetching the list of persons can be quite long,    
  8.     // thus we ensure the data is fetched before rendering    
  9.     dtTrigger: Subject < any > = new Subject();  
  10.     ngOnInit(): void {  
  11.         this.loadDataTable();  
  12.     }  
  13.     loadDataTable(): void {  
  14.         this.dtOptions = {  
  15.             pagingType: 'full_numbers',  
  16.             pageLength: 2  
  17.         };  
  18.         this._http.get(this._usrSrv.getUrl('/Employee')).subscribe(res => {  
  19.             if (res != null) {  
  20.                 this.ddlList = res as Employee[];  
  21.                 this.empListData = res as Employee[];  
  22.                 this.emSrv.list = res as Employee[];  
  23.                 // Calling the DT trigger to manually render the table    
  24.                 this.dtTrigger.next();  
  25.             }  
  26.         }, err => {});  
  27.     }  
  28. }    

Conclusion

 
I think the above 4  points are very useful in order to start & initiate a new web application using Angular 7 applications.


Similar Articles