Info Modal

What does info Modal Do?

The InfoModalComponent in an Angular application serves as a crucial element for presenting information to users through a modal dialog. Its primary functions encompass displaying content like application instructions and version details, handling user interactions, and conditionally rendering content. Additionally, it manages data binding, lifecycle events, dependency injection for services, styling, and event handling.

AngularJS vs Angular Approach of Info Modal

importing

In AngularJS, we don't have a built-in module system like ES6 modules in Angular. Instead we need to rely on using script tags to include your JavaScript files. If you want to share functionality between components, we need t define services or factories, and then inject those services into your controllers. in Angular

import { Component, OnInit, AfterViewInit, Inject } from '@angular/core';
import { environment } from 'env_backup';
import { ajskommonitorDataExchangeServiceeProvider, kommonitorDataExchangeServiceFactory } from 'app-upgraded-providers';
import { ModalService } from 'util/genericServices/modal.service';
import { VersionInfoComponent } from '../versionInfo/version-info.component';

component Decorators

Component decorator allows you to mark a class as an Angular component and provide additional metadata. Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

angular.module('myApp', [])
  .component('infoModal', {
    templateUrl: 'info-modal.template.html',
    controller: function () {
  // Implementation  Code Goes here
    }
  });

in Angular

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

@Component({
  selector: 'info-modal',
  templateUrl: 'info-modal.template.html',
  styleUrls: ['info-modal.component.css'],
  providers: [ModalService, ajskommonitorDataExchangeServiceeProvider]
})
export class InfoModalComponent implements OnInit {
  // Implementation  Code Goes here
}

constructor

A constructor is a special method which will be called whenever we create new objects. And generally used of initializing the class members. It is a feature of the class(typescript) itself, an object-oriented design concept not Angular.

.controller('InfoModalController', function () {
 // Implementation  Code Goes here
});

constructor(private modalService: ModalService, @Inject('ajsKommonitorDataExchangeService') public kommonitorDataExchangeService: any) {
// Implementation  Code Goes here
}

Template url

TemplateUrl, we can create separate component's HTML template from the component's TypeScript code, promoting clean code organization and maintainability the approach remembers to be same in both.

templateUrl: 'info-modal.template.html'

Life cycle Hook

The ngOnInit lifecycle hook is utilized to perform initialization tasks when the component is created. In your code, it's used to subscribe to the startGuidedTour observable from modalService.

angular.module('myApp', [])
  .component('infoModal', {
    templateUrl: 'info-modal.template.html',
    controller: function () {
      this.$onInit = function () {
     // Implementation  Code Goes here
      };
    }
  });

in the angular version

@Component({
  selector: 'info-modal',
  templateUrl: 'info-modal.template.html',
  styleUrls: ['info-modal.component.css'],
  providers: [ModalService, ajskommonitorDataExchangeServiceeProvider]
})
export class InfoModalComponent implements OnInit {
  ngOnInit() {
    // Implementation  Code Goes here
  }

Dependency Injection

dependency injection is used to inject services and other dependencies into the component's constructor. Dependency injection is a fundamental concept in Angular and allows you to provide instances of services or other objects to a component. In Angular js

.controller('InfoModalController', ['$scope', 'ModalService', function ($scope, ModalService) {
  // Controller logic here
}]);
// Dependency injection in Angular
constructor(private modalService: ModalService, @Inject('ajsKommonitorDataExchangeService') public kommonitorDataExchangeService: any) {
  // Component initialization logic here
}

In this constructor, the ModalService is injected as a dependency. This service is used to handle modal-related functionality within the component. By injecting ModalService, the component can access and use its methods and properties without having to create a new instance of the service.

    // Component initialization logic here
}

object with the name 'ajsKommonitorDataExchangeService' is being injected. The @Inject decorator is used to specify the dependency.

@Inject('ajsKommonitorDataExchangeService') public kommonitorDataExchangeService: any

property binding

<button ng-click="callStartGuidedTour()">Start Tour</button>

<button (click)="callStartGuidedTour()">Start Tour</button>