0

I'm trying to build a admin panel using Angular. Please do note that, this is my first time using Angular and first time on OOP constructs.

I have a page where I list all the product types, by selecting or rather clicking on any of the product type. I redirect them to another page with the brands for the respective product.

So, when I searched the internet to check what is the best way of sharing data across multiple components, I found BehaviourSubject, and I did successfully manage to redirect the user from the products page to the brands page. Now I wanted to route the user to a new page from the brands page after they select the brands.

So far, I managed to do the BehaviourSubject with just one variable of type string which is selecting one product from the products page. Now I have an option for my users to select multiple brands.

How can I pass this data to the next page? And when I select the brands, will I still be able to access my product value using the BehaviouSubject. I was thinking to create a class and update the last value to the class, which I couldn't do it unfortunately.

CODE

@Injectable()
export class UserActionService {

    private product;
    private currentProduct;

    constructor() {
        this.product = new BehaviorSubject<UserActions>(null);
        this.currentProduct = this.product.asObservable();
    }

    changeProduct(product: UserActions) {
        this.product.lastProduct.next(product);
    }
}

export class UserActions {
    private lastProduct: string;
    private lastBrands: Array<string>;
}

This code didn't throw me any error on the tslint, but on the browser it throws me an error:

Cannot read property 'next' of undefined

I don't know if I'm doing the right thing, any help will be much appreciated.

Aluan Haddad
  • 29,886
  • 8
  • 72
  • 84
Unknown User
  • 3,598
  • 9
  • 43
  • 81
  • You need to pass brands as serialized values using parameters, local storage, or server-side style session concepts. Why? Because what if the user refreshes the page? Also, this is not related to OOP. Also, `new BehaviorSubject(null)` is wrong because the difference between a `BehaviorSubject` and a `Subject` is that the former has an initial value. – Aluan Haddad Dec 01 '17 at 18:02
  • I'm fairly new to all these concepts, are you trying to tell me that, this isn't the best way for me to store the user actions? – Unknown User Dec 01 '17 at 18:04
  • I'm saying that it depends on what you wish to achieve. If you only have say ~10 brands, I would declare them as route parameters. That way the app can start from any context and if there are params in the URL interested components and services can examine them and load relevant data. – Aluan Haddad Dec 01 '17 at 18:05
  • Okay, if I wanted to use these 10 brands again in a different route, should I use routeparams there as well? – Unknown User Dec 01 '17 at 18:08
  • you would want to be consistent so yes. It will be a bit awkward because you will need to delimit the brand values, say with `,`s. There are other approach besides parameters. For example, you could save them to the users profile server-side. Also, just a note, but I don't see how they are _actions_, they are selection results. I guess you are trying to do something like Flux/Redux/NgRx – Aluan Haddad Dec 01 '17 at 18:10
  • Well, it does makes sense. But the reason why I wanted to store these values in a class is, incase if I wanted to re-use these values which the users selected I can simply retrieve the values the using a getter or setter from the class. What will be the best option if I wanted to re-use these values in my project somewhere? – Unknown User Dec 01 '17 at 18:16
  • That means if I refresh the page I lose my selections, that isn't good. Also, this has nothing to do with using classes. You want to globally store a value but that will break if the user refreshes the page and causes other problems. – Aluan Haddad Dec 01 '17 at 18:18
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160307/discussion-between-unknown-user-and-aluan-haddad). – Unknown User Dec 01 '17 at 18:20

1 Answers1

0

I think what you need is a GetCurrentValue after redirect to a new page. Referring to Simple way to get the current value of a BehaviorSubject with rxjs5, you can do this:

getProduct() : UserActions {
    return this.product.value;
}
changeProduct(product: UserActions) {
    this.product.next(product);
}
lauthu
  • 306
  • 3
  • 11