I have created an interface called user with an email property, password and photo url. When I load it in the ngOnInit() the value user (object) photo url says src = (unknown). I want to show the associated image (storage - when I register / create the user) on the header
//user.class.ts
export class User {
email: string;
password: string;
photoUrl: string;
}
//header.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { AngularFireAuth } from '#angular/fire/auth';
import { AuthService } from 'src/app/service/auth.service';
import { User } from 'src/app/share/user.class';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
user: User = new User();
constructor(
private router: Router,
private auth:AngularFireAuth,
private authSvc:AuthService
) { }
ngOnInit() {
this.authSvc.isAuth().subscribe(user => {
if(user) {
this.user.photoUrl = user.photoUrl;
console.log(this.user.photoUrl);
}
})
}
//auth.service.ts
isAuth(user: User) {
return this.auth.authState.pipe(map(user => user));
}
//header.html
<ion-avatar>
<img src="{{user.photoUrl}}" />
</ion-avatar>
I have made a web app with angular and firebase.
fUser is the user from firebase, and User is my interface
import { Component, OnInit } from '#angular/core'
import { AngularFireAuth } from '#angular/fire/auth'
import { Observable } from 'rxjs'
import { first } from 'rxjs/operators'
import { User as fUser } from 'firebase'
import { User } from '#models/User'
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
public user$: Observable<fUser> = this.auth.user
public currentUser: User
constructor(
private auth: AngularFireAuth
) { }
ngOnInit() {
this.user$.pipe(first()).toPromise().then(user => {
this.currentUser = user as User
})
}
}
Related
I'm using AngularFire and Angular 8 to build an app but I have a silly problem (I believe it is silly actually).
I built a simple service to wrap AngularFireAuth:
import { Injectable } from '#angular/core';
import { AngularFireAuth } from '#angular/fire/auth';
import { User } from 'firebase';
import { Subject } from 'rxjs';
import { MessageService } from 'primeng/api';
#Injectable({
providedIn: 'root'
})
export class AuthService {
private user: Subject<User> = new Subject();
private isLoggedIn: Subject<boolean> = new Subject();
constructor(private afAuth: AngularFireAuth, private messageService: MessageService) {
this.afAuth.auth.onAuthStateChanged(user => {
this.user.next(user);
this.isLoggedIn.next(user !== null);
});
}
isAuthenticated() {
return this.isLoggedIn.asObservable();
}
}
Then, I injected it in my HomeComponent and subscribed to the Observable returned by the isAuthenticated method:
import { Component, OnInit } from "#angular/core"
import { AuthService } from '../auth/auth.service';
#Component({
selector: 'app-homepage',
styleUrls: ['./homepage.component.scss'],
templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
isAuthenticated: boolean = false;
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.isAuthenticated().subscribe((isAuth) => {
this.isAuthenticated = isAuth;
console.log(`User is authenticated? ${this.isAuthenticated}`);
});
}
}
However, when the arrow function passed to the subscribe method is invoked, no re-rendering is executed. But, the console.log call does show "User is authenticated? true" on DevTools.
Some other tests that I've done: if I call setTimeout from within the arrow function passed to subscribe, the result is the same. No re-render and the message on DevTools says "User is authenticated? true".
But, if I invoke setTimeout (in this test with a 10 secs delay) outside subscribe, the component is re-rendered after these 10 seconds:
import { Component, OnInit } from "#angular/core"
import { AuthService } from '../auth/auth.service';
#Component({
selector: 'app-homepage',
styleUrls: ['./homepage.component.scss'],
templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
isAuthenticated: boolean = false;
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.isAuthenticated().subscribe((isAuth) => {
this.isAuthenticated = isAuth;
console.log(`User is authenticated? ${this.isAuthenticated}`);
});
setTimeout(() => {
this.isAuthenticated = true;
console.log(`User is authenticated? ${this.isAuthenticated}`);
}, 10000)
}
}
What am I missing here? What have I misunderstood?
it's because after component init you're calling your authentication
call it in constructor it works
import { Component, OnInit } from "#angular/core"
import { AuthService } from '../auth/auth.service';
#Component({
selector: 'app-homepage',
styleUrls: ['./homepage.component.scss'],
templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
isAuthenticated: boolean = false;
constructor(private authService: AuthService) {
this.authService.isAuthenticated().subscribe((isAuth) => {
this.isAuthenticated = isAuth;
console.log(`User is authenticated? ${this.isAuthenticated}`);
});
}
ngOnInit(){}
}
I have an angular app and want to implement client side routing. I have 3 components: login, chat and admin. Access to admin and chat is restricted by an auth guard. Ideally the routing behavior should be:
click login -> route to login and redirect to admin
click admin or chat -> route to login and redirect on successful login to the clicked on (admin or chat respectlively)
I managed to setup the redirections nearly correct, but the redirection when clicking login still depends on where I clicked before/last. Meaning that if the user clicks on login it will goto login and on successful login it redirects to chat. The user then logs out and clicks login, it goes to login but redirects to chat instead of admin, which I don't want. Clicks on login should always go to admin regardless of which route was active in past.
How can I achieve this?
Thanks.
app.component
<nav>
<ol>
<li><a routerLink="/login">Login</a></li>
<li><a routerLink="/admin">Admin</a></li>
<li><a routerLink="/chat">Chat</a></li>
</ol>
</nav>
<router-outlet></router-outlet>
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
Login component
import { Component, OnInit } from '#angular/core';
import { FormGroup, FormControl, Validators } from '#angular/forms';
import { HttpClient } from '#angular/common/http';
import {AuthService} from "../auth.service";
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
email: string;
password: string;
loginMessage: string;
loginForm: FormGroup;
constructor(
private http: HttpClient,
) { }
ngOnInit() {
this.loginForm = new FormGroup({
'email': new FormControl(this.email, [
Validators.required,
Validators.email
]),
'password': new FormControl(this.password, [
Validators.required,
Validators.minLength(2)
])
});
console.log('init');
}
logout(): void {
this.authService.loggedIn = false;
}
login(): void {
if (!this.isValidInput()) { return; }
const data = {email: this.email, pass: this.password};
this.authService.login('localhost:3000/login', data).subscribe((response: any) => {
this.loginForm.reset();
this.authService.loggedIn=true;
let redirect = this.authService.redirecturl ? this.router.parseUrl(this.authService.redirecturl) : '/admin';
this.router.navigateByUrl(redirect);
});
}
isValidInput(): Boolean {
if (this.loginForm.valid) {
this.email = this.loginForm.get('email').value;
this.password = this.loginForm.get('password').value;
return true;
}
return false;
}
}
<form [formGroup]="loginForm">
<!-- this div is just for debugging purpose -->
<div id="displayFormValues">
Value: {{loginForm.value | json}}
</div>
<label for="email"><b>Email</b></label>
<input id="email" type="email" formControlName="email" email="true" required>
<label for="password"><b>Password</b></label>
<input id="password" type="password" formControlName="password" required>
<button (click)="login()" routerLink="/admin" routerLinkActive="active">Login</button>
<div id="loginMessage">{{loginMessage}}</div>
</form>
admin component
<p>admin works!</p>
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
chat component
<p>chat works!</p>
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
authgauard
import { Injectable } from '#angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '#angular/router';
#Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor() {
}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
if (this.authService.isLoggedIn()) {
return true;
} else {
this.authService.redirecturl = url;
this.router.navigate(['/login']);
return false;
}
}
}
app-routing module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ChatComponent } from './chat/chat.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard]
},
{
path: 'chat',
component: ChatComponent,
canActivate: [AuthGuard]
}
];
#NgModule({
imports: [RouterModule.forRoot(routes, {enableTracing: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
auth service
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '#angular/common/http';
import { throwError, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
#Injectable({
providedIn: 'root'
})
export class AuthService {
redirecturl: string; // used for redirect after successful login
username: string;
loginMessage: string;
greeting = 'Hello guest!';
loggedIn = false;
config = {
serverHost: 'localhost',
serverPort: 3000,
loginRoute: 'login',
standardGreeting: `Hello guest!`,
standardUsername: 'Guest'
};
constructor(private http: HttpClient) { }
login(loginUrl: any, body: { pass: string }) {
return this.http.post(loginUrl, body, httpOptions)
.pipe(
catchError(this.handleError)
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.error('An error occurred:', error.error.message);
} else {
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
return throwError(
'Something bad happened; please try again later.');
}
isLoggedIn(): boolean {
return this.loggedIn;
}
}
}
Instead of doing this <button (click)="login()" routerLink="/admin" routerLinkActive="active">Login</button> in html put redirection url in typescript like this.
login(): void {
if (!this.isValidInput()) { return; }
const data = {email: this.email, pass: this.password};
this.authService.login('localhost:3000/login', data).subscribe((response: any) => {
if(response.isSuccess){
this.loginForm.reset();
this.authService.loggedIn=true;
if(!this.authService.redirectUrl){
this.router.navigateByUrl('/admin');
} else{
this.router.navigateByUrl(this.authService.redirectUrl);
}
}
});
}
and If you are navigating to Login URL then please remove redirectUrl other wise it will always redirect to last visited page.
EDIT
In App.component.html you are navigating to login using routerlink instead of that use this
<nav>
<ol>
<li><a (click)='redirectToLogin()'>Login</a></li>
<li><a routerLink="/admin">Admin</a></li>
<li><a routerLink="/chat">Chat</a></li>
</ol>
</nav>
<router-outlet></router-outlet>
and in app.component.ts use this
redirectToLogin(){
this.authService.redirectUrl = null;
this.router.navigateByUrl('/login');
}
In angular 7. I need to send an Array information get it from Itunes Api, which is included in a component called "search", to another component called "catalog". I've understand that in this case I've to use a service which allows to share the info between them. Here's some code. What's wrong?
I've tried with viewchild, input, output, but there's no result; because both components aren't "relatives".
"search"
"search"
import { Component, OnInit, Output, EventEmitter } from '#angular/core';
import { RequestService } from '../../services/request/request.service';
import {DataShareService} from '../../services/dataShare/data-share.service';
import { Music } from '../../models/music';
#Component({
selector: 'search',
styleUrls: ['./ion-searchbar.component.sass'],
templateUrl: './ion-searchbar.component.html',
providers: [RequestService, DataShareService],
})
export class IonSearchBarComponent implements OnInit {
public searchResults: Music[];
public searchValue: string;
constructor(public _requestService: RequestService, private _dataShareService: DataShareService) {}
ngOnInit() {
this._dataShareService.$sendDataObservable.subscribe(
data => {
this.searchResults = data
})
}
sendData(searchResults: Music[]){
console.log("executat");
this._dataShareService.sendData(searchResults);
}
search(){
this._requestService.getMusic(this.searchValue).subscribe(
result => {
this.searchResults = result.results;
console.log(result.results);
this.sendData(this.searchResults);
},
error =>{
console.log(<any>error);
}
);
}
}
"service"
import { Injectable } from '#angular/core';
import { Music } from '../../models/music';
import { Subject } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class DataShareService {
private _sendDataSubject = new Subject<Music[]>();
$sendDataObservable = this._sendDataSubject.asObservable();
constructor() { }
sendData(data: Music[]){
this._sendDataSubject.next(data);
console.log(data);
}
}
"catalog"
import { Component, OnInit, Input } from '#angular/core';
import {RequestService} from '../../services/request/request.service';
import {DataShareService} from '../../services/dataShare/data-share.service';
import { Music } from '../../models/music';
#Component({
selector: 'catalog',
templateUrl: './catalog.component.html',
styleUrls: ['./catalog.component.sass'],
providers: [RequestService, DataShareService]
})
export class CatalogComponent implements OnInit {
public title: any;
public InfoLlegada: any;
constructor(private _dataShareService: DataShareService) {}
ngOnInit() {
console.log(this.InfoLlegada)
this._dataShareService.$sendDataObservable.subscribe(
data => {
this.InfoLlegada = data
console.log(data);
});
}
}
Not sure if this is the actual cause, but there an issue with your this binding in getMusic subscription in search component. Try this.sendData.call(this, result.results);
I am trying to make a global service class which will store few variables which will influence behaviour on HTML components base on flags.
My current only flag is a BehaviourSubject which navbar component subscribes to update a navbar with different buttons. The issue is when I refresh the page in a browser the flag reverse to the original value and forgets what has set before. The current scenario is when user log in the flag is being set to true and should stay true until a user logs out. It may not be a right way to do it so if there is a better way of approaching it; then I am happy to implement it.
Data sharing class:
import {
Injectable
} from '#angular/core';
import {
BehaviorSubject
} from 'rxjs';
#Injectable()
export class ServiceClassDatasharing {
public isUserLoggedIn: BehaviorSubject < boolean > = new BehaviorSubject < boolean > (false);
public setUserLoggedInStatus(status) {
this.isUserLoggedIn.next(status);
}
}
Nav Component:
import {
Component,
OnInit
} from '#angular/core';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from '#angular/material';
import {
Inject
} from '#angular/core';
import {
ServiceClassDatasharing
} from '../service/service-class-datasharing';
import {
ServiceClassAuth
} from '../service/service-class-auth';
import {
SigninComponent
} from './../signin/signin.component';
import {
Router
} from '#angular/router';
#Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
id_token: Boolean;
username: String;
constructor(public dialog: MatDialog, private dataSharingService: ServiceClassDatasharing,
private authService: ServiceClassAuth, private router: Router) {
this.dataSharingService.isUserLoggedIn.subscribe(res => {
this.id_token = res;
if (this.id_token) {
const user = JSON.parse(localStorage.getItem('user'));
this.username = user['user'].user_username;
}
});
if (!this.id_token) {
router.navigate(['index']);
}
}
ngOnInit() {}
openDialog(): void {
let dialogRef = this.dialog.open(SigninComponent, {
width: '450px',
data: {}
});
}
public logout() {
this.authService.logout().subscribe(res => {
if (res['success']) {
localStorage.clear();
this.dataSharingService.setUserLoggedInStatus(false);
}
});
this.router.navigate(['index']);
}
}
Index Component as an example it should redirect a user to dashboard if the global flag is set to true.
import {
Component,
OnInit
} from '#angular/core';
import {
ServiceClassDatasharing
} from '../service/service-class-datasharing';
import {
Router
} from '#angular/router';
#Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
constructor(private dataSharingService: ServiceClassDatasharing, private router: Router) {
if (this.dataSharingService.isUserLoggedIn.value) {
this.router.navigate(['dashboard']);
}
}
ngOnInit() {}
}
Try using localStorage variable to achieve the same .
Create a function in service class which will set the variable with token if user logs in and function to get the same token.
const key = 'abcde'
setUseLoggedIn(token){
localStorage.setItem(this.key,token);
}
getUserLoggedIn(){
return localStorage.getItem(this.key);
}
set token as null if user is not logged in and check for the same when retrieving the token.
I want to share an object from my first component to the second. I am able to log the 'strVal'(string) defined in the Login Component, in my Home Component but I am unable to log the value of 'abc'(Object) from the Login Component, in the HomeComponent. I am confused why one value from Login Component gets available to Home Component and other does not! The code for Login Component in below
Login.Component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { AuthenticationService } from '../_services/index';
import { User } from '../contract';
#Component({
moduleId: module.id,
templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
model: any = {};
loading = false;
error = '';
us: User[];
abc: any[];
strVal: string = "Rehan";
current: any;
constructor(
private router: Router,
private authenticationService: AuthenticationService) { }
ngOnInit() {
// reset login status
this.authenticationService.logout();
this.getUs();
}
login() {
this.loading = true;
this.authenticationService.login(this.model.username, this.model.password)
.subscribe(result => {
if (result) {
this.router.navigate(['/']);
}
else {
alert('Username and Password Incorrect');
this.loading = false;
this.model = [];
this.router.navigate(['/login']);
}
});
}
getUs() {
this.authenticationService.getUsers().subscribe(
res => this.us = res
);
}
chek() {
this.abc = this.us.filter(a => a.Login === this.model.username);
console.log(this.abc);
}
}
Home.Component.ts
import { Component, OnInit, Input } from '#angular/core';
import { AuthenticationService } from '../_services/index';
import { LoginComponent } from '../login/index';
import { User } from '../contract';
#Component({
moduleId: module.id,
templateUrl: 'home.component.html',
providers: [LoginComponent]})
export class HomeComponent implements OnInit {
users: User[];
constructor(private userService: AuthenticationService, private Log: LoginComponent) { }
ngOnInit() {
this.userService.getUsers().subscribe(
res => this.users = res
);
console.log(this.Log.strVal);
console.log(this.Log.abc);
}
}
Any hint or help will be appreciated. Thanks!