I have a list of employees in a JSON object in my service.ts file. It will be moved to a DB eventually. I know this is not the place for it. It's just for dev purposes. I am able to retrieve the employees by clicking on it and displaying them in a dynamic view component.
However, I want to be able to see the next employee on a button click without having to always go back to the main list. I am able to retrieve the index and increment the index on click. I just can't get the route to display the data for that index.
The HTML is pretty basic a simple button with a click method. The Service file looks like this:
import {HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { Employee } from '../models/employee.models';
#Injectable({
providedIn: 'root'
})
export class EmployeesService {
private listEmployees: Employee[] = [...regular json object...];
constructor() { }
getEmployees(): Employee[] {
return this.listEmployees;
}
getEmployee(id: number): Employee {
return this.listEmployees.find(e => e.id === id);
}
}
And my employee.component.ts file
import { ActivatedRoute } from '#angular/router';
import { EmployeesService } from './../../../services/employees.service';
import { Component, OnInit } from '#angular/core';
import { Employee } from 'src/app/models/employee.models';
import { Router } from '#angular/router';
#Component({
selector: 'employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {
employee: Employee;
employees: Employee[];
index: number;
private _id: number;
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _employeeService: EmployeesService
) { }
ngOnInit() {
this.employees = this._employeeService.getEmployees();
for ( this.index = 1; this.index < this.employees.length + 1; this.index++ ) {
this._route.paramMap.subscribe(params => {
this._id = +params.get('id')
console.log('this index:', this.index);
this.employee = this._employeeService.getEmployee(this._id);
});
}
}
viewNextEmployee() {
if( this.index < this.employees.length ){
this.index = this.index++;
console.log('this index:', this.index);
this._router.navigate(['/team', this._id])
} else {
this.index = 1;
}
}
}
I'm sorry, I can't really reproduce a working code. So many dependencies.
Related
I Have created a shopping cart with 2 components(Productlist and cart list). when I click on the 'add to cart' button in the product list it is successfully moving into the service file and from the service file to 'cart list' but Total was showing undefined. Please help me to solve this cart Total issue.
Product-list.ts file
import { Component, OnInit } from '#angular/core';
import { ProductService } from '../../../service/product.service';
import { CartService } from '../../../service/cart.service';
#Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
Productlist = [];
constructor(private productservice: ProductService,
private cartservice: CartService) {
this.Productlist = this.productservice.send()
}
ngOnInit(): void {
}
saveproduct(item) {
this.cartservice.get(item)
}
}
cart service file
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class CartService {
cartproducts = [{Name: 'Mobile', Price: 13000, Qty: 1}]
constructor() { }
send() {
return this.cartproducts
}
get(items) {
this.cartproducts.push(items)
console.log(this.cartproducts)
}
}
cart list file
import { Component, OnInit, ɵConsole, ɵɵNgOnChangesFeature } from '#angular/core';
import { CartService } from '../../../service/cart.service';
#Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
cartlist = [];
Total: number;
constructor( private cartservice: CartService) {
this.cartlist = this.cartservice.send()
console.log(this.cartlist);
console.log(this.Total);
}
ngOnInit() {
this.cartlist.forEach((_e: any) => {
this.Total += (_e.qty * _e.price);
});
}
}
When the Total property has been created, it is undefined by default until you assign it a value. You do assign a value to it in the ngOnInit but you calculate on an undefined value, so it returns undefined as well. Give Total a default value like so:
...
Total: number = 0;
...
Also the code you put in ngOnInit to calculate the Total, would be better placed in a get property. This way, Total will always be calculated when it's requested instead of pre-rendered and only calculated once. In that case your code would look like:
get Total(): number {
let value = 0;
this.cartlist?.forEach((_e: any) => {
value += (_e.qty * _e.price);
});
return value;
}
I'm fairly new to Angular 9. I have a program where a user enters in a name - which, upon submitting - a POST HTTP request is sent and the name is stored. I then have an unrelated component for a sub-header that lists the names that have been stored using a GET HTTP request using ngOnInit(). However, I need the sub-header to update that list of names dynamically each time a new list is entered rather than just whenever the component instantiates.
I'm unsure how to proceed. I'm sure I could simply add a button that fetches and updates said list, but trying for something more dynamic. Thanks in advance!
//SERVICE.TS...
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { NewList } from './new-list.model';
import { map } from 'rxjs/operators';
#Injectable({
providedIn: 'root'
})
export class ListService {
createdLists: NewList[] = [];
constructor(private http: HttpClient) { }
createList(postData) {
return this.http
.post(
'API_KEY',
postData
);
}
getLists() {
return this.http
.get<NewList>(
'API_KEY'
).pipe(map(responseData => {
const responseArray: NewList[] = [];
for (const key in responseData) {
responseArray.push(responseData[key])
}
return responseArray;
})
);
}
}
// NEW-LIST-MENU.TS (USER ENTERS A NAME)...
import { Component, OnInit } from '#angular/core';
import { NgForm } from '#angular/forms';
import { Router } from '#angular/router';
import { ListService } from 'src/app/shared/list.service';
import { NewList } from 'src/app/shared/new-list.model';
import { UIService } from 'src/app/shared/ui.service';
#Component({
selector: 'app-new-list-menu',
templateUrl: './new-list-menu.component.html',
styleUrls: ['./new-list-menu.component.css']
})
export class NewListMenuComponent implements OnInit {
constructor(private listService: ListService,
private uiService: UIService,
private router: Router) { }
ngOnInit(): void {
}
onSubmit(form: NgForm) {
const listName = form.value.listname;
const newListObj = new NewList(listName, []);
this.listService.createList(newListObj)
.subscribe(() => {
this.router.navigate(['']);
});
const lists = this.listService.updateLists(newListObj);
form.reset();
}
onCancel() {
this.router.navigate(['']);
}
}
// SUB-HEADER.TS...
import { Component, OnInit, Output } from '#angular/core';
import { Router } from '#angular/router';
import { ListService } from 'src/app/shared/list.service';
import { NewList } from 'src/app/shared/new-list.model';
import { faWindowClose } from '#fortawesome/free-solid-svg-icons';
import { faPlusCircle } from '#fortawesome/free-solid-svg-icons';
import { faList } from '#fortawesome/free-solid-svg-icons';
import { faSignOutAlt } from '#fortawesome/free-solid-svg-icons';
import { Subject } from 'rxjs';
#Component({
selector: 'app-sub-header',
templateUrl: './sub-header.component.html',
styleUrls: ['./sub-header.component.css']
})
export class SubHeaderComponent implements OnInit {
createdLists: NewList[];
faWindowClose = faWindowClose;
faPlusCircle = faPlusCircle;
faList = faList;
faSignOutAlt = faSignOutAlt;
#Output() closeSub = new Subject();
constructor(private listService: ListService,
private router: Router) { }
ngOnInit(): void {
this.listService.getLists().subscribe((responseData) => {
this.createdLists = responseData;
});
}
onCloseSelect() {
this.closeSub.next();
}
onNewListSelect() {
this.onCloseSelect();
this.router.navigate(['new-list-menu']);
}
onLogOutSelect() {
}
}```
You can accomplish this in many ways, as these components are not related to each other, you can introduce a state service and use observables. see below possible solution
Create a new state service ListStateService
export class ListStateService {
private listData = new BehaviorSubject<NewList >({} as NewList);
listData$ = this.listData .asObservable();
}
Inject ListStateService into NewListMenuComponent
In the onSubmit, after you update,
const lists = this.listService.updateLists(newListObj);
this.listData .next(lists );
Inject ListStateService into SubHeaderComponent
In the ngOnInit(), subscribe to the ListStateService.listData$ and here you will get the value on changes
In your service, use an event emitter (very useful):
import { EventEmitter } from "#angular/core";
#Output() myEvent: EventEmitter<any> = new EventEmitter();
then emit new data to your sub header component through your service like so:
emitEvent (newData: Array<string>) {
this.myEvent.emit({
data: newData,
});
}
Subscribe to new data in your sub header component ngOnInit and use it:
this.myService.myEvent.subscribe((newData: Array<string>) => {
console.log(JSON.stringify(newData.data));
});
Note: Subscriptions will cause memory leaks if constantly re-subscribed in the component, so you can save the subscription and call unsubscribe() on it in the ngOnDestroy callback.
It's a little unclear what you are trying to do, but if you are trying to pass data from a parent component to a child component, you can do this either with Input fields or a ViewChild
to use Input fields your parent might looks like this:
<app-sub-header [names]="names"></app-sub-header>
then use an "Input" field in the child. Updating names in the parent should update the same named variable in the child in real time.
I have already managed to fetch data form firebase.problem is when i'm going to filter data according to the id it doesn't work.
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { AngularFireDatabase, AngularFireList ,} from 'angularfire2/database';
import { Observable } from 'rxjs'
import { query } from '#angular/core/src/render3';
import { Key } from 'protractor';
class postview {
constructor(public title) { }
}
#Component({
selector: 'app-news-view',
templateUrl: './news-view.page.html',
styleUrls: ['./news-view.page.scss'],
})
export class NewsViewPage implements OnInit {
id: string;
public books: AngularFireList<postview[]>;
itemlol: Observable<any>;
posts: Observable<any[]>;
constructor(private route: ActivatedRoute , db: AngularFireDatabase) {
let idp :string = this.id;
this.posts = db.list('Posts' ,ref => {
return ref.orderByChild('Post_Id').equalTo(idp)
}).valueChanges();
// this.itemlol= db.object('Posts').valueChanges();
}
ngOnInit() {
this.id = this.route.snapshot.paramMap.get('id');
console.log(this.id);
console.log(this.posts);
}
}
in the section return ref.orderByChild('Post_Id').equalTo(idp) I need to pass variable in equalTo(). It should change according to the user instructions
Example
equalTo(01)
equalTo(02)
This is my firebase database:
The constructor is called before ngOnInit so the value for this.id will be undefined at the time of the query.
You should get the Parameters in the constructor
this.id = this.route.snapshot.paramMap.get('id');
let idp :string = this.id;
this.posts = db.list('Posts' ,ref => ref.orderByChild('Post_Id').equalTo(idp) ).valueChanges();
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 am working on a listing application that transfers an object from one component to an Identical sibling component. I'd also like to decrease the moves property by 1 with each move. I am having trouble with the actually pushing the selected item into the sibling array.
Here's a sample of my data...
import { player } from "./player";
export const PLAYERS: player[] = [
{
index: 1,
photo: "../../assets/images/lonzo.jpeg",
name: "Lonzo Ball",
position: "G",
moves: 5
},
{
index: 2,
photo: "../../assets/images/Brook.jpeg",
name: "Brook Lopez",
position: "C",
moves: 5
},
This is what I have in the services file...
import { Injectable } from "#angular/core";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Subject } from 'rxjs/Subject';
import { player } from "./player";
import { PLAYERS } from "./players";
import 'rxjs/add/observable/of';
import { Observable } from "rxjs/Observable";
import { of } from "rxjs/observable/of";
import { bench } from './bench';
import { RESERVES } from './RESERVES';
#Injectable()
export class DataService {
public players = <any>PLAYERS;
public bench = <any>RESERVES;
public getPlayers(): Observable<player[]> {
return Observable.of(this.players);
}
public getReserves(): Observable<bench[]> {
return Observable.of(this.bench);
}
addToReserves(data) {
this.bench.next(data);
}
addToStarter(data) {
this.players.next(data)
}
constructor() {}
}
This is what I have in the starters.ts file...
import { Component, OnInit } from "#angular/core";
import { DataService } from '../data.service'
import { player } from "../player";
#Component({
selector: "app-roster-box",
templateUrl: "./roster-box.component.html",
styleUrls: ["./roster-box.component.css"],
})
export class RosterBoxComponent implements OnInit {
moves: number = 5;
btnText: string = "Move to Bench";
players: Array<any>
constructor(public dataService: DataService) {}
getPlayers() : void {
this.dataService.getPlayers()
.subscribe(players => this.players = players);
}
ngOnInit() {
this.getPlayers();
}
moveToBench( data, i): void {
this.dataService.addToReserves(data)
// this.players.splice(i, 1);
}
}
And finally the code for the bench.ts file...
import { Component, OnInit } from '#angular/core';
import { DataService } from '../../app/data.service'
import { bench } from "../bench";
#Component({
selector: 'app-roster-bench',
templateUrl: './roster-bench.component.html',
styleUrls: ['./roster-bench.component.css']
})
export class RosterBenchComponent implements OnInit {
moves: number = 5;
btnText: string = "Make Starter";
reserves: Array<any>;
constructor(private dataService: DataService) { }
getReserves() : void {
this.dataService.getReserves()
.subscribe(reserves => this.reserves = reserves);
}
ngOnInit() {
this.getReserves();
// this.moveData();
}
makeStarter( data, i): void {
this.dataService.addToStarter(data)
// this.players.splice(i, 1);
}
}
I am looking to simply click a button in html to move the selected player to the sibling component. I am having trouble with how to structure the services/observable etc as this is my first time working with Angular.
I had a little free time ... so I moved your sample code to a stackblitz here: https://stackblitz.com/edit/angular-j2l8pq
I was not sure exactly what you were trying to accomplish, but tried to basically answer your question.
A few key things:
1) I assumed that the bench and the players arrays both needed to be of type Player. That allows you to move items of the same type between the two arrays without any loss of properties.
2) I changed the property in the component to be a getter. That way it would always get the current value from the service:
get players(): Player[] {
return this.dataService.players;
}
get bench(): Player[] {
return this.dataService.bench;
}
3) You did not seem to need a Subject/BehaviorSubject so I removed the imports.
I was not sure what "sibling component" you were referring to. But if you create another component that talks to the same service, if it also has a getter as shown above it will share the same data as the player component.
Hopefully the provided code provides the basic direction for you to answer your question.
Component
import { Component, OnInit } from "#angular/core";
import { DataService } from './player.service'
import { Player } from "./player";
#Component({
selector: 'app-roster-box',
template:
`<div>Current Roster</div>
<li *ngFor="let player of players" (click)="moveToBench(player)">
{{ player.name }}
</li>
<br>
<div>Bench</div>
<li *ngFor="let player of bench">
{{ player.name }}
</li>
`
})
export class RosterBoxComponent implements OnInit {
moves: number = 5;
btnText: string = "Move to Bench";
get players(): Player[] {
return this.dataService.players;
}
get bench(): Player[] {
return this.dataService.bench;
}
constructor(public dataService: DataService) {}
getPlayers() : void {
this.dataService.getPlayers()
.subscribe();
}
ngOnInit() {
this.getPlayers();
}
moveToBench( player ): void {
console.log(player);
this.dataService.addToReserves(player)
}
}
Service
import { Injectable } from "#angular/core";
import { Player } from "./player";
import { Observable } from "rxjs/Observable";
import { of } from "rxjs/observable/of";
#Injectable()
export class DataService {
players: Player[] = [];
bench: Player[] = [];
constructor() {}
getPlayers(): Observable<Player[]> {
this.players = [
{
index: 1,
photo: "../../assets/images/lonzo.jpeg",
name: "Lonzo Ball",
position: "G",
moves: 5
},
{
index: 2,
photo: "../../assets/images/Brook.jpeg",
name: "Brook Lopez",
position: "C",
moves: 5
}
]
return of(this.players);
}
getReserves(): Observable<Player[]> {
return of(this.bench);
}
addToReserves(player: Player) {
this.bench.push(player);
const index = this.players.indexOf(player);
if (index > -1)
this.players.splice(index, 1);
}
addToStarter(data) {
this.players.push(data)
}
}