Data Sharing between Angular components - javascript

I am new in angular 6. I am creating a project using angular 6. I am coming in to a problem while sharing the data. Here is the project structure:
1) Header Component
2 Login Component
3) Home Component
4) Shared Service
I am adding the class in my header component on the basis of current route.
This was working on page refresh. But when i move from one component to other this was not working.
Here is the code:
Layout Component is:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
Header Component:
ngOnInit() {
console.log(this.dataService.urlExists())
if(this.dataService.urlExists()){
this.url = true
}else{
this.url = false
};
}
<header class="stick-top forsticky" id="header" [ngClass]="{'gradient': url==true}">
</header>
Shared Service:
urlExists(){
this.url = this.router.url
if(this.url == "/"){
return false;
}else{
return true;
}
}
Please note: On page refresh this is working..

It is because, your header component is not reinited when navigating as it is outside of router-outlet. You need to listen route changes and perform desired operations accordingly.
So in the Header Component, you can subscribe to router events and listen NavigationEnd events to check URL:
import {NavigationEnd, Router} from '#angular/router';
import {filter} from 'rxjs/operators';
...
constructor(private router: Router) {
this.subscribeRouterEvents();
}
subscribeRouterEvents = () => {
this.router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(() => {
console.log(this.dataService.urlExists())
if(this.dataService.urlExists()){
this.url = true
}else{
this.url = false
};
});

Related

hide component in Angular in certain dynamic route

I need to hide certain components from my main home page like the navbar and footer when I'm logged in to my admin panel. My admin components are lazy-loaded based on an admin module when called. The necessary components are getting hidden as expected when on admin view if the routes are not dynamic i.e like /admin/login, /admin/dashboard etc. But the problem starts if the routes are dynamic like /admin/category/:categoryId or /admin/user/:userId and in these routes the necessary components like navbar and footer doesn't hide itself. I'm getting the dynamic ids for the routes using ActivatedRoute in the necessary components. Below is the method I'm using on my main page to read the application routes and show/hide components accordingly.
Main.ts
import { Router, NavigationEnd } from '#angular/router';
public url: any;
constructor(private router: Router) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.url = event.url;
}
})
}
Main.html
<div class="main__container">
<app-navbar
*ngIf="url !== '/admin' && url !== '/admin/dashboard' && url !== '/admin/post-article' && url !== '/admin/video' && url !== '/admin/login' && url !== '/admin/sign-up' && url !== '/admin/category/:categoryId'">
</app-navbar>
<app-footer
*ngIf="url !== '/admin' && url !== '/admin/dashboard' && url !== '/admin/category/:categoryId' && url !== '/admin/post-article' && url !== '/admin/video' && url !== '/admin/login' && url !== '/admin/sign-up'">
</app-footer>
</div>
What you need here is to define regular expressions and test against those.
Or maybe it's enough for you to check the string#includes(string) function. I would also suggest to use a more reactive (rxjs like) approach.
On my template I would have:
<div class="main__container">
<app-navbar *ngIf="canShowNavBar$ | async">
</app-navbar>
<app-footer *ngIf="canShowFooter$ | async">
</app-footer>
</div>
Where on the typescript file I would have:
export class YourComponent implements OnInit {
canShowNavBar$: Observable<boolean>;
canShowFooter$: Observable<boolean>;
navigationEvents$: Observable<NavigationEnd>;
constructor(private router: Router){}
ngOnInit() {
// Like this we define the stream of the NavigationEnd events
this.navigationEvents$ = this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
// This one is not really needed but we're giving some hints to the typescript compiler
map(event => event as NavigationEnd)
);
// Here we define the stream of booleans that determine whether to show the component or not on your template.
this.canShowNavBar$ = this.navigationEvents$.pipe(
map(event => this.shouldShowNavBar(event.url))
);
// Because actually you check for the same conditions
this.canShowFooter$ = this.canShowNavBar$;
}
shouldShowNavBar(url: string): boolean {
// And here you should test against regular expressions:
switch(true) {
case /\/admin\/dashboard/.test(url):
case /\/admin\/category/.test(url):
// More cases where you should show the navBar
return true;
default: return false;
}
}
}
You can read more about Regular Expressions on JavaScript here
Another approach of implementing the shouldShowNavBar would be using some array predicates like some: Like so:
shouldShowNavBar(url: string): boolean {
const conditions = [
!url.startsWith('/admin/dashboard'),
!url.includes('/admin/category'),
// More conditions?
];
return conditions.some(isTrue => isTrue);
}
If you don't want to use the async keep your code as it was but do:
<div class="main__container">
<app-navbar *ngIf="shouldDisplayNavBar(url)">
</app-navbar>
<app-footer *ngIf="shouldDisplayNavBar(url)">
</app-footer>
</div>
shouldShowNavBar(url: string): boolean {
if(!url) {
return false;
}
const conditions = [
!url.startsWith('/admin/dashboard'),
!url.includes('/admin/category'),
// More conditions?
];
return conditions.some(isTrue => isTrue);
}
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
constructor(
private router: Router,
) {}
ngOnInit() {
}
/**
* Check if the router url contains the specified route
*
* #param {string} route
* #returns
* #memberof MyComponent
*/
hasRoute(route: string) {
return this.router.url.includes(route);
}
}
<!-- First view -->
<div *ngIf="hasRoute('home')">
First View
</div>
<!-- Second view activated when the route doesn't contain the home route -->
<div *ngIf="!hasRoute('home')">
Second View
</div>

Get the URL with Angular Router

I need to fetch my current route (using the Router) in a component (my Nav component) which is located in the App Component but as it's already loaded, it's not refreshing on a click and my function in the nav component isn't returning any new URL.
How can I manage to have the new URL with my nav component ?
Here is my app component :
<app-nav></app-nav>
<body>
<div class="container">
<router-outlet></router-outlet>
</div>
</body>
Here is my nav component (.ts) :
ngOnInit() {
console.log(this.router.url);
if(this.router.url == "/") {
this.color = "large";
this.logoPath = "assets/logos/w-logo-full.png";
} else {
this.color = "small";
this.logoPath = "assets/logos/c-logo-full.png";
}
It was working when my app-nav was in every component but it's not working anylonger since I've moved it..
you can use router service events observable
app.component
constructor( public router: Router,) {
}
public ngOnInit(): void {
this.router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
console.log(this.router.url);
// ...
}
});
}
NavigationEnd An event triggered when a navigation ends successfully.
You need subscribe ActivatedRoute service
something like this:
Add ActivatedRoute:
constructor(
protected route: ActivatedRoute,
...) {
}
Add add subscribe :
this.route.url.subscribe(value => {
....
});
import {
ActivatedRoute
} from '#angular/router';
export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute) {
console.log("current route is " + route);
}
}

Navigate in Angular 7 without adding parameter to URL

I want to navigate between two routes in Angular 7 with posting data between them. But I don;t want to show those parameter in URL. How to do it in proper way?
at this moment I am strugging with something like this:
this.router.navigate(['/my-new-route', {data1: 'test', test2: 2323, test: 'AAAAAAA'}]);
and it change my url to
http://localhost:4200/my-new-route;data1=test;test2=2323;test=AAAAAAA
how to do it to cancel those data from url:
http://localhost:4200/my-new-route
Edit:
My case:
/form - route with some form
/options - route with some data
on /form route - users have some form with empty fields to fill manually
but on /options page there is some preset configuration, when user choose one is navigated to /form and fields are fill autmatically
when they move back to another page and back again to /form - should see empty form. Only link from /options to /form should fill those fields.
You can create a service and share it between both the components (the one that you're moving from, and the one that you're moving to).
Declare all the parameters that you want to pass to the URL, in the service, and before the router.navigate([]), set the values for parameters in the service.
You can access those parameters from the other component with that service.
Example:
SharedService
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class SharedService {
data1;
test2;
test;
}
Component1
import { SharedService } from 'location';
import { Router } from '#angular/router';
...
constructor(private _sharedService: SharedService,
private _router: Router) { }
...
this._sharedService.data1 = 'test'
this._sharedService.test2 = 2323;
this._sharedService.test = 'AAAAAAAA';
this._router.navigate(['/my-new-route']);
...
Component2
import { SharedService } from 'location';
...
private test2;
private test;
private data1;
constructor(private _sharedService: SharedService){ }
ngOnInit() {
this.data1 = this._sharedService.data1;
this.test2 = this._sharedService.test2;
this.test = this._sharedService.test;
...
}
There are few ways to do it.
Try 1 :
this.router.navigate(['/some-url'], { queryParams: filter, skipLocationChange: true});
Try 2 :
We can use this work around instead by using EventEmitter and BehaviorSubject with a shared service
In component 1:
this.router.navigate(['url']).then(()=>
this.service.emmiter.emit(data)
)
In service :
emmiter : EventEmitter = new EventEmitter();
In component 2: inside constructor
this.service.emmiter.subscribe();
another solution for passing information from one route to another without touching the query params is via the state field of NavigationExtras (as of Angular 7.2+)
something along these lines
// Publish
<a
[routerLink]="['/studies', study.id]"
[state]="{ highlight: true }">
{{study.title}}
</a>
// Subscribe
constructor(private route: ActivatedRoute, ...) {
}
public highlight: boolean;
public ngOnInit() {
...
this.route.paramMap
.pipe(map(() => window.history.state))
.subscribe(state => {
this.highlight = state && state.highlight;
});
...
}
// Alternative
constructor(private router: Router, ...) {
}
public highlight: boolean;
public ngOnInit() {
...
this.router.events.pipe(
filter(e => e instanceof NavigationStart),
map(() => this.router.getCurrentNavigation().extras.state)
)
.subscribe(state => {
this.highlight = state && state.highlight;
})
...
}
pass value through "state" key from which you want to naviagte to next component:
//From where we Navigate
import {ActivatedRoute, NavigationExtras, Router} from "#angular/router";
export class MainPageComponent {
constructor(public router:Router) {}
navWithExtraValue () {
const navigationExtras: NavigationExtras = {
state: {
editMode: true
},
};
}
}
//In constructor where we Navigated
constructor(public router:Router,
public route:ActivatedRoute){
this.route.queryParams.subscribe(data=> {
if (this.router.getCurrentNavigation().extras.state) {
this.editMode = this.router.getCurrentNavigation().extras.state.editMode;
}
});
We don't see these value in url

ngFor loop content disapears when leaving page

I am new to Angular and Ionic. I am looping through an array of content that is store in my Firestore database. When the app recompiles and loads, then I go to the settings page (that's where the loop is happening), I see the array of content just fine. I can update it on Firestore and it will update in real time in the app. It's all good here. But if I click "Back" (because Settings is being visited using "navPush"), then click on the Settings page again, the whole loop content will be gone.
Stuff is still in the database just fine. I have to recompile the project to make the content appear again. But once again, as soon as I leave that settings page, and come back, the content will be gone.
Here's my code:
HTML Settings page (main code for the loop):
<ion-list>
<ion-item *ngFor="let setting of settings">
<ion-icon item-start color="light-grey" name="archive"></ion-icon>
<ion-label>{{ setting.name }}</ion-label>
<ion-toggle (ionChange)="onToggle($event, setting)" [checked]="setting.state"></ion-toggle>
</ion-item>
</ion-list>
That Settings page TS file:
import { Settings } from './../../../models/settings';
import { DashboardSettingsService } from './../../../services/settings';
import { Component, OnInit } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-dashboard-settings',
templateUrl: 'dashboard-settings.html',
})
export class DashboardSettingsPage implements OnInit {
settings: Settings[];
checkStateToggle: boolean;
checkedSetting: Settings;
constructor(public dashboardSettingsService: DashboardSettingsService) {
this.dashboardSettingsService.getSettings().subscribe(setting => {
this.settings = setting;
console.log(setting.state);
})
}
onToggle(event, setting: Settings) {
this.dashboardSettingsService.setBackground(setting);
}
}
And my Settings Service file (the DashboardSettingsService import):
import { Settings } from './../models/settings';
import { Injectable, OnInit } from '#angular/core';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
#Injectable()
export class DashboardSettingsService implements OnInit {
settings: Observable<Settings[]>;
settingsCollection: AngularFirestoreCollection<Settings>;
settingDoc: AngularFirestoreDocument<Settings>;
public checkedSetting = false;
setBackground(setting: Settings) {
if (this.checkedSetting == true) {
this.checkedSetting = false;
} else if(this.checkedSetting == false) {
this.checkedSetting = true;
};
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({state: this.checkedSetting});
console.log(setting);
}
constructor(private afAuth: AngularFireAuth,private afs: AngularFirestore) {
this.settingsCollection = this.afs.collection('settings');
this.settings = this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
return data;
});
});
}
isChecked() {
return this.checkedSetting;
}
getSettings() {
return this.settings;
}
updateSetting(setting: Settings) {
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({ state: checkedSetting });
}
}
Any idea what is causing that?
My loop was in a custom component before, so I tried putting it directly in the Dashboard Settings Page, but it's still not working. I have no idea what to check here. I tried putting the :
this.dashboardSettingsService.getSettings().subscribe(setting => {
this.settings = setting;
})
...part in an ngOninit method instead, or even ionViewWillLoad, and others, but it's not working either.
I am using Ionic latest version (3+) and same for Angular (5)
Thank you!
From the Code you posted i have observed two findings that might be the potential cause for the issue ,
Calling of the Service method in the constructor :
When your setting component is created , then that constructor will be called but but if you were relying on properties or data from child components actions to take place like navigating to the Setting page so move your constructor to any of the life cycle hooks.
ngAfterContentInit() {
// Component content has been initialized
}
ngAfterContentChecked() {
// Component content has been Checked
}
ngAfterViewInit() {
// Component views are initialized
}
ngAfterViewChecked() {
// Component views have been checked
}
Even though you add your service calling method in the life cycle events but it will be called only once as you were subscribing your service method in the constructor of the Settings service file . so just try to change your service file as follows :
getSettings() {
this.settingsCollection = this.afs.collection('settings');
this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
return data;
});
});
}
Update :
Try to change the Getsettings as follows and please do update your question with the latest changes
getSettings() {
this.settingsCollection = this.afs.collection('settings');
return this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
return data;
});
});
}
I'm not certain, but I suspect the subscription to the settings observable settings: Observable<Settings[]> could be to blame. This may work on the first load because the DashboardSettingsService is being created and injected, therefore loading the settings, and then emitting an item (causing your subscription event in DashboardSettingsPage to fire).
On the second page load, DashboardSettingsService already exists (services are created as singletons by default) - this means that the constructor does not get called (which is where you set up your observable) and therefore it does not emit a new settings object for your component.
Because the Observable does not emit anything, the following event will not be fired, meaning your local settings object is never populated:
this.dashboardSettingsService.getSettings().subscribe(setting => {
this.settings = setting;
console.log(setting.state);
})
You could refactor your service with a method that provides the latest (cached) settings object, or a new Observable (dont forget to unsubscribe!!), rather than creating a single Observable which will only be triggered by creation or changes to the underlying storage object.
Here's a simple example that doesnt change your method signature.
import { Settings } from './../models/settings';
import { Injectable, OnInit } from '#angular/core';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
#Injectable()
export class DashboardSettingsService implements OnInit {
settings: Observable<Settings[]>;
cachedSettings: Settings[];
settingsCollection: AngularFirestoreCollection<Settings>;
settingDoc: AngularFirestoreDocument<Settings>;
public checkedSetting = false;
setBackground(setting: Settings) {
if (this.checkedSetting == true) {
this.checkedSetting = false;
} else if(this.checkedSetting == false) {
this.checkedSetting = true;
};
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({state: this.checkedSetting});
console.log(setting);
}
constructor(private afAuth: AngularFireAuth,private afs: AngularFirestore) {
this.settingsCollection = this.afs.collection('settings');
this.settings = this.settingsCollection.snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Settings;
data.id = a.payload.doc.id;
this.cachedSettings = data;
return data;
});
});
}
isChecked() {
return this.checkedSetting;
}
getSettings() {
return Observable.of(this.cachedSettings);
}
updateSetting(setting: Settings) {
this.settingDoc = this.afs.doc(`settings/${setting.id}`);
this.settingDoc.update({ state: checkedSetting });
}
}

Angular 2: uiRouter get current state params in root component

How can i get params in root component? (app.component.ts)
I have such app.component.ts (i'm using Angular/Cli):
...
import {Transition} from "#uirouter/angular";
...
export class AppComponent {
id: any;
constructor(private trans: Transition) {
this.id = trans.params().someId;
}
}
but i get:
ERROR Error: No provider for Transition!
But if i use the same logic in any inner component (which has route) - everything is fine. What i do wrong?
Also!
I'm using ngx-restangular. And i have in app.module.ts:
// Function for settting the default restangular configuration
export function RestangularConfigFactory (RestangularProvider, authService) {
RestangularProvider.setBaseUrl('http://api.test.com/v1');
// This function must return observable
var refreshAccesstoken = function () {
// Here you can make action before repeated request
return authService.functionForTokenUpdate();
};
RestangularProvider.addErrorInterceptor((response, subject, responseHandler) => {
if (response.status === 403) {
/*Here somehow I need to get route params too, is it possible, and how?*/
refreshAccesstoken()
.switchMap(refreshAccesstokenResponse => {
//If you want to change request or make with it some actions and give the request to the repeatRequest func.
//Or you can live it empty and request will be the same.
// update Authorization header
response.request.headers.set('Authorization', 'Bearer ' + refreshAccesstokenResponse)
return response.repeatRequest(response.request);
})
.subscribe(
res => responseHandler(res),
err => subject.error(err)
);
return false; // error handled
}
return true; // error not handled
});
}
// AppModule is the main entry point into Angular2 bootstraping process
#NgModule({
bootstrap: [ AppComponent ],
imports: [
// Importing RestangularModule and making default configs for restanglar
RestangularModule.forRoot([authService], RestangularConfigFactory),
],
})
how i can get there route params as well?
Option 1: route to root component
If you currently have in index.html:
<root-component></root-component> <!-- has a ui-view inside it -->
and
bootstrap: RootComponent
You can switch to bootstrapping a UIView:
<ui-view></ui-view>
and
bootstrap: UIView
then route to your root component
const rootState = { component: RootComponent }
then your root component will be able to inject the initial Transition
See the sample app for an example:
https://github.com/ui-router/sample-app-angular/blob/e8f8b6aabd6a51bf283103312930ebeff52fe4c3/src/app/app.module.ts#L37
https://github.com/ui-router/sample-app-angular/blob/e8f8b6aabd6a51bf283103312930ebeff52fe4c3/src/app/app.states.ts#L7-L18
Option 2: Use the transition start observable
class RootComponent {
constructor(router: UIRouter) {
this.subscription = router.globals.start$.subscribe((trans: Transition) => console.log(trans)))
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
Option 3: Use a transition hook
If you're trying to do some action for the initial transition, do this in a transition hook
function configFn(router: UIRouter) {
router.transitionService.onStart({}, function(trans: Transition) {
if (trans.$id === 0) {
return somepromise; // Allows async, etc
}
}
}

Categories