angular-cli


How to update service json or array value on click in angular2?


I want to update a service by click.
service
import { Injectable } from '#angular/core';
#Injectable()
export class ImageoptionsService {
publicImageOption() {
return {
imgoptions: {
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: './assets/background/one.jpg'
}
}
}
constructor() { }
}
And in a component I am calling it which is working fine. Now I want to update it's 'imgoptions' value by clicking on an element.
mycomonent.component.ts
import { Component, OnInit } from '#angular/core';
import { ImageoptionsService } from "../imageoptions.service";
#Component({
selector: 'app-bglist',
templateUrl: './bglist.component.html',
styleUrls: ['./bglist.component.css']
})
export class mycomonent implements OnInit {
public backgrounds = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
constructor( private imageservice: ImageoptionsService) { }
changebg(index) {
}
ngOnInit() {
}
}
mycomonent.component.html
<ul class="imagelist">
<li class="bgimage" *ngFor="let background of backgrounds; let imgi = index" (click)="changebg(imgi)">
<img src="./assets/background/{{background}}.jpg" alt="{{background}}" />
</li>
</ul>
From the above example, I want to change the 'imgoptions' value in service by calling 'changebg(index){}' this function.
Please let me know if there is any way to execute this.
Thanks
Solution is attached below:
Step 1:
Add one setter method in ImageoptionsService service which would update your service data.
import { Injectable } from '#angular/core';
#Injectable()
export class ImageoptionsService {
private data = {
imgoptions: {
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: './assets/background/one.jpg'
}
}
publicImageOption() {
return this.data;
}
updateData() {
// put your logic to update this.data
}
}
Step2:
Use this method over service instance when event callback gets invoked:
import { Component, OnInit } from '#angular/core';
import { ImageoptionsService } from "../imageoptions.service";
#Component({
selector: 'app-bglist',
templateUrl: './bglist.component.html',
styleUrls: ['./bglist.component.css']
})
export class mycomonent implements OnInit {
public backgrounds = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
constructor( private imageservice: ImageoptionsService) { }
changebg(index) {
// invoking updateData method to update service data
this.imageservice.updateData();
}
ngOnInit() {
}
}
Cheers!

Related Links

angular-cli ng serve : Error: No errors
Getting error after Angular cli update
Does angular-cli uses rollup to do ahead-of-time compilation and adding all into one file?
Angular CLI install error
Using glob for assets in angular-cli throws error
Importing Global SCSS into Component SCSS with Angular-CLI
Error during AOT build with angular-cli 24 and Angular 2.4.1
Add importer to node-sass in angular-cli project
angular-cli#1.0.0-beta.23 (2016-12-15) NOT on npm
Angular cli for existing github project
How to pass config data to NgModule so NgModule will be compiled with AOT
Cloning a repo based on Angular CLI
How can I speed up Angular CLI Live Reload - 1-2 minutes per change
Generating a barrel when calling ng g component <myName>
Setting up tether-drop to work with angular-cli#1.0.0-beta.24
Angular CLI (AOT) gives error: ERROR in Cannot determine the module for class

Categories

HOME
crystal-reports
ssas-2012
semantic-ui
websphere
formal-verification
ll
phaser-framework
rebol
internet-explorer-11
desktop
google-plus
flexbox
cortex-a
camera-calibration
maxima
react-leaflet
reduction
riak-ts
plupload
tortoisegit
thingsboard
cocoa-touch
tarantool
profile
scalajs-react
sumo
lync-2013
excel-2013
edge-detection
bitcoin-testnet
datadog
picturebox
qtablewidget
large-data
windows-10-iot-core
pox
boilerplate
android-download-manager
meta-raspberrypi
mediawiki-extensions
pdftk
homekit
timesten
livescribe
ogre3d
slot
crash-reports
restivejs
createobject
barcode-printing
debugdiag
mix
radians
squirrel
project-online
dac
sun-codemodel
lemoon
insert-into
python-winshell
response-headers
pgm
pylearn
shift-jis
stackframe
and-operator
scala-2.11
sortable
author
adaptive-compression
funkload
facebook-chat
confusion-matrix
nimrod
multiple-login
qss
trailing-slash
icsharpcode
attachevent
ubuntu-11.10
blockingqueue
tfs-power-tools
expression-evaluation
isolatedstorage
entity-framework-ctp5
fileutils
ou
datacontract
cookieless
authenticode
scalaxb
clause
chatroom
visual-c++-2008-express
rtsp-client
opcodes
project-lifecycle

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App