We Keep Coding

I have stored a regex in a variable that I initialized in a service .ts file, how can I use this variable on a formControl?

validationAR: any = "/^([0-9\s#,.=%$#&_\u0600-\u06FF])+$/";
Above is the variable I used to store the regex.

Say you have this common variable which you use it across the application, you create an appService in app.service.ts file and store this variable in it.
In the component where you want this variable, inject with appService using Dependency Injection there by having a single instance of appService.
In component.ts
//.. some imports ..
constructor(private appService: AppService) {}
someFormControl: new FormControl(
{ value: null, disabled: false },
{
validators: [
Validators.pattern(this.appService.myPattern)
]
}
)
This way you can use that variable in service file.

Suppose , you stored your regex in a service variable
*//.. some imports ..
#Injectable({
providedIn: 'root'
})
export class DataService{
validationRegEx = "/^([0-9\s#,.=%$#&_\u0600-\u06FF])+$/";
constructor() {}
}*
Now, the component in which you want to use this regex just import the service in the component & you can access all the required service variables.
*
//.. some imports ..
#Component({
selector: 'app-user-data',
templateUrl: './user-data.component.html',
styleUrls: ['./user-data.component.scss']
})
export class UserDataComponent implements OnInit {
constructor(private fb:FormBuilder,private dataService:DataService)
ngOnInit(): void {
this.userDetailsForm = this.fB.group({
userMobile: ['',[Validators.pattern(this.dataService.validationRegEx )]]
})
}
}

How to test angular guards/resolvers without mocking ActivatedRouteSnapshot

I'm trying to test an Angular Resolver which accesses children routes param.
My guard works fine but I cannot create an unit test easily because I cannot create an ActivatedRouteSnapshot with children routes (read only property).
My resolver
#Injectable({
providedIn: 'root'
})
export class MyResolverGuard implements Resolve<string> {
constructor() {
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): string {
return route.firstChild.paramMap.get('my-param');
}
}
My test :
it('should resolve chilren route params', () => {
guard = TestBed.get(MyResolverGuard);
const route = new ActivatedRouteSnapshot();
// Cannot assign children because it's a read only property
route.children = [...];
const myResolverParams = guard.resolve(route, null);
});
Is there other any other ways than using mock ActivatedRouteSnapshot ?
Does my approach to test guard is good ?
Thanks for sharing your strategy.

Angular 6 subject not catching subscribe event?

I created a component that holds a loader:
#Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.scss'],
providers: [LoaderService]
})
export class LoaderComponent implements OnInit {
showloader: boolean = false;
constructor (private loader_service:LoaderService) {}
ngOnInit () {
this.loader_service.showLoaderEventChange.subscribe(state => {
console.log(state); // Nothing prints !!
this.showloader = state;
})
}
}
and I have a service that I call from another component, and the call does work:
public grabJsonData (enviroment: string, language: string) {
this.loader_service.showLoader(true);
}
It uses the LoaderService:
#Injectable({
providedIn: 'root'
})
export class LoaderService {
showLoaderEventChange = new Subject<any>();
constructor() { }
showLoader(state){
this.showLoaderEventChange.next(state);
}
}
The loader component uses the LoaderService, listens for showLoaderEventChange to pass next().
But when I do this.showLoaderEventChange.next(state) it does not catch anything in the subscribe function.
Did I miss something?

Its because you are not using same instance of service for your components since you are injecting it in root as well as in Loader Component.
Try removing Providers : [LoaderService] from your Loadercomponent.

I'm not sure about Angular 6 since I haven't tested it out yet but in Angular 5 you have to create an observable to observe it from your Subject as such :
showLoaderEventChangeEmitter = new Subject<any>();
showLoaderEventChangeEvent$ = this.showLoaderEventChangeEmitter.asObservable();
Then use showLoaderEventChangeEmitter.next(); to trigger events and listen to them with showLoaderEventChangeEvent$.subscribe()

Angular 4 Singleton Services

I'm trying to create a service to share the data between two components. I injected the service into root module to make it accessible throughout the application by doing DI into the root module provider. My code looks roughly like this.
Service
#Injectable(){
export class ForumService{
forum: any;
setForum(object){
this.forum = object;
}
getForum(){
return this.forum;
}
}
Root Module
.......
import { ForumService } from 'forumservice';
.......
#NgModule({
declarations: [.....],
imports: [.....],
providers: [....., ForumService],
bootstrap: [AppComponent]
})
export class AppModule{}
Component One
//A bunch of import statements
import { ForumService } from 'forumservice'; //Without this Angular throws a compilation error
#Component({
selector: 'app-general-discussion',
templateUrl: './general-discussion.component.html',
styleUrls: ['./general-discussion.component.css'],
providers: [GeneralDiscussionService] //Not injecting ForumService again
})
export class GeneralDiscussionComponent implements OnInit{
constructor(private forumService: ForumService){}
ngOnInit(){
helperFunction();
}
helperFunction(){
//Get data from backend and set it to the ForumService
this.forumService.forum = data;
console.log(this.forumService.forum); //prints the data, not undefined
}
}
Component Two
//A bunch of import statements
import { ForumService } from 'forumservice'; //Without this Angular throws a compilation error
#Component({
selector: 'app-forum',
templateUrl: './forum.component.html',
styleUrls: ['./forum.component.css'],
providers: []
})
export class ForumComponent implements OnInit {
forumData: any;
constructor(private forumService: ForumService){}
ngOnInit(){
this.forumData = this.forumService.forum; // returns undefined
}
}
Once I navigate from Component One to Component Two I'm expecting "This is a string". However I get undefined. Is it because of the import statements in the component? If I remove that I see a compilation error saying that ForumService is not found.

Instead of using getter and setter, use the object (not primitibe such as string) directly In your components.
Your service
#Injectable(){
export class ForumService{
forum:any = {name:string};
}
Component one
export class GeneralDiscussionComponent implements OnInit{
constructor(private forumService: ForumService){}
ngOnInit(){
this.forumService.forum.name="This is a string";
}
}
Component two
export class ForumComponent implements OnInit {
// forumTitle: string; // do not need this anymore
forum:any; // use the forum.name property in your html
constructor(private forumService: ForumService){}
ngOnInit(){
this.forum = this.forumService.forum; // use the
}
}
I know encapsulating is preferable, and with your current code you are probably encountering some timing problems. But when working with shared data in a service you can two-way bind the variable like above, and your components will be in sync.
EDIT:
Also an important notice, the variable you want to sync between components needs to be an object. instead of forumTitle:string, make it forumTitle:any = {subject:string} or something similar.
Otherwise you need to make your components as listeners for data when data changes in your service.

I'd use BehaviorSubject in this case, should be something like that:
#Injectable(){
export class ForumService{
private _forum: BehaviorSubject<any> = new BehaviorSubject<any>(null);
public forum: Observable<any> = this._forum.asObservable();
setForum(object){
this._forum.next(object);
}
}
Then just bind it in template with async pipe: {{forumService.forum|async}} or subscribe to it.

What is the best way pass data to other components

I am trying to pass user info object to all low level component,
the issue is what is the best way to pass it to lover component even if they are grandchildren?
If the #input will work or have anther way to pass it?
my code for root component is:
constructor(private _state: GlobalState,
private _imageLoader: BaImageLoaderService,
private _spinner: BaThemeSpinner, public af: AngularFire) {
this._loadImages();
this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
this.isMenuCollapsed = isCollapsed;
});
// this.af.auth.subscribe(
// user => this._changeState(user),
this.af.auth.subscribe( user => this._changeState(user));
}

Have you considered creating a service class? They're singletons, so the same instance of that class gets injected into each and every component that asks for it.
https://angular.io/docs/ts/latest/guide/dependency-injection.html
A simple one would look like this
import { Injectable } from '#angular/core';
#Injectable()
export class DummyService {
public userInfo: UserInfo = {
//User stuff goes here
};
}
And you would add it to a component like this.
import {DummyService} from 'dummy.service';
#Component({
selector: 'my-component',
templateUrl: 'my.component.html'
})
export class MyComponent{
constructor(private myDummyService: DummyService){}
}
At runtime, this would inject the same instance of the class into every component you inject it into. So it's a super handy way of syncronizing data across multiple components.