I have an application that requires that I use non-Angular JavaScript for certain things. To trigger an action in the Angular component, I'm passing a down a callback to the non-Angular component. When the callback is triggered, an observable runs on the Angular component (doing an http call). This works but the only piece of the puzzle I'm having trouble with is getting the data returned from this observable passed back down to the non-Angular component somehow. My actual application is fairly complex so I've created a Stackblitz for a much more simplified version to make it easier to see what I'm doing.
This is tricky for me as the GET call in doStuff is async, so I can't just return the results. I'd have some ideas on how to work around this in a pure Angular app... but I'm not sure how to accomplish this when sharing data between an Angular component and a Non-Angular one.
app.component.ts:
export class AppComponent {
constructor(private http: HttpClient){}
doStuff() {
let randomNum = this.getRandomInt(2); // Simulate different http responses
this.http.get<any>(`https://jsonplaceholder.typicode.com/todos/${randomNum}`).subscribe(x => {
if (x === 1) {
// Here is where I want to share data with the non-Angular component
console.log(x.id);
} else {
// Here is where I want to share data with the non-Angular component
console.log(x.id);
}
});
}
ngOnInit() {
var x = new NonAngularComponent(this.doStuff.bind(this));
}
private getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max)) + 1;
}
}
NonAngularComponent.ts:
export class NonAngularComponent {
constructor(private onSave: () => void) {
this.init()
}
init() {
const newElement = document.createElement('button');
newElement.innerHTML = 'Click';
newElement.addEventListener('click', () => {
this.onSave(); // Works, but now I need to do something with the results of doStuff()
});
document.getElementById('foo').append(newElement);
}
}
Any suggestions would be much appreciated.
It would be better to return Observable from your doStuff() method and use tap operator if you want to have some side effect in Angular component:
doStuff() {
let randomNum = this.getRandomInt(2);
return this.http.get<any>(`https://jsonplaceholder.typicode.com/todos/${randomNum}`).pipe(tap(x => {
if (x === 1) {
// Here is where I want to share data with the non-Angular component
console.log(x.id);
} else {
// Here is where I want to share data with the non-Angular component
console.log(x.id);
}
}));
}
non-angular.component.ts
newElement.addEventListener('click', () => {
this.onSave().subscribe(res => {
// do whatever you want
});
});
Forked Stackblitz
I think that the easiest solution would be to simply have an instance of your NonAngularComponent inside the AppComponent
this.nonAngularComponent = new NonAngularComponent(this.doStuff.bind(this));
And in the callback simply call the method you want from the NonAngularComponent like so:
doStuff() {
let randomNum = this.getRandomInt(2);
this.http
.get<any>(`https://jsonplaceholder.typicode.com/todos/${randomNum}`)
.subscribe(x => {
if (x === 1) {
// Here is where I want to share data with the non-Angular component
// console.log(x.id);
this.nonAngularComponent.doSomething(x);
} else {
// Here is where I want to share data with the non-Angular component
// console.log(x.id);
this.nonAngularComponent.doSomething(x);
}
});
}
doSomething method:
public doSomething(result) {
console.log("Non-Angular component received result", result);
}
And console output:
Stackblitz: https://stackblitz.com/edit/angular-tddc7q?file=src%2Fapp%2FNonAngularComponent.ts
I'm currently developing an application with Angular using redux principle with ngrx.
I'm looking for a best practice for reacting to state changes and call some component logic depending on this state. I'll give you an (simplified) example to make clear what I mean:
reducers.ts
import {createSelector} from 'reselect';
export const getViewTypeOrFilterChanged = createSelector(isLoading, getActiveViewType, getActiveFilter, (isLoading, activeViewType, activeFilter) => {
// ensure that data is loaded
if (!isLoading) {
return {
activeViewType: activeViewType,
activeFilter: activeFilter
};
}
});
example-component.ts
#Component({ ... })
export class ExampleComponent implements OnInit {
// properties ...
constructor(private store: Store<fromRoot.AppState>) {
}
ngOnInit() {
this.subscriptions.push(
this.store.select(fromRoot.getViewTypeOrFilterChanged).subscribe((result) => {
if (result) {
this.property1 = result.activeType;
this.dependentHelperClass.method1(result.activeFilter);
this.method1();
this.method2(result.activeFilter);
this.method3();
}
})
);
}
ngOnDestroy() {
this.subscriptions.forEach((subscription: Subscription) => {
subscription.unsubscribe();
});
}
// methods ...
}
As you can see I'm also using reselct to combine three different slices of state within a selector (getViewTypeOrFilterChanged). In the subscription to this selector I then want to take some actions according to the combined state.
The thing is, I'm feeling like using ngrx store and subscriptions more in a way of publish/subscribe pattern here and it feels not quite correct. Also the subscriptions (I have multiple ones) in ngOnInit and unsubscriptions in ngOnDestroy bother me, but I can't think of a way achieving the same results using e.g. async pipe.
Is there maybe a more elegant way of reacting to (combined) state changes?
Thanks!
With RxJS you should think of everything as a stream - the following code is just as an example, because I don't really know any of your UI-logic so just look at the structure and not at the logic of the code, since it's more like a very wild guess of mine:
#Component({ ... })
export class ExampleComponent implements OnInit {
private destroyed$ = new Subject<boolean>();
// the following streams can be used in the controller
// as well as in the template via | async
// the .share() is just so the | async pipe won't cause unneccessary stream-creations (the result should be the same regardless of the .share(), it's just a minor performance-enhancement when using multiple | async)
isLoading$ = this.store.select(fromRoot.isLoading).share();
activeViewType$ = this.store.select(fromRoot.getActiveViewType).share();
activeFilter$ = this.store.select(fromRoot.getActiveFilter).share();
activeViewTypeAndFilter$ = Observable.combineLatest(this.activeViewType$, this.activeFilter$).share();
constructor(private store: Store<fromRoot.AppState>) {
}
ngOnInit() {
this.isLoading$
.filter(isLoading => !isLoading) // the initial stream will not emit anything until "loading" was false once
.switchMapTo(this.activeViewTypeAndFilter$)
.do([viewType, filter] => {
this.dependentHelperClass.method1(activeFilter);
this.method1();
this.method2(activeFilter);
this.method3();
})
.takeUntil(this.destroyed$) //this stream will automatically be unsubscribed when the destroyed$-subject "triggers"
.subscribe();
}
ngOnDestroy() {
this.destroyed$.next(true);
this.destroyed$.complete();
}
// methods ...
}
As I said: logic-wise I cannot say if this is what you need, but that's just a question of using different operators and/or a different order to arrange your "main-stream" differntly.
I'm making a real estate website using Angular 2, Google Maps, etc. and when a user changes the center of the map I perform a search to the API indicating the current position of the map as well as the radius. The thing is, I want to reflect those values in the url without reloading the entire page. Is that possible? I've found some solutions using AngularJS 1.x but nothing about Angular 2.
As of RC6 you can do the following to change URL without change state and thereby keeping your route history
import {OnInit} from '#angular/core';
import {Location} from '#angular/common';
// If you dont import this angular will import the wrong "Location"
#Component({
selector: 'example-component',
templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
constructor( private location: Location )
{}
ngOnInit()
{
this.location.replaceState("/some/newstate/");
}
}
You could use location.go(url) which will basically change your url, without change in route of application.
NOTE this could cause other effect like redirect to child route from the current route.
Related question which describes location.go will not intimate to Router to happen changes.
Using location.go(url) is the way to go, but instead of hardcoding the url , consider generating it using router.createUrlTree().
Given that you want to do the following router call: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute}) but without reloading the component, it can be rewritten as:
const url = this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()
this.location.go(url);
For anyone like me finding this question the following might be useful.
I had a similar problem and initially tried using location.go and location.replaceState as suggested in other answers here. However I ran into problems when I had to navigate to another page on the app because the navigation was relative to the current route and the current route wasn't being updated by location.go or location.replaceState (the router doesn't know anything about what these do to the URL)
In essence I needed a solution that DIDN'T reload the page/component when the route parameter changed but DID update the route state internally.
I ended up using query parameters. You can find more about it here: https://angular-2-training-book.rangle.io/handout/routing/query_params.html
So if you need to do something like save an order and get an order ID you can update your page URL like shown below. Updating a centre location and related data on a map would be similar
// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
// [Here we would call back-end to save the order in the database]
this.router.navigate(['orders'], { queryParams: { id: orderId } });
// now the URL is blah/orders?id:1234. We don't reload the orders
// page or component so get desired behaviour of not seeing any
// flickers or resetting the page.
}
and you keep track of it within the ngOnInit method like:
ngOnInit() {
this.orderId = this.route
.queryParamMap
.map(params => params.get('id') || null);
// orderID is up-to-date with what is saved in database now, or if
// nothing is saved and hence no id query paramter the orderId variable
// is simply null.
// [You can load the order here from its ID if this suits your design]
}
If you need to go direct to the order page with a new (unsaved) order you can do:
this.router.navigate(['orders']);
Or if you need to go direct to the order page for an existing (saved) order you can do:
this.router.navigate(['orders'], { queryParams: { id: '1234' } });
I had major trouble getting this to work in RCx releases of angular2. The Location package has moved, and running location.go() inside constructor() wont work. It needs to be ngOnInit() or later in the lifecycle. Here is some example code:
import {OnInit} from '#angular/core';
import {Location} from '#angular/common';
#Component({
selector: 'example-component',
templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
constructor( private location: Location )
{}
ngOnInit()
{
this.location.go( '/example;example_param=917' );
}
}
Here are the angular resources on the matter:
https://angular.io/docs/ts/latest/api/common/index/Location-class.html
https://angular.io/docs/ts/latest/api/common/index/LocationStrategy-class.html
I've had similar requirements as described in the question and it took a while to figure things out based on existing answers, so I would like to share my final solution.
Requirements
The state of my view (component, technically) can be changed by the user (filter settings, sorting options, etc.) When state changes happen, i.e. the user changes the sorting direction, I want to:
Reflect the state changes in the URL
Handle state changes, i.e. make an API call to receive a new result set
additionally, I would like to:
Specify if the URL changes are considered in the browser history (back/forward) based on circumstances
use complex objects as state params to provide greater flexibility in handling of state changes (optional, but makes life easier for example when some state changes trigger backend/API calls while others are handled by the frontend internally)
Solution: Change state without reloading component
A state change does not cause a component reload when using route parameters or query parameters. The component instance stays alive. I see no good reason to mess with the router state by using Location.go() or location.replaceState().
var state = { q: 'foo', sort: 'bar' };
var url = this.router.createUrlTree([], { relativeTo: this.activatedRoute, queryParams: state }).toString();
this.router.navigateByUrl(url);
The state object will be transformed to URL query params by Angular's Router:
https://localhost/some/route?q=foo&sort=bar
Solution: Handling state changes to make API calls
The state changes triggered above can be handled by subscribing to ActivatedRoute.queryParams:
export class MyComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.queryParams.subscribe((params) => {
// params is the state object passed to the router on navigation
// Make API calls here
});
}
}
The state object of the above axample will be passed as the params argument of the queryParams observable. In the handler API calls can be made if necessary.
But: I would prefer handling the state changes directly in my component and avoid the detour over ActivatedRoute.queryParams. IMO, navigating the router, letting Angular do routing magic and handle the queryParams change to do something, completely obfuscates whats happening in my component with regards to maintenability and readability of my code. What I do instead:
Compare the state passed in to queryParams observable with the current state in my component, do nothing, if it hasn't changed there and handle state changes directly instead:
export class MyComponent implements OnInit {
private _currentState;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.queryParams.subscribe((params) => {
// Following comparison assumes, that property order doesn't change
if (JSON.stringify(this._currentState) == JSON.stringify(params)) return;
// The followig code will be executed only when the state changes externally, i.e. through navigating to a URL with params by the user
this._currentState = params;
this.makeApiCalls();
});
}
updateView()
{
this.makeApiCalls();
this.updateUri();
}
updateUri()
{
var url = this.router.createUrlTree([], { relativeTo: this.activatedRoute, queryParams: this._currentState }).toString();
this.router.navigateByUrl(url);
}
}
Solution: Specify browser history behavior
var createHistoryEntry = true // or false
var url = ... // see above
this.router.navigateByUrl(url, { replaceUrl : !createHistoryEntry});
Solution: Complex objects as state
This is beyond the original question but adresses common scenarios and might thus be useful: The state object above is limited to flat objects (an object with only simple string/bool/int/... properties but no nested objects). I found this limiting, because I need to distinguish between properties that need to be handled with a backend call and others, that are only used by the component internally. I wanted a state object like:
var state = { filter: { something: '', foo: 'bar' }, viewSettings: { ... } };
To use this state as queryParams object for the router, it needs to be flattened. I simply JSON.stringify all first level properties of the object:
private convertToParamsData(data) {
var params = {};
for (var prop in data) {
if (Object.prototype.hasOwnProperty.call(data, prop)) {
var value = data[prop];
if (value == null || value == undefined) continue;
params[prop] = JSON.stringify(value, (k, v) => {
if (v !== null) return v
});
}
}
return params;
}
and back, when handling the queryParams returned passed in by the router:
private convertFromParamsData(params) {
var data = {};
for (var prop in params) {
if (Object.prototype.hasOwnProperty.call(params, prop)) {
data[prop] = JSON.parse(params[prop]);
}
}
return data;
}
Finally: A ready-to-use Angular service
And finally, all of this isolated in one simple service:
import { Injectable } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import { Observable } from 'rxjs';
import { Location } from '#angular/common';
import { map, filter, tap } from 'rxjs/operators';
#Injectable()
export class QueryParamsService {
private currentParams: any;
externalStateChange: Observable<any>;
constructor(private activatedRoute: ActivatedRoute, private router: Router, private location: Location) {
this.externalStateChange = this.activatedRoute.queryParams
.pipe(map((flatParams) => {
var params = this.convertFromParamsData(flatParams);
return params
}))
.pipe(filter((params) => {
return !this.equalsCurrentParams(params);
}))
.pipe(tap((params) => {
this.currentParams = params;
}));
}
setState(data: any, createHistoryEntry = false) {
var flat = this.convertToParamsData(data);
const url = this.router.createUrlTree([], { relativeTo: this.activatedRoute, queryParams: flat }).toString();
this.currentParams = data;
this.router.navigateByUrl(url, { replaceUrl: !createHistoryEntry });
}
private equalsCurrentParams(data) {
var isEqual = JSON.stringify(data) == JSON.stringify(this.currentParams);
return isEqual;
}
private convertToParamsData(data) {
var params = {};
for (var prop in data) {
if (Object.prototype.hasOwnProperty.call(data, prop)) {
var value = data[prop];
if (value == null || value == undefined) continue;
params[prop] = JSON.stringify(value, (k, v) => {
if (v !== null) return v
});
}
}
return params;
}
private convertFromParamsData(params) {
var data = {};
for (var prop in params) {
if (Object.prototype.hasOwnProperty.call(params, prop)) {
data[prop] = JSON.parse(params[prop]);
}
}
return data;
}
}
which can be used like:
#Component({
selector: "app-search",
templateUrl: "./search.component.html",
styleUrls: ["./search.component.scss"],
providers: [QueryParamsService]
})
export class ProjectSearchComponent implements OnInit {
filter : any;
viewSettings : any;
constructor(private queryParamsService: QueryParamsService) { }
ngOnInit(): void {
this.queryParamsService.externalStateChange
.pipe(debounce(() => interval(500))) // Debounce optional
.subscribe(params => {
// Set state from params, i.e.
if (params.filter) this.filter = params.filter;
if (params.viewSettings) this.viewSettings = params.viewSettings;
// You might want to init this.filter, ... with default values here
// If you want to write default values to URL, you can call setState here
this.queryParamsService.setState(params, false); // false = no history entry
this.initializeView(); //i.e. make API calls
});
}
updateView() {
var data = {
filter: this.filter,
viewSettings: this.viewSettings
};
this.queryParamsService.setState(data, true);
// Do whatever to update your view
}
// ...
}
Don't forget the providers: [QueryParamsService] statement on component level to create a new service instance for the component. Don't register the service globally on app module.
I use this way to get it:
const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};
this.location.replaceState(
this.router.createUrlTree(
[this.locationStrategy.path().split('?')[0]], // Get uri
{queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
).toString()
);
-- EDIT --
I think that I should add some more informations for this.
If you use this.location.replaceState() router of your application is not updated, so if you use router information later it's not equal for this in your browser. For example if you use localizeService to change language, after switch language your application back to last URL where you was before change it with this.location.replaceState().
If you don't want this behaviour you can chose different method for update URL, like:
this.router.navigate(
[this.locationStrategy.path().split('?')[0]],
{queryParams: queryParamsObj}
);
In this option your browser also doesn't refresh but your URL change is also injected into Router of your application, so when you switch language you don't have problem like in this.location.replaceState().
Of course you can choose method for your needs. The first is more lighter because you don't engage your application more than change URL in browser.
Use attribute queryParamsHandling: 'merge' while changing the url.
this.router.navigate([], {
queryParams: this.queryParams,
queryParamsHandling: 'merge',
replaceUrl: true,
});
For me it was actually a mix of both with Angular 4.4.5.
Using router.navigate kept destroying my url by not respecting the realtiveTo: activatedRoute part.
I've ended up with:
this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())
In 2021 here is the solution I use. Create URL Tree using createUrlTree and navigate to route using location
//Build URL Tree
const urlTree = this.router.createUrlTree(["/employee/"+this.employeeId],{
relativeTo: this.route,
queryParams: params,
queryParamsHandling: 'merge'
});
//Update the URL
this.location.go(urlTree.toString());
In my case I needed to remove a query param of the url to prevent user to see it.
I found replaceState safer than location.go because the path with the old query params disappeared of the stack and user can be redo the query related with this query. So, I prefer it to do it:
this.location.replaceState(this.router.url.split('?')[0]);
Whit location.go, go to back with the browser will return to your old path with the query params and will keep it in the navigation stack.
this.location.go(this.router.url.split('?')[0]);
it's better to use activatedRoute.navigate() to change URL parameters and use snapshot (not subscribe) to call API if u don't want to call API when URL parameters change.
export class MyComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
const params = this.activatedRoute.snapshot.queryParams;
// params is the state object passed to the router on navigation
// Make API calls here
}
}
import { Component, OnInit } from '#angular/core';
import { Location } from '#angular/common';
#Component({
selector: 'child-component',
templateUrl: 'child.component.html',
styleUrls: ['child.component.scss']
})
export class ChildComponent implements OnInit {
constructor(
private location: Location
) {}
ngOnInit() {
// you can put 'this.location.go()' method call in any another method
this.location.go('parentRoute/anotherChildRoute');
}
}
For me, it changes child route in browser, without any current component reloading.
I was trying to update queryparams and navigate without reloading. By nature activatedRoute.snapshot.queryparams are readonly. And this turnaround approach solved my problem.
// Get queryparams
let state = Object.assign({}, this.route.snapshot.queryParams)
// Change parameters of url
state["z"] = "hi";
state["y"] = "bye";
// Create url and navigate to it without reloading
const url = this.router.createUrlTree([], { relativeTo: this.route, queryParams: state }).toString();
this.router.navigateByUrl(url);
I am experimenting with Angular2 (with no experience of Angular1), I have used data binding successfully, but I now want to add promises into the mix to simulate an async request for data.
In the following code, setting newData to an object literal works fine, but setting it to an existing populated object does not work.
After trying this for over a day, I need some help.
I'm looking for the simplest way to have my promise return some data and have it update the interpolated value in the template. I've read that zones are sometimes used for this, but at the moment, want to keep this to the bare minimum, to help my understanding (hence I've removed factory classes, interfaces, and dependency injection from the sample code)
I suspect the answer is in this victorsavkin post, but at my current level of understanding, it's beyond me.
http://plnkr.co/edit/amLIZWe5UI9jlvpVGv9V?p=preview
import {Component} from 'angular2/core'
import {MockData} from './mock-data.ts'
#Component({
selector: 'my-app',
providers: [],
template:`
<h1>
Hello {{data.name}}
</h1>`,
directives: []
})
export class App {
public data = {}
constructor() {
new Promise((response, reject) => {
setTimeout(function() {
newData = {name:'Sid'} //works
//newData = MockData //doesn't work
response(newData)
}, 1000)
})
.then(response => this.data = response)
}
}
mock-data.js
exports MockData = {
name:'Nancy'
}
I made these two changes to your plunker to get it to work:
export var MockData = {
name:'Brian'
}
import {MockData} from '../mock-data.ts'
New plunker.
You also don't have to initialize the data property if you use the Elvis operator (?.):
Hello {{data?.name}}
Then in your component just:
public data;
I'm running into an issue with an Ember CLI project where I can't get an injected ember service from a controller action function.
The really strange thing is that this totally works on my models and custom adapters:
the controller:
export default Ember.Controller.extend({
node: Ember.inject.service(),
azureStorage: Ember.computed.alias('node.azureStorage'),
actions: {
myAction: function () {
// this returns null
var x = this.get('azureStorage');
}
}
});
// The service code (azureStorage and fs are NOT null)
if (window.requireNode) {
azureStorage = window.requireNode('azure-storage');
fs = window.requireNode('fs');
}
export default Ember.Service.extend({
azureStorage: azureStorage,
fs: fs,
getActiveAccount: function (store) {
return new Ember.RSVP.Promise(function (resolve, reject) {
var accounts = store.all('account'),
length = accounts.get('length'),
i = 0;
accounts.forEach(function (account) {
if (account.get('active') === true) {
return Ember.run(null, resolve, account);
}
i += 1;
if (i >= length) {
return Ember.run(null, reject, 'could not find any active accounts');
}
});
});
}
});
// the controller test code
var controller = this.subject();
controller.send('myAction');
I would have expected this to return the service and the azureStorage object. On my models & adapters the same pattern works just fine:
export default DS.Adapter.extend({
serializer: serializer.create(),
node: Ember.inject.service(),
azureStorage: Ember.computed.alias('node.azureStorage'),
findQuery: function () {
// this returns the value correctly
var x = this.get('azureStorage');
}
});
Any reason this would work on models & adapters but NOT on a controller?
I'm not familiar with the Ember.inject.service() pattern, but is there a reason you're not using the pattern outlined in http://guides.emberjs.com/v1.10.0/understanding-ember/dependency-injection-and-service-lookup/ ?
Also, why are you injecting node and azureStorage into the controller if you've already abstracted them into an adapter? You should just be using this.store.find('whatever', 123) from the controller to get your data. If your azureStore is different than your normal Ember Data store, then you should create a new store and register it with the application's container. If you inject it in your controller, you can access it with this.azureStore, or alternatively this.container.lookup('store:azure').
Also, not a good practice to start injecting stuff into your models. I would really take a look at the Ember-friendly ways of doing service/dependency injection, because this doesn't look very elegant and you're duplicating a lot of code to get access to something you already have.