0

I just started learning Angular and it seems a bit different to React which was the first JS framework/library I learned.

I watched some courses this week and I thought I should write down some code and see how far it gets me, test what I've learned. You might recognize the app as it's been one of the challenges listed on Frontend Mentor and I've completed this in React so I wanted to give it a go in Angular aswell.

This is what I've done so far. https://i.sstatic.net/Lp1Qj.png

Atm, I am not fetching data from the API because I don't know how, just yet. However, what I want to do is:

  1. when I click the Light button, the theme should switch to Dark and vice-versa. I created a service for this.
export class ThemeService {
  isLightTheme:boolean = true;

  changeTheme():void {
    this.isLightTheme = !this.isLightTheme;
  }
}

What I did was to link up the button in the header to the changeTheme() function

TS

  changeTheme():void {
    this.themeService.changeTheme();
    this.isLightTheme = this.themeService.isLightTheme;    
  }

HTML

<button (click)="changeTheme()">...</button>

But I am not sure how to listen to changes of this isLightTheme property in the service and apply it to other components that need to know which theme to apply.

  1. How can I create the functionality that when there's something typed in the search input, the country cards get filtered? Also a service? How am I supposed to link up two different components (search input is a component, the cards container is a different input)? Observables?
Improve this question
0

3 Answers 3

Reset to default
1

The best way to do this is to use BehaviourSubject from the rxjs lib

The code would look like this:

export class ThemeService {

  public isLightTheme: BehaviorSubject<boolean> = new BehaviorSubject(true);

  changeTheme():void {
    this.isLightTheme.next(!this.isLightTheme.getValue());
  }
}

Then, in your components, you can subscribe to the value of isLightTheme like this:

themeService.isLightTheme.subscribe(val=>{
   //do something with val
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Is there another way? I am a beginner so I would like to do it basic, this BehaviourSubject thing overwhelms me.
BehaviourSubject thing is the easiest solution. Take you time to understand rxjs as it will help you to build efficient angular apps.
0

Q1: You can use localStorage.

to set the value:

localStorage.setItem("isLightTheme",true);

to get the value

this.isLightTheme = localStorage.getItem("isLightTheme");

Reference 1 Reference 2

Q2: You can use HTMLElement to hide the div (I'm assuming that you are assigning an id to the country card divs).

(<HTMLElement>document.getElementById('your-div-id')).<attribute-to-change>= newValue;

Reference 3

Improve this answer

1 Comment

This is not an ideal solution as the OP wants a solution in observer pattern.
0

Solution 1: The best answer is to use NgRX state management to store this type of information. which can be shared in other parts of the application. Any update in one place can update the whole application at once.

Solution 2: Use @Input and @Output decorators to share information between components,
you can see an example here https://indepth.dev/posts/1218/lets-implement-a-theme-switch-like-the-angular-material-site

Improve this answer

1 Comment

I don't recommend to use NgRX for a such simple case. OP being a student he should first try to implement easier solutions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.