I have an angular app, and I want to create a toastr like service where I can show different kinds of predefined modals (confirmation, contact us etc..) from different places in my app.
For example:
I have a ConfirmBackButtonBehaviorGuard which is bound to the route canDeactivate behavior.
From this guard, I want to open a modal using a service like:
const promise = modalsService.openConfirmDialog('Are you sure', 'Leaving this page without saving....', 'Yes Take Me Out', 'Stay Here' );
var result = await promise();
...
The problem is that I need to access some viewContainerRef in order to dynamically create the modal.
I thought about adding some container into the app.component, but I'm not sure how to access it from (if it is even possible) from a service.
I would use CompnentFactoryResolver class to achieve similar behavior. The class resolveComponentFactory method dynamically resolves component which you pass in as a parameter. It also allows you to pass data to your dynamic component by utilizing injection tokens, listen (subscribe) to close action and pull results from dialog.
Here is an example of what the api might look like once implemented:
#Component({
selector: 'app-host-modal',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppHostModal {
constructor(public modalService: ModalService) {}
onConfirmCancel(): void {
this.modalService.open(FancyPopupComponent, {
data: { message: 'Are you sure?' },
});
}
}
This article provides details on how to implement this.
Besides custom implementation, you can use CDK overlays.
Another and the easiest option is to use material dialog.
Related
I am getting the transition data in the route js file like so:
beforeModel(transition) { console.log(transition) }
And I want to use it in a function in my controller like this:
import Controller from '#ember/controller';
export default class ListingsController extends Controller {
get pageTitle() {
if (this.transition.targetName == 'foo') {
return 'page title';
}
}
}
And then I want to display the result like this:
<h1>{{this.pageTitle}}</h1>
I cannot find a way to pass the transition data from the route to the controller. Any ideas?
While you technically can leverage the beforeModel to get the controller via this.controllerFor as #KathirMagaesh suggests, I wouldn't actually advocate for this solution. It's definitely not the normal or expected Ember pattern. Furthermore, if you look at the transition api, there is no reference to transition.targetName. If this works, this is private api and thus brittle.
If you need to change a property based on the current route, you should be using the public router service which provides some useful properties for this very purpose!
For example, in your controller you could have a computed property that leverages the router service to determine what the page title should be
import Controller from '#ember/controller';
import { computed } from '#ember/object';
import { inject } from '#ember/service';
// this injects the router service into our component via Ember's DI framework
router: inject(),
export default Controller.extend({
pageTitle: computed('router.currentRouteName', function(){
let currentRoute = this.router.currentRouteName;
if(currentRoute === 'foo'){
return 'page title';
}
// do other stuff for other routes.
})
})
This leverages currentRouteName which is the period separated name like foo.bar. You can also also access the url via currentURL which would be /foo/bar
PS. Since I haven't used ES6 classes yet, I've provided the old style ember solution. You'll probably need to use the #computed decorator or #tracked where I'm using the computed function. I only know about the Octane ember style from RFCs and awesome blog posts but am not up to date with what's landed.
PPS. If you're on old ember, the current route name / URL properties are available on the application controller.
In the beforeModel hook use
this.controllerFor(currentrRouteName).set('transition', transition);
This will set transition property in controller of the current router.
For more on controllerFor()
So, I'm looking solution for the problem... Ok, let me share my thoughts and possible you could help me or say that I'm wrong.
Introduction:
When you are creating angular apps usually you create the service which calls like AuthService which contain methods login, logout, refreshToken and etc.
But, you also need to store somewhere your current users, it will be user who was logged in your application. Usually you will create something like UserModel with fields like firstname, lastname, balance, group, friends and etc.
And so, you are store instance of this model in AuthService.
After that for getting active user you need to inject your Auth service in your #component like this:
constructor(private _authService: AuthService) {
this.user = this._authservice.user;
}
Yep?
The problem:
So, I do not want inject authService for getting current user. I want to have CurrentUser service which will be allowed across all modules and will contain everything about logged user like UserModel.
I want something like this:
constructor(public user: UserService) {
}
BUT when user do logout I need to cleanup UserService and re-initialize every field to default value. So, this step it is a real problem.
Yes, sure, I can do for ... in cycle by object fields, but it's sucks!
I want to create new instance of UserService and make re-assign in global scope.
If you still do not understand - UserService was declared as provider in my root AppModule like this:
#NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
UserService
]
})
export class AppModule {}
Question:
How can I create new instance for UserService and replace it in global?
When user logout I want to do this and all my components will get new, clean instance of UserService without filled fields and etc. And when new user will be logged in I'll use method of UserService class like user.updateUser(data) for filling this instance.
This can be achieved by declaring the service UserService to the highest level component your user is directed to after logging in (say HomeComponent). Continue to declare your authService as a provider in your root app.module.ts so it remains a singleton for the entire application life time.
By doing this the UserService will be created each time a User logs in and it will be available to all the children of the home component (which is why you will want to be sure to provide it at the highest level component), and it will be destroyed each time a user logs out. Creating a singleton for each user session.
#Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [UserService]
})
export class HomeComponent {...}
I want to stress the highest level component. Essentially from an Architecture perspective what you would want to do is (in this example) be sure to make the HomeComponent essentially a container component for all routes/components a logged in user would need to access thereafter. Otherwise, this technique will not succeed for say sibling components, as the sharing of the UserService is dependent upon the hierarchical component structure.
I think the real question is why would you want this behaviour?
If it's regarding state then you should use a state management tool for this like ngrx or ng2redux so that the state is abstracted away from your components and services.
Then you can cleanly logout and login with different events and handle what should happen with the states upon each action.
try to make use of BehaviorSubjects. this should go in your service class:
public userData: new BehaviorSubject({});
once you get the logged in user data, store in the behavior subject like this
in the component:
this.userService.userData.next(response);
and when you need to fetch it across other components, just use this:
this.userService.userData.value();
N.B.: when the user refreshes, be it a service or a behavior subject, all will refresh. so, try using it in seasion storage or in Node cache.
I'm trying to get into Nativescript + Angular2, and I read the following in the tutorial:
We’ll build this functionality as an Angular service, which is Angular’s mechanism for reusable classes that operate on data.
What they then do is to create a simple class, like this:
import { Injectable } from "#angular/core";
import { User } from "./user";
#Injectable()
export class UserService {
register(user: User) {
alert("About to register: " + user.email);
}
}
Now, I can't really see the difference between a normal class and a service - this is a very normal class definition.
So, why is it called an "Angular service"?
This creates a basic Angular service with a single method that takes an instance of the User object you created in the previous section.
Also, when using this "service" in the tutorial, it isn't clear to me when this class is instantiated - when is the construction executed? Is the object saved in memory for later use? The only call to the "userservice" in the tutorial is like this:
import { Page } from "ui/page";
import { Component, ElementRef, OnInit, ViewChild } from "#angular/core";
import { User } from "../../shared/user/user";
import { UserService } from "../../shared/user/user.service";
import { Router } from "#angular/router";
import { Color } from "color";
import { View } from "ui/core/view";
#Component({
selector: "my-app",
providers: [UserService],
templateUrl: "./pages/login/login.html",
styleUrls: ["./pages/login/login-common.css", "./pages/login/login.css"]
})
export class LoginComponent implements OnInit {
user: User;
isLoggingIn = true;
#ViewChild("container") container: ElementRef;
constructor(private router: Router, private userService: UserService, private page: Page) {
this.user = new User();
this.user.email = "bla#bla.com";
this.user.password = "1234";
}
//.... methods and stuff...
}
A class, in that context, is a regular class as in any other OO language: a "prototype" of objects which you can create instances simply using:
let myInstance = new MyClass(<arguments...>);
So, actually, an Angular service is also a class.
But consider services a special kind of class. The main difference between regular classes and service classes is their lifecycle, specially who creates their instance (who calls new).
Instances of a service are created - and managed (disposed) - by the Angular "container" (angular injector, actually).
You can also "inject" instances of service classes in constructors of other service classes (or other managed components).
A good resource in the capabilites of services is Angular's Dependency Injection Guide.
When is the construction executed?
The injector executes the construction. When? See below.
Is the object saved in memory for later use?
It could be. Depends on where you registered the service.
Before anything, know that Angular DI is a hierarchical injection system.
If you register the service with an Angular Module, the service will be created by the application's root injector. So everyone below it (aka everyone in that module) will receive the same instance of the service. In other words, Angular (will call the injector only once and) will create only one instance of the service class and pass that same instance to whoever asks for that service. And that instance will live as long as that module lives.
Now, if you register the service with a component, then the service will be registered with that component's injector. So when such component requests an instance of the service, angular will call the injector and create an instance. If any child of that component asks for an instance of such service, angular will provide the same instance. No one else, only children of the component, will receive that same instance. When that component dies, the service instance dies as well.
How does a "regular class" differ? It lacks the Injector?
The difference is not only the lack of an injector.
Angular aside, just JavaScript: you create an instance of a "regular class" by calling let instance = new MyRegularClass() somewhere in your code, right?
This instance has no "magical effects", it does nothing more than any class would (just regular JavaScript methods and properties). Example: if you need instances of other classes as arguments in the constructor, no one will "magically" create you those instances and pass them. You will have to create them manually, when calling new (e.g. new MyClass(new SomeOtherClassIDependOn(), ...)). If you want to instantiate SomeOtherClassIDependOn only once and reuse the same instance everywhere it is needed, you will have to save that instance and pass it wherever it is neeed yourself.
As services, though, angular can take some of that burden off your shoulders.
Now, before anything: since every service, deep down, is a class, someone has to call new MyServiceClass(). The difference is that someone is not you anymore. There is no new UserService() in your code. So, who is it? This someone is the Injector.
When Angular notices someone asks for a service, it calls for the injector to instantiate that service. The injector then calls let serviceInstance = new MyServiceClass(<dependencies>) and adds some "magic" to it (e.g. it can pass - inject - instances of other services to the constructor of a service), and make it available (save it) for anyone that requests that service in the scope you registered it.
Note: You can call new UserService(...) yourself, as it UserService is a class. But this instance is a regular object, not managed by angular, there is no magic (no constructor arguments will be injected, no instance is saved and reused).
I am creating an Angular app and need some help with the data binding.
I have a Dashboard where I have different Widgets. Every Widget has a name and a date.
To configure/change this settings I have created a Sidebar that can be shown.
I am using a router to display the dashboard view. And the sidebar is not a children of the dashboard it is outside of the router.
When I click on the settings button on a Widget the Sidebar should open and should be able to show and change the settings of this Widget and than the Widget should run an update function.
I have already tried to work with a shared service but I dont think that this is the best solution because I have multiple Widgets each with different settings object.
Shared Service is the way to go about the things over here , As there is no parent child Relationship Between Components you cannot use Event Emitters.
If you want to take things up a notch and go for a cleaner Design pattern go Ngrx Suite. It is tailor maid for such scenarios but keep in mind it will reqire some additional dependencies and also bit more code.
Go for Ngrx is the app is Large else stick to shared services.
A shared service is a good call for this scenario, since you won't be able to bind to your click event in your router-outlet tag.
Let's say you have a component (pseudocode):
class MyWidget {
widgetData: Object;
constructor(private myService: MyService) { }
handleClick(event) {
this.myService.sendClick({event, data:this.widgetData})
}
}
Then in your service, you can use a Subject to keep store the data that is needed for your Sidebar component.
Example service (psuedocode):
class MyService {
subject = new Subject();
sendClick(data) {
this.subject.next(data);
}
getClick(data) {
return this.subject.asObservable();
}
}
Finally, your Sidebar will be able to Subscribe to the getClick() method from your service:
class Sidebar {
widgetData: Object;
constructor(private myService: MyService) {
myService.getClick()
.subscribe(v => doSomethingWithWidgetData(v));
}
}
For another resource: this blogpost has a good explanation of this concept.
You cannot use Event Emitters since there is no relationship between two components, so ideal way would be to use is Shared Service.
I'd like to be able to pass some data\propagate events from a plugin on the page to my Angular 4 app.
More specifically, in my case data\events are generated inside a Silverlight plugin app that is next to the Angular app on the page.
I have the following solution in my mind:
Create a global JS function which gets called from Silverlight (since this seems to be the simplest way to get data out from Silverlight) when
there is a need to talk to Angular side.
The function, in turn, calls some Angular class method passing data
collected from Silverlight.
As an illustration to that (excluding the Silverlight part), we could have the following.
A method as an entry point on the Angular side:
export class SomeAngularClass {
public method(data: any): void {
...
}
}
And somewhere outside the Angular realm, we add a global plain JavaScript function (to be called by Silverlight):
window.somePlainJsFunction = function (data) {
// How to consume SomeAngularClass.method() from here?
}
The question is: how can we call the Angular class methods from a plain JavaScript function?
As pointed by #Dumpen, you can use #HostListener to get the custom event dispatched from javascript outside of Angular. If you also want to send parameters, then you can send them by adding them as detail object.
In Javascript:
function dispatch(email, password) {
var event = new CustomEvent('onLogin', {
detail: {
email: email,
password: password
}
})
window.dispatchEvent(event);
}
Then you can call this method on button click.
Now to listen to this dispatched event in Angular, you can create function in Angular component and add #HostListener to it like below:
#HostListener('window:onLogin', ['$event.detail'])
onLogin(detail) {
console.log('login', detail);
}
This code you can add in any component. I have added it to my root component - AppComponent
You can use a events, so you have the JavaScript send an event that you are listening for in your service.
The CustomEvent is a new feature so you might need to polyfill it: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
JavaScript:
var event = new CustomEvent("CallAngularService");
window.dispatchEvent(event);
Angular:
#HostListener("window:CallAngularService")
onCallAngularService() {
// Run your service call here
}
I think this is what you are looking for service out side angular
You can create function/class outside Angular and provide as a value in the angular. in this way you can handle both angular and non angular stuffs together:
class SomePlainClass {
...
}
window.somePlainJsFunction = new SomePlainClass();
#NgModule({
providers: [{provide: SomePlainClass, useValue: window.somePlainJsFunction}],
...
})
class AppModule1 {}
#NgModule({
providers: [{provide: SomePlainClass, useValue: window.somePlainJsFunction}],
...
})
class AppModule2 {}
class MyComponent {
constructor(private zone:NgZone, private SomePlainClass:SharedService) {
SomePlainClass.someObservable.subscribe(data => this.zone.run(() => {
// event handler code here
}));
}
}
The way it should be done depends on particular case, especially on the precedence.
If Silverlight aplication is initialized before Angular application, and window.somePlainJsFunction is called before finishing Angular application initialization, this will result in race condition. Even if there was an acceptable way to get Angular provider instance externally, the instance wouldn't exist during somePlainJsFunction call.
If window.somePlainJsFunction callback is called after Angular bootstrap, window.somePlainJsFunction should be assigned inside Angular application, where SomeAngularClass provider instance is reachable:
window.somePlainJsFunction = function (data) {
SomeAngularClass.method();
}
If window.somePlainJsFunction callback is called before Angular bootstrap, it should provide global data for Angular application to pick up:
window.somePlainJsFunction = function (data) {
window.angularGlobalData = data;
}
Then window.angularGlobalData can be used inside Angular, either directly or as a provider.
Working Example