Issue at Hand: I am currently working on merging AngularJS with Angular by creating components and services to be used within an AngularJS controller.
The AngularJS Controller is initiated through $routeProvider.
One of the components I have created is a card view, displaying a grid layout with images and buttons for approving/rejecting content. Clicking on these buttons opens an md-dialog pop-up to add messages and other details.
Within the TypeScript service, I have implemented functions to fetch and update data for the pop-up accordingly.
By clicking on the component button, the TypeScript service is called to set the data, and in the AngularJS controller, I have subscribed to the service's get function.
There are two main issues that I am encountering:
Each time the page loads, the service gets subscribed. For instance, if I open the page three times, the service gets subscribed thrice, leading to the pop-up appearing multiple times when the component button is clicked.
When attempting to unsubscribe from the service during loading and then subscribe again, the subscription does not happen, resulting in the pop-up not showing up.
Below is the code snippet for the TypeScript service:
import { BehaviorSubject, Observable } from 'rxjs';
import * as angular from 'angular';
class CardClickDTO {
event;
item;
type: string;
}
let app = angular.module('PortalApp');
app.factory('contentcardSrv', [function (): {} {
let cs = this;
// Observables for Click Content
cs._cardClickModel$ = new BehaviorSubject(new CardClickDTO());
cs.CardClcikModel$ = cs._cardClickModel$.asObservable();
// Get Data
cs.getOnContentClickData = new Observable<CardClickDTO>(() => {
return cs.CardClcikModel$;
});
// Set Data
cs.setOnContentClick = (event, item, type: string): void => {
let co: CardClickDTO = new CardClickDTO();
if (type == "reset") // to reset Observable
cs._cardClickModel$.next(co);
else {
co.event = event;
co.item = item;
co.type = type;
cs._cardClickModel$.next(co);
}
};
return {
setOnContentClick: cs.setOnContentClick,
getOnContentClickData: cs.getOnContentClickData,
};
}]);
Now for the AngularJS Controller:
import { portal } from '../portal';
import { saveAs } from 'file-saver';
portal.controller('controller', ['$scope', '$http', '$window', '$mdDialog', '$location', '$cookies', '$mdSidenav', '$mdToast', '$timeout', '$mdpTimePicker', '$interpolate', 'Map', '$sce', '$filter', 'menuSv', 'contentcardSrv', 'permissionSrv', '$anchorScroll',
function ($scope, $http, $window, $mdDialog, $location, $cookies, $mdSidenav, $mdToast, $timeout, $mdpTimePicker, $interpolate, Map, $sce, $filter, menuSv, contentcardSrv, permissionSrv, $anchorScroll) {
// Subscribed to the get data function of the service
contentcardSrv.getOnContentClickData().subscribe((co) => {
if (co != undefined && co.event != undefined && co.item != null && co.item != undefined && co.type != "" && co.type != undefined) {
$scope.onContentClick(co.event, co.item, co.type);
co.event.stopPropagation();
}
});
$scope.onContentClick = function (ev, item, type) {
// Show md-dialog pop-up.
};
}]);
Lastly, the contentcard.component.ts file:
//import angular from 'angular';
import { portal } from 'js/portal';
portal.component('contentcardComponent', {
templateUrl: './contentcard.component.html',
controllerAs: 'ctrl',
controller: 'contentcardComponentController',
bindings: {
itemsdata: '@',
viewdata: '@'
}
});
portal.controller('contentcardComponentController', ['contentcardSrv',
function (contentcardSrv): void {
const ctrl = this;
// Component click function
ctrl.onContentClick = function (ev, item, type: string): void {
if (type == "Approved" || type == "Rejected" || type == "Partial" || type == "ApproveMessage")
ctrl.btnClicked = true;
contentcardSrv.setOnContentClick(ev, item, type); // Set data service function
};
}]);