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

Puzzling angular-cli AOT error
Create Project with Angular 4 Release using angularcli
addons removed in angular-cli.json whats the replacement
angular-cli: ng serve command with config error
Augury Angular-cli When I installed the augury .Error is as follows
Teamcity for building Angular cli app
angular cli update issue on local folder
Access to -aot parameter in code
Missing peer dependencies after installing latest angular-cli: What to do?
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

Categories

HOME
vue.js
textwatcher
google-tag-manager
laravel-5.3
vs-team-services
angular2-directives
survival-analysis
concourse
yocto
currency
aruco
constructor
android-source
camera-calibration
simple-injector
phoenix
phpbb
riak-ts
arraylist
google-people
prestodb
google-ima
profile
tflearn
python-textprocessing
pipelinedb
onesignal
hash-collision
configure
pep8-assembly
helix-3d-toolkit
hawtio
data-extraction
npm-shrinkwrap
powershell-remoting
precedence
shibboleth
xen
common.logging
jupyter-console
jdbi
mod-fcgid
apiary
facebook-chatbot
uiviewpropertyanimator
gist
sgmlreader
adler32
ingres
polar-coordinates
efxclipse
sql-server-administration
typhoon
iostat
cfeclipse
backstop.js
packagemaker
software-product-lines
slam-algorithm
unsatisfiedlinkerror
listadapter
remoteapp
gradle-release-plugin
twgl.js
anti-cheat
altbeacon
multinomial
app.xaml
mysqldumpslow
oai
python-winshell
subresource-integrity
visual-studio-code
ffprobe
swift2.1
pl-i
lexicographic
kallithea
adcolony
genetic-programming
java-collections-api
pic24
ifft
indexing-service
baucis
convex-polygon
nsmatrix
javascriptmvc
ruboto
shiva3d
sharpmap
abnf
mozart-mvc
subtract
open-graph-beta
camtasia
mvvm-foundation
writing
interface-design

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