angular-services

I have an anuglar2 project that communicates with an api. Recently, I decided to integrate ngrx/store to maintain the state of the components, and follow the dump-smart component architecture. But then while moving on, I read about ngrx/effect which can be used upon the api requests. And here my question comes, why should I use the ngrx/effect library, over just calling the corresponding function in my service from my container component to perform the api request and on success dispatch action to save the returned values in my store. If your case stays that simple, then you won't need an

Angular 5 When is a service created and destroyed, what are its lifecycle hooks (if any) and how is its data shared between components? EDIT : To clarify, this is NOT a question about the lifecycle of components. This question is about the lifecycle of services. In case a service does not have a lifecycle, how is the flow of data between components and services managed? Yanis-git Service can have 2 scopes. If service is declared on your module, you have same instance shared for all, this means service will be constructed when the first component/directive/service/Pipe who needs it will be

Angular v4: Do we store data in a Service or the Component or both? After reviewing quite a few tutorials, as well as reading the documentation of Angular, I'm still not clear on this subject. https://angular.io/tutorial/toh-pt2 Angular's tutorial clearly shows data stored in the Component. https://angular.io/guide/architecture#services Angular's Architecture > Services section shows code with the service having an array of data (is this proper?). If we store data in Components , we would heavily used @Input and @Output to move data between child components (assuming we want this data in the

What i am trying to do is simple. A user enters a value, on button click, my JS calls a service to retreive my JSON data and perform a search on the value entered against the JSON and if a match is found, display the 'Owner'. HTML: <div ng-app="myApp"> <div ng-controller="MainCtrl"> <input type="text" ng-model="enteredValue"> </br> <button type="button" ng-Click="findValue(enteredValue)">Search</button> </div> </div> JS: angular.module('myApp', []).controller('MainCtrl', function ($scope, $http, getDataService) { $scope.findValue = function(enteredValue) { alert("Searching for = " +

I have built a shared data service that's designed to hold the users login details which can then be used to display the username on the header, but I cant get it to work. Here's my (abbreviated) code: // Shared Service @Injectable() export class SharedDataService { // Observable string source private dataSource = new Subject<any>(); // Observable string stream data$ = this.dataSource.asObservable(); // Service message commands insertData(data: Object) { this.dataSource.next(data) } } ... // Login component import { SharedDataService } from 'shared-data.service'; @Component({ providers:

I want to pass some values from one view to another in Angularjs using ui-Router. I don't want to use $rootScope to save data or create a new services ( as I have many views that pass small bits of data so creating new jsfile for few lines code is not fun). A super-minified example of what I want to do is: Controller of View 1 $scope.goodFood = 10 $scope.badFood = 2 Controller of View 2 $scope.results = 10 - 2 (from view 1's scope) Is there any quick way to do these kinds of small operations ? I don't want to use $rootScope to save data or create a new services ( as I have many views that pass

I'm creating a single page app in which a user searches for a term, the result gets saved in a variable, and a new page is routed that displays the result. I have this functionality working, however I want the variable to be cleared when the user returns to the previous page and most importantly when the user logs out. What's the proper way to do this? I want the factory to save things for certain pages that I want, and clear them for certain pages I don't want like "home" or "logout". Factory: angular.module('firstApp') .factory('fact', function () { var service = {}; var _information =

How can I add component dynamically? toolbar.component.ts: @Component({ selector: 'app-toolbar', template: '<button>Add Text component</button>' }) export class ToolbarComponent { constructor() { } } section.component.ts: @Component({ selector: 'div[app-type=section]', template: '' }) export class SectionComponent { constructor() { } } text.component.ts: @Component({ selector: 'app-text', template: '<p>This is dynamically component</p>' }) export class TextComponent { constructor() { } } view.component.ts: @Component({ selector: 'app-view', template: `<div class="container"> <app-toolbar></app

I have this array of objects which I put on the select option and I would want to select one list of object in the select option. However I can't get the value of that list of object. It outputs [object] [Object]. I want to get that selected list of object of the corporation. I assigned it to the [value] and it gets [object][Object]. <div class="select" > <select class="form-control col-lg-8" #selectedValue (change)="assignCorporationToManage(selectedValue.value)"> <option *ngFor="let corporation of user_corporations" [value]="corporation">{{corporation.corp_name}}</option> </select> </div> ts