We Keep Coding

How to hold alert box on the page in case of reloading or changing route?

I need to maintain an alert box on the Registration page indicating the user has registered successfully. However, by redirecting to the Login form this box disappears, because the page refreshes.
I utilize the Alert component to manage this scenario. All of the features work flawlessly but this problem really makes me confused. I shared my code and hope you assist me in getting to the root of this predicament.
alert.component.ts
import { Component, OnInit, OnDestroy, Input } from '#angular/core';
import { Router, NavigationStart } from '#angular/router';
import { Subscription } from 'rxjs';
import { Alert, AlertType } from 'src/app/_models/alert';
import { AlertService } from 'src/app/_services/alert.service';
#Component({ selector: 'alert',
templateUrl: 'alert.component.html',
styleUrls: ['./alert.component.scss'] })
export class AlertComponent implements OnInit, OnDestroy {
#Input() id = 'default-alert';
#Input() fade = true;
alerts: Alert[] = [];
alertSubscription: Subscription;
routeSubscription: Subscription;
constructor(private router: Router, private alertService: AlertService) { }
ngOnInit() {
// subscribe to new alert notifications
this.alertSubscription = this.alertService.onAlert(this.id)
.subscribe(alert => {
// clear alerts when an empty alert is received
if (!alert.message) {
// filter out alerts without 'keepAfterRouteChange' flag
this.alerts = this.alerts.filter(x => x.keepAfterRouteChange);
// remove 'keepAfterRouteChange' flag on the rest
this.alerts.forEach(x => delete x.keepAfterRouteChange);
return;
}
// add alert to array
this.alerts.push(alert);
setTimeout(() => this.removeAlert(alert), 5000);
});
// clear alerts on location change
this.routeSubscription = this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.alertService.clear(this.id);
}
});
}
ngOnDestroy() {
// unsubscribe to avoid memory leaks
this.alertSubscription.unsubscribe();
this.routeSubscription.unsubscribe();
}
removeAlert(alert: Alert) {
// check if already removed to prevent error on auto close
if (!this.alerts.includes(alert)) return;
if (this.fade) {
// fade out alert
this.alerts.find(x => x === alert).fade = true;
// remove alert after faded out
setTimeout(() => {
this.alerts = this.alerts.filter(x => x !== alert);
}, 250);
} else {
// remove alert
this.alerts = this.alerts.filter(x => x !== alert);
}
}
cssClass(alert: Alert) {
if (!alert) return;
const classes = ['toast'];
const alertTypeClass = {
[AlertType.Success]: 'toast-success',
[AlertType.Error]: 'toast-error',
[AlertType.Info]: 'toast-info',
[AlertType.Warning]: 'toast-warning'
}
classes.push(alertTypeClass[alert.type]);
if (alert.fade) {
classes.push('fade');
}
return classes.join(' ');
}
}
alert.service.ts
import { Injectable } from '#angular/core';
import { Observable, Subject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { Alert, AlertType } from '../_models/alert';
#Injectable({ providedIn: 'root' })
export class AlertService {
private subject = new Subject<Alert>();
private defaultId = 'default-alert';
// enable subscribing to alerts observable
onAlert(id = this.defaultId): Observable<Alert> {
return this.subject.asObservable().pipe(filter(x => x && x.id === id));
}
// convenience methods
success(message: string, options?: any) {
this.alert(new Alert({ ...options, type: AlertType.Success, message }));
}
error(message: string, options?: any) {
this.alert(new Alert({ ...options, type: AlertType.Error, message }));
}
info(message: string, options?: any) {
this.alert(new Alert({ ...options, type: AlertType.Info, message }));
}
warn(message: string, options?: any) {
this.alert(new Alert({ ...options, type: AlertType.Warning, message }));
}
// main alert method
alert(alert: Alert) {
alert.id = alert.id || this.defaultId;
this.subject.next(alert);
}
// clear alerts
clear(id = this.defaultId) {
this.subject.next(new Alert({ id }));
}
}
This is a piece of code in which an alert message is called (It should be noted that the keepAfterRouteChange is set to True):
onSubmit() {
this.submitted = true;
// reset alerts on submit
this.alertService.clear();
// stop here if form is invalid
if (this.form.invalid) {
return;
}
this.loading = true;
this.accountService
.register(this.form.value)
.pipe(first())
.subscribe((data) => {
this.loading = false;
this.submitted = false;
if (data.hasError) {
this.alertService.error(data.errorMessage);
} else {
this.alertService.success('Registration successfully completed.', {
keepAfterRouteChange: true,
});
localStorage.setItem('regCount',JSON.parse(localStorage.getItem('regCount')) + 1);
this.router.navigate(['/login']).then(() => {
window.location.reload();
});
}
},
() => {
this.loading = false;
this.submitted = false;
this.alertService.error('Something went wrong.');
});
}

Your problem probably comes from window.location.reload(); when window is reloaded all components and services are flushed. Find other ways to clear services if that's the point this line. Or find other way to store info that alert should be showing (e.g storing the need to show an alert with info and duration in SessionStorage or LocalStorage) - which doesn't seem like a good idea though. Normally we want to avoid reloading windows - for the same reason, losing all data and forcing the client to reload all resources.

How to display data from client service in ngx-wheel Angular

I want to display the ngx-wheel using api but I'm having trouble displaying the data.
Here my Service :
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class RestServices {
restEndpoint:string = 'https://gorest.co.in/public/v2/users'
constructor(
private httpClient: HttpClient
) { }
async getServiceId() {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
}
return this.httpClient.get<any[]>(this.restEndpoint, httpOptions)
}
Here my Component :
private subscription: Subscription | undefined;
items: any = []
ngOnInit(): void {
this.subscription = this._restService.getServices()
.subscribe((res:any)=>{
let item = res
this.items = item.map((v:any) => ({
text: v.name,
id: v.id,
textFillStyle: "white",
textFontSize: "16"
}));
})
}
ngOnDestroy(): void {
this.subscription?.unsubscribe()
}
Here for html
<ngx-wheel #wheel [width]='350' [height]='350' [spinDuration]='8' [disableSpinOnClick]='true' [items]='items'
[innerRadius]='10' [spinAmount]='10' [textOrientation]='textOrientation' [textAlignment]='textAlignment'
pointerStrokeColor='black' pointerFillColor='white' [idToLandOn]='idToLandOn' (onSpinStart)='before()'
(onSpinComplete)='after()'>
I hope to find the answer here. Thank you

First, you don't need await, async and ,toPromise()... remove them and simply return
return this.httpClient.get<any[]>(this.restEndpoint, httpOptions);
inside your component you should use your constructor only for simple data initialization: if you have to consume a rest api it is a better approach to move that piece of code inside the ngOnInit method:
items: any[] = []
constructor(private restService: RestService){}//dependency injection
ngOnInit(): void {
this.restService.getServiceId().subscribe(response => {
console.log('response success: ', response);
this.items = response; //this may change a little based on your api
console.log('items: ', this.items);
}, errorLog => {
console.log('response error: ', errorLog)
});
}
The above solution is valid, you can enrich it by adding a *ngIf="isLoaded" on your html element and set to true the isLoaded INSIDE subscribe method. but if you prefer you can do the following in the component.ts
items$: Observable<any> = EMPTY;
constructor(private restService: RestService){}//dependency injection
ngOnInit(): void {
this.items$ = this.restService.getServiceId();
}
then, in your html it would change to the following:
<ngx-wheel #wheel *ngIf="items$ | async as items" [width]='350' [height]='350' [spinDuration]='8' [disableSpinOnClick]='true' [items]='items'
[innerRadius]='10' [spinAmount]='10' [textOrientation]='textOrientation' [textAlignment]='textAlignment'
pointerStrokeColor='black' pointerFillColor='white' [idToLandOn]='idToLandOn' (onSpinStart)='before()'
(onSpinComplete)='after()'>

Weird behavior when using Angular Material 2 table (Angular 2/Spring Boot backend)

Continue to the Using angular material 2 table to display the result from backend based on user's current location
My purpose for this code is when user enter the site, it will try to ask user the current location. Once my front end get current lat/lon, it will pass to backend to get the nearest restaurant based on user's location, and using angular material table to display it. But when I testing on Chrome, I got weird behavior, the home page will not display the result immediately on the first time, try refresh, doesn't work, the only way make it works is switch another tab, and back to this one, it will display the result in angular material table.
Here is the code for home.component.ts
import { Component, OnInit } from '#angular/core';
import { Http, Response, URLSearchParams } from '#angular/http';
import { DataSource } from '#angular/cdk';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/frompromise';
import { Restaurant } from '../restaurant/restaurant';
import { Category } from '../category/category';
import { RestaurantService } from '../restaurant/restaurant.service';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
displayedColumns = ['Id', 'Name', 'Category', 'Address', 'City'];
dataSource: ExampleDataSource | null;
constructor(http: Http) {
//this.exampleDatabase = new ExampleHttpDatabase(http, this.location);
this.dataSource = new ExampleDataSource(http);
}
ngOnInit() {
this.dataSource.connect();
}
}
export class ExampleDataSource extends DataSource<Restaurant> {
private url = 'api/search/location';
private params = new URLSearchParams();
private lat;
private lon;
constructor(private http: Http) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<Restaurant[]> {
// var location;
// if (navigator.geolocation){
// var options = {timeout: 60000};
// location = navigator.geolocation.getCurrentPosition((position)=>{
// return position;
// },(err) =>{
// console.log("Error")
// }, options);
// }
// console.log("Locations: " + location);
var result = this.getCurrentLocation().then((res) =>
{
return res;
});
return Observable.fromPromise(result);
}
disconnect() { }
getPosition = () => {
var latitude, longitude;
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition((position) => {
resolve(position.coords);
}, (err) => {
reject(err);
});
})
}
async getCurrentLocation(): Promise<Restaurant[]> {
let coords = await this.getPosition();
this.lat = coords['latitude'];
this.lon = coords['longitude'];
this.params.set('lat', this.lat);
this.params.set('lon', this.lon);
var result = this.http.get(this.url, { search: this.params }).map(this.extractData);
return await result.toPromise();
}
extractData(result: Response): Restaurant[] {
return result.json().map(restaurant => {
return {
id: restaurant.id,
name: restaurant.restaurant_name,
category: restaurant.category.map(c => c.categoryName).join(','),
address: restaurant.address.address,
city: restaurant.address.city.cityName
}
});
}
}
I don't know what I did wrong.. can someone help me? For the full code, please see https://github.com/zhengye1/Eatr/tree/dev

Finally solved....
All I need to do just change ngOnInit on HomeComponent class to following
async ngOnInit() {
await this.dataSource.connect();
}
and it works.. don't know why...

Get absolute app URL in Angular 2

Is there a way to get the absolute URL of my Angular 2 app, including the <base href="">?
I need to send redirect URLs to my rest API for Twitter authentication. Twitter will get these and redirect the user to them upon successful authentication.
So I need something like this but with a dynamic absoluteBaseUrl dynamical (depends on environment):
// How do I avoid hardcoding this?
let absoluteBaseUrl = "https://example.com/app";
let redirectUrl = absoluteBaseUrl + "/authsuccess";
// authUrl will look something like: http://example.com/api/auth?redirect=http%3A%2F%2Fexample.com%2Fapp%2Fauthsuccess
let authUrl = ComposeTwitterAuthUrl(redirectUrl);
// Redirect the user to the Twitter auth screen
window.location.href= authUrl;

You can try something like this, Create file appConfig.service.ts in root component.
import { Injectable } from "#angular/core";
interface EndPoint {
baseUrl: string;
requiresAuthentication: boolean;
}
interface ResourceLocator {
[key: string]: EndPoint;
}
interface XResourceLocator {
x: ResourceLocator;
}
interface YResourceLocator {
y: ResourceLocator;
}
#Injectable()
export class APIConfigurations implements XResourceLocator, YResourceLocator {
private _config;
constructor() {
this._config = require("./apiConfig.json");
}
public get x(): ResourceLocator {
return this.clone(this._config.x);
}
public get y(): ResourceLocator {
return this.clone(this._config.y);
}
private clone<T>(value: T): T {
return JSON.parse(JSON.stringify(value));
}
}
and then define your all urls in apiConfig.json:
{
"x": {
"apiary": {
"baseUrl": "https://private-xyz.apiary-mock.com/test/",
"requiresAuthentication": false
},
"local": {
"baseUrl": "http://localhost:8080/test/",
"requiresAuthentication": false
}
},
"y": {
"apiary": {
"baseUrl": "https://private-xyz.apiary-mock.com/test1/",
"requiresAuthentication": false
},
"local": {
"baseUrl": "http://localhost:8080/test1/",
"requiresAuthentication": false
}
}
}
So you can define any baseUrl based on the environment here.
And use this in your any service.ts file:
import { Injectable } from '#angular/core';
import { Http, Response, Headers, RequestOptions } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import {APIConfigurations} from "../app/apiconfig.service";
import 'rxjs/Rx';
#Injectable()
export class DashboardService {
private _requestOptions: RequestOptions;
private _baseUrl: string;
constructor(private http: Http, apiConfigs: APIConfigurations) {
const headers = new Headers({ 'Accept': 'application/json' });
const config = apiConfigs.x["local"];
this._baseUrl = config.baseUrl;
this._requestOptions = new RequestOptions({ headers: headers, withCredentials: config.requiresAuthentication });
}
/**
* [getUsers list of users]
*/
getUsers() {
return this.http.get(this.resolveUrl(`users`), this._requestOptions)
.map(res => res.json())
.catch(this.handleError);
}
private handleError(error: Response) {
return Observable.throw(error.json().error || 'Server error');
}
public resolveUrl(path: string): string {
var normalized = this._baseUrl.endsWith("/")
? this._baseUrl
: this._baseUrl + "/";
return normalized + path;
}
}
Hope this will help you.

Angular 2 Facebook Login

I am developing an website that needs to be logged in with Facebook account. I am using Angular 2 and, of course, TypeScript. It works But not exactly what I wanted. I can't take back the user's information.
Let's go to the code:
import {Component} from 'angular2/core';
import {Main} from './pages/main/main';
declare const FB: any;
#Component({
selector: 'my-app',
templateUrl: 'app/app.html',
directives: [Main]
})
export class AppComponent implements OnInit {
token: any;
loged: boolean = false;
user = { name: 'Hello' };
constructor() { }
statusChangeCallback(response: any) {
if (response.status === 'connected') {
console.log('connected');
} else {
this.login();
}
}
login() {
FB.login(function(result) {
this.loged = true;
this.token = result;
}, { scope: 'user_friends' });
}
me() {
FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
function(result) {
if (result && !result.error) {
this.user = result;
console.log(this.user);
} else {
console.log(result.error);
}
});
}
ngOnInit() {
FB.getLoginStatus(response => {
this.statusChangeCallback(response);
});
}
}
Basically, When the page loads I check if the user is logged in to Facebook, if not, I call the login method. The me method is used to fetch the users information, like its name, first name etc. When I logged in condition browser console print the following line:
Object {id: "666", name: "Paulo Henrique Tokarski Glinski", first_name: "Paulo", gender: "male", picture: Object…}
Everything ok! But I want to get that Object and put into a User object! Something like that:
me method:
this.user = result;
console.log(this.user);
But the user just exists inside the method. If I print it outside, its returns nothing.
I just want to print the users name etc. at the website page. I did almost the same thing with Angular JS and worked well.
Please! Help me!

you can use fat arrow functions to use the same context ...
login() {
FB.login((result: any) => {
this.loged = true;
this.token = result;
}, { scope: 'user_friends' });
}

For the facebook javascript SDK, You just add the following line in your index.html
<script src="//connect.facebook.net/en_US/sdk.js"></script>
and in ngOnInit() :
`FB.init({
appId : 'your-app-id',
cookie : false,
xfbml : true, // parse social plugins on this page
version : 'v2.5' // use graph api version 2.5
});`

Angular 2 Service level implementation
import {Injectable} from '#angular/core';
import { Location } from '#angular/common';
import { Http, Response, Headers, RequestOptions,URLSearchParams } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { ConfigService } from "app/core/services/config.service";
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
#Injectable()
export class AuthService {
constructor(private http: Http,
private configProvider:ConfigService) {
}
authenticateFacebook(){
window.location.href = 'https://www.facebook.com/v2.9/dialog/oauth?client_id='+
this.configProvider.config.facebook.clientId +
'&redirect_uri='+ this.configProvider.config.facebook.redirectURI + '&scope=public_profile';
}
getAccessToken(authenticationCode: string){
var authProviderUrl = 'https://graph.facebook.com/v2.9/oauth/access_token';
var authParameters = {
client_id: this.configProvider.config.facebook.clientId,
redirect_uri: this.configProvider.config.facebook.redirectURI,
client_secret: this.configProvider.config.facebook.clientSecret,
code: authenticationCode
};
var params = [];
for (var k in authParameters) {
params.push(k + '=' + authParameters[k]);
}
var authOpenURI = authProviderUrl + '?' + params.join('&');
return this.http.get(authOpenURI)
.map(res => res.json())
.catch(err => Observable.throw(err));
}
getUserFacebookProfile(accessToken:string):Observable<any>{
var fields = ['id', 'email', 'first_name', 'last_name', 'link', 'name','picture.type(small)'];
var graphApiUrl = 'https://graph.facebook.com/v2.5/me?fields=' + fields.join(',');
return this.http.get(graphApiUrl+'&access_token='+accessToken+'')
.map(res => res.json())
.catch(err => Observable.throw(err));
}
Caller level function, this code will be in the component of your redirect URI
//Facebook authentication check
if (window.location.href.indexOf("code") > -1){
var code = window.location.href.substring(window.location.href.indexOf("?") + 1).split('&')[0].split('=')[1];
this.getFaceBookProfile(code);
}
//Get profile from facebook
getFaceBookProfile(code:string){
this.authService.getAccessToken(code).subscribe(oathAccessData => {
this.authService.getUserFacebookProfile(oathAccessData.access_token).subscribe(profile => {
this.userProfile = new UserProfile(profile.name,profile.email, profile.picture.data.url,"facebook",
profile.id);},err => { console.log(err); });},err => { console.log(err);});
this.router.navigate(['/dashboard']);
}

this has a bunch of magic involved. Does it help if you capture the class's this in a variable and use that in the callbacks (so as to avoid caring what their this is)?
e.g.
login() {
var self = this;
FB.login(function(result) {
self.loged = true;
self.token = result;
}, { scope: 'user_friends' });
}