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';
  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';
  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.