I am new to Angular 2 and am still figuring things out.
I have two components:
1) List Component
This lists all the products in a store and does other functions
#Component({
selector :'home-list',
providers :[CartService,CartStatus]
})
#View({
templateUrl :'/app/views/list-product.partial.html'
})
export class HomeList{
title: string;
products : ProductInterface[];
cart;
private isFetching: boolean = false;
constructor(
private _router : Router,
private _dataService: DataService,
private _cartService: CartService,
private _cartStatus: CartStatus
){}
ngOnInit(){
this.title = 'Featured Products';
this.getfeaturedproducts();
}
getfeaturedproducts(){
this._dataService.getFeatured().subscribe(
products => {
this.products = products;
this.isFetching = true;
}
)
}
gotoDetail(slug:string) {
console.log(slug);
this._router.navigate(['ProductsDetail', {productslug:slug}]);
return false;
}
getCart(){
this._cartService.getCartContent().subscribe(
res => {
this.cart = res;
console.log(res.result)
}
);
}
addtoCart(id:number){
this._cartService.addToCart(id).subscribe(
res => console.log(res)
this._cartStatus.updateCart(id);
//want to pass the data to CartStatus Component
)
}
}
2) CartUpdate Component which shows no of items in cart
#Component({
selector : 'cart-status'
})
#View({
template :'{{cart}}'
})
export class CartStatus{
cart;
updateCart(id:number){
this.cart = id;
}
}
The problem is that I have not been able to pass the id or any value to the CartStatus view. When I console.log the id on updateCart it shows accurate value but does not reflect on the view of the CartStatus.
Am I doing something wrong here??
From your code, what I can figure out is CartStatus is a component so,
providers :[CartService,CartStatus]
should be,
providers : [CartService]
directives : [cardStatus]
Now, check this official docs for communication between components,
https://angular.io/docs/ts/latest/cookbook/component-communication.html
I am also creating a large scale shopping cart using MEAN stack with Angular 2
As for me adding items to a cart is not so easy for me to implement. User has items(products, qty, total price), User has orderedItems(items, totalQty, totalPrice), User - logged in, all session cart items are cleared and added to user items and so on. I implemented my cart with MongoStore (session with expiration date) so that when you refresh the page, the items are still stored in the cart. MongoStore is a long subject and I can not help you here. There is a tutorial in Utube(angular 1 by MAX from Udemy and that's how I learned it). Honestly, I do not know how to store a "class object" in a LocalStorage. For learning purposes of how to add items to a cart is to use array.
Lets' create a Cart class:
export Class {
public product: Product;
public qty: number) {}
}
Create a service: cart.service.ts
import { Injectable } from '#angular/core';
import { Cart } from './cart';
import { Product } from './product';
#Injectable()
export class CartService {
private carts: Carts[];
getCart() {
return this.carts;
}
addToCart(product: Product) {
for(let i=0; i<this.carts.length; i++) {
if(this.carts[i].product.productId == product.productId) {
this.carts[i].quantity = this.carts[i].quantity + 1;
return;
}
let cart = new Cart(product, 1);
this.carts.push(cart;
}
}
getCartTotal(){
let total = 0;
for(let i=0; i<carts.length; i++) {
total = total + this.carts[i].quantity;
}
return total;
}
emptyCart() {
this.carts = [];
}
}
In your cart component:
export class CartStatus implements OnInit {
carts: Cart[];
constructor(private: _cartService: CartService) {
ngOnInit(){
this.carts = this._cartService.getCart(); //no subsribe() here since is not an http request.
}
Please don't forget to add CartService to to your boot file. I hope this helps. I can also help you with deleteItem, updateItem, and getTotalCost. Thanks and Happy coding..
Related
I'm trying to find a way to share a variable between my components in Angular. My variable that I pass to my child components are interchangeable between their child components. I used service for this, but still could not solve the problem. I am sharing a demo by simplifying my operations using BehaviorSubject.
demo : https://stackblitz.com/edit/angular-ivy-6usdww?file=src%2Fapp%2Fhello.component.ts
My problem is:
i am sending variables from my app.component.ts component to hello and hello-a components. i am mutating variable in hello component. However, just before that I point the first version to a service. however, the changed status is forwarded.
hello.component
export class HelloComponent {
#Input() colDef: any[];
col: any[];
constructor(private columnDefService: ColumnDefService) {}
ngOnInit() {
let colDefFirst = Object.assign([], this.colDef);
this.columnDefService.setFirstColDef(colDefFirst);
this.setColumnDef(this.colDef);
}
setColumnDef(colDef: any[]): void {
let rC: any = Object.assign([], colDef);
rC[0].hide = true;
this.columnDefService.setColDef([].concat(rC));
this.columnDefService.colDef$.subscribe((colDef: any) => {
this.col = colDef;
});
}
}
hello-a.component
export class HelloAComponent {
#Input() colDef: any[];
firstColDef: any[] = [];
constructor(private ColumnDefService: ColumnDefService) {}
ngOnInit() {
this.ColumnDefService.firstColDef$.subscribe((firstColDef: any) => {
console.log('firstColDef', firstColDef);
this.firstColDef = firstColDef;
});
}
}
coldef.service
#Injectable({
providedIn: 'root'
})
export class ColumnDefService {
private colDefSource = new BehaviorSubject([]);
private firstColDefSource = new BehaviorSubject([]);
colDef$ = this.colDefSource.asObservable();
firstColDef$ = this.firstColDefSource.asObservable();
setColDef(colDef: any) {
this.colDefSource.next(colDef);
}
setFirstColDef(colDef: any) {
this.firstColDefSource.next(colDef);
}
}
this is what i want to do:
storing my variable in a component for future use. i want to continuously change my variable on demand in my other component.
thanks for your advice
In my project, I wanted to create some sort of "Recommended Products" in each product page,
but having trouble with making my function filtering an observable.
I have tried using .pipe(filter()) in different ways, but to no use.
Basically the fucntion should filter products with the same type and id, and show them in the proper product page, but pretty much got stuck after subscribing all of my products(which is marked down below).
Much Appreciated!
import { Component, OnInit } from '#angular/core';
import { ProductService } from '../services/product.service';
import { ActivatedRoute, ParamMap, Router } from '#angular/router';
import Product from '../interfaces/product';
import { map, filter} from 'rxjs/operators';
import { Observable } from 'rxjs';
#Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
recommandedProducts: Product[];
allProducts:Product[];
// allProducts:Observable< Product> = new Observable< Product>();
product: Product;
constructor(private productService: ProductService, private route: Router, private actRoute: ActivatedRoute) { }
ngOnInit() {
this.findRecommendedProducts(this.product)
};
//From ProductService:
// getProducts(){
// return this.http.get(`${this.uri}`);
// }
findRecommendedProducts(currectProduct: Product){
this.productService.getProducts().subscribe((data: Product[]) => {
this.allProducts = data;
console.log(this.allProducts)
this.recommandedProducts = this.allProducts.filter(otherProduct =>
otherProduct.type == currectProduct.type && otherProduct.id == currectProduct.id)
console.log(this.recommandedProducts);
});
};
}
A filter in rxjs is not the same as an Array.filter. In rxjs, a filter is used to emit values that pass the provided condition. So if you use a filter, based on the condition, the observable will either emit your data or return nothing.
Instead, what you need is pipe(map) along with an Array.filter. Also, as #jzzfs pointed out, your error shows currentProduct could be undefined, so you can pass a default value in your findRecommendedProducts function.
Try the below code.
findRecommendedProducts(currectProduct: Product = {} as Product) {
this.productService.getProducts()
.pipe(
map((products: Product[]) => products.filter(product => product.type == currectProduct.type && product.id == currectProduct.id))
)
.subscribe((data: Product[]) => {
this.recommandedProducts = data;
});
};
Now your subscribed data should directly return the recommendedProducts.
Looks like the currectProduct passed onto findRecommendedProducts is undefined, since the logged this.allProducts do contain values.
With that being said, notice that when you define product: Product, you've only defined its type but you have not initialized it. The default value is therefore undefined -- if I remember correctly.
So change product: Product to product: Product = {};, for instance or pass a value to it within the constructor or within ngInit.
I have an angular 6 application, which has a top bar and a content area below this. These are different component and I am currently developing the user profile page. Name of the user is also displayed in the top bar.
My problem is like whenever I have updated the user's name in EditUser page, it successfully saves, but the same is not updated on the top bar. In Vue.js, I can simply handle this with a Vuex store; but how can I handle this in Angular 6.
Any help would be much appreciated.
Next time post a bit of code. Since there isn't, I'll show you how to do it with an example.
Let's assume we have two component, A and B. And the changes will be reflected on both of two components.
Service :
export class YourService{
private data$ = new BehaviorSubject<string>(null);
data = this.data$.asObservable();
public setData(data: string){
this.data$.next(data);
}
}
Component A/B.html :
<div>{{something}}</div>
Component A/B.ts :
isAlive = true;
something: string;
constructor(
private service: YourService
) { }
ngOnInit(){
this.service.data
.takeWhile(() => this.isAlive)
.subscribe( res => {
if(!!res){
this.something = res;
}
});
}
ngOnDestroy(){
this.isAlive = false;
}
Component that change the status:
export class AnotherComponent{
constructor(
private service: YourService
) { }
private changeData(data: string){
this.service.setData(data);
}
}
Now everything is working fine. BehaviorSubject allow the communication between components. whenever the function changeData is fired, you will see the changes on both of your components.
takeWhile is for unsubscribing when the component die.
If you have more question, feel free to ask them to me and I will edit this answer.
You can create service to exchange data between components. It could be UserService that provide access to current user information.
#Injectable()
export class UserService {
user: UserInfo;
// define user here (load from backend or somehow else)
}
In user-profile.component.ts
export class UserProfileComponent {
constructor(public userService: UserService) { }
}
user-profile.component.html
<input type="text" [(ngModel)]="userService.user.name">
In header.component.ts
export class HeaderComponent {
constructor(public userService: UserService) { }
}
header.component.html
<span>{{ userService.user.name }}</span>
So the anggular DI will create a singleton UserService and injects the same object to both components. And when you change it in any of them the changes will be shown in other.
I hope i post this in a concise way. The main goal here is to update a list after a button click. I have a list of hobbies. When I click the (hobbies.component) in the list, the hobby-view component should update with a list of that hobby type. I can successfully make a call to the server. But, I'm not seeing the component hobby-view update.
Hobbies.component
<ul class="hobbyList">
<li *ngFor="let hobby of hobbies" (click)="onSelect(hobby)">
<span class="badge">{{hobby.HobbyName}}</span>
</li>
</ul>
getHobbies() creates the ul of hobbies to click. onSelect then uses a service to update a string inside the hobby-view component (which works). Then tries to update a list inside the hobby-view component.
export class HobbiesComponent implements OnInit {
selectedHobby: hobbyObj;
hobbies: hobbyObj[];
constructor(
private hobbyService: HobbyService,
private masterhobbydata: MasterHobbydata
) { }
ngOnInit() {
this.getHobbies();
}
getHobbies(): void {
this.hobbyService.getHobbies()
.subscribe(hobbies => this.hobbies = hobbies);
}
onSelect(hobby: hobbyObj): void {
this.selectedHobby = hobby;
this.masterhobbydata.changeMessage(this.selectedHobby.HobbyName);
this.masterhobbydata.getHobbiesById();
}
}
Hobby-view.component
<ul>
<li *ngFor="let hobby of hobbiesRooms">
<span class="badge">{{hobby.hname}}</span>
</li>
</ul>
<p>
Message: {{message}}
</p>
export class HobbyViewComponent implements OnInit {
hobbyRoomObj = HobbyRoomObj;
hobbiesRooms: HobbyRoomObj[];
message:string;
constructor(private data: MasterHobbydata) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message);
}
getHobbiesById(): void {
console.log("hit");
this.data.getHobbiesById()
.subscribe(hobbiesRooms => this.hobbiesRooms = hobbiesRooms);
}
}
Inside ngOnIt is where the simple string gets updated successfully from the onClick method inside hobbies.component.
Here is the service component MasterHobbyData
#Injectable({
providedIn: 'root'
})
export class MasterHobbydata {
private messageSource = new BehaviorSubject<string>("1");
currentMessage = this.messageSource.asObservable();
private hobbyListByIdUrl="http://local/?Hobby=";
constructor(private http: HttpClient){}
changeMessage(message: string) {
this.hobbyListByIdUrl += message;
this.messageSource.next(message);
}
//Returns a full list of current hobbies hosted
getHobbiesById(): Observable<HobbyRoomObj[]>{
return this.http.get<HobbyRoomObj[]>(this.hobbyListByIdUrl)
.pipe(
catchError(this.handleError('getHobbiesById', []))
);
}
}
I've been trying to manipulate this piece of code for the list of hobbies. I believe this where my problem lies.
private messageSource = new BehaviorSubject<string>("1");
currentMessage = this.messageSource.asObservable();
I think I have to make variable of BehaviorSubject
But I can't seem to find the correct syntax to this.
Am I correct in my approach? If i am, how should I implement the syntax? Any help would be much appreciated. I am new to Angular.
LIST
Karate
Apples
Cake
When I click on Apples, a request to my php script will return a list of apples. And so on and so forth.
my suggestion is to use Subject.
i.e messageSource = new Subject<string>();
and subscribe to messageSource
currentMessage = this.messageSource.asObservable(); not required remove it.
Change the currentMessage to messageSource
ngOnInit() {
this.data.messageSource .subscribe(message => this.message = message);
}
Whenever the messageSource changed it will automatically subscribed in you component.
#Injectable({
providedIn: 'root'
})
export class MasterHobbydata {
private messageSource = new BehaviorSubject<string>("1");
currentMessage = this.messageSource.asObservable();
private hobbyListByIdUrl="http://local/?Hobby=";
constructor(private http: HttpClient){}
changeMessage(message: string) {
this.messageSource.next(message);
}
//Returns a full list of current hobbies hosted
getHobbiesById(message): Observable<HobbyRoomObj[]>{
const url = this.hobbyListByIdUrl + message;
return this.http.get<HobbyRoomObj[]>(url)
.pipe(map(( response) =>{
return response;
}
)).pipe(catchError(this.handleError('getHobbiesById', []))
);
}
}
component file changes
export class HobbyViewComponent implements OnInit {
hobbyRoomObj = HobbyRoomObj;
hobbiesRooms: HobbyRoomObj[];
message:string;
constructor(private data: MasterHobbydata) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => {
this.message = message
this.getHobbiesById(message);
});
}
getHobbiesById(message): void {
console.log("hit");
this.data.getHobbiesById(message)
.subscribe(hobbiesRooms => this.hobbiesRooms = hobbiesRooms);
}
}
I create own store
export interface IAppState {
cartData:ICartItem[];
lastUpdate:Date;
}
and add some reducer to handle ADD and REMOVE actions
But in many places I just need latest data from store. According to documentation it is enough to add attr #select() to store item add you will get current state.
But I've created some service which will do all work like get, add and remove items from store
#Injectable()
export class CartService {
#select() private cartData: ICartItem[] ;
constructor(private ngRedux: NgRedux<IAppState>) { }
getItems() {
return this.cartData;
}
addItem(item: IItem) {
this.ngRedux.dispatch({type: ADD_CART_ITEM, cartItem : item});
}
removeItem(itemId: string) {
this.ngRedux.dispatch({type: REMOVE_CART_ITEM, id: itemId});
}
removeAllItems() {
this.ngRedux.dispatch({type: REMOVE_ALL_CART_ITEMS});
}
}
But problem - when I init myCartData property with getItems on init of my component, later I can add or remove some item, but myCartData property will not be updated after all this.
So how can I get latest state from store using such service? Or this approach is bad and I need to get state from store directly when I want without any custom services?
Try this:
#Injectable()
export class CartService {
#select('cartData') cartData$: Observable<ICartItem[]> ;
constructor(private ngRedux: NgRedux<IAppState>) { }
addItem(item: IItem) {
this.ngRedux.dispatch({type: ADD_CART_ITEM, cartItem : item});
}
removeItem(itemId: string) {
this.ngRedux.dispatch({type: REMOVE_CART_ITEM, id: itemId});
}
removeAllItems() {
this.ngRedux.dispatch({type: REMOVE_ALL_CART_ITEMS});
}
}
In your component file just subscribe to cardService.cardData$, or use an async pipe in your template.