The HTML button triggers a function to execute on a different webpage when clicked

Question

The HTML button triggers a function to execute on a different webpage when clicked

I'm facing a straightforward issue that I can't seem to figure out due to my limited experience with Angular and web development. The problem revolves around two components, namely home and dashboard. In the home.component.html file, there's a button that toggles the image source from bulbOn.png to bulbOff.png. What I want is for this button to change the image source in the same way on the dashboard.component.html file as well. I believe I need to use TypeScript for this task, but I'm unsure how to go about it. Essentially, how can an onClick event in one HTML trigger actions in another HTML?

home.component.html

<mat-card >              
              <button onclick="document.getElementById('myImage').src='assets/BulbOn.svg'">Turn on the bulb.</button>
              
              <img id="myImage" src="assets/BulbOn.svg" style="width:100px">
              
              <button onclick="document.getElementById('myImage').src='assets/BulbOff.svg'">Turn off the bulb.</button>
              
              </mat-card>

dashboard.component.html

<mat-card class="bulbCard">
    <div class="bulbimg"> <img src="assets/BulbOn.svg"> </div>
    </mat-card>

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

home.component.ts

import { Component } from '@angular/core';
import { User } from '@app/_models';
import { AccountService } from '@app/_services';

@Component({ templateUrl: 'home.component.html',
styleUrls: ['./home.component.less'] })
export class HomeComponent {
    user: User;

    constructor(private accountService: AccountService) {
        this.user = this.accountService.userValue;
    }
}

javascript html css angular typescript

Answer 1

Answer №1

A best practice is to refrain from directly manipulating the DOM in Angular.

Instead of using onclick, it's recommended to utilize Angular's event binding capabilities. https://angular.io/guide/event-binding

<mat-card>              
    <button (click)="changeBulbState(true)">
        Turn on the bulb.
    </button>
              
    <img [src]="bulbState ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'" style="width:100px">
              
    <button (click)="changeBulbState(false)">
        Turn off the bulb.
    </button>
              
</mat-card>

Include a variable for bulbState in your component's TypeScript file. This variable will be updated as you interact with the buttons on your card.

The image source will dynamically change based on the value of the bulbState variable.

import { Component } from '@angular/core';
import { User } from '@app/_models';
import { AccountService } from '@app/_services';

@Component({ templateUrl: 'home.component.html',
styleUrls: ['./home.component.less'] })
export class HomeComponent {
    user: User;

    bulbState: boolean;

    constructor(
        private accountService: AccountService,
        private bulbStatusService: BulbStatusService
    ) {
        this.user = this.accountService.userValue,
        this.bulbStatusService.bulbStatus.subscribe(data => this.bulbState = value)
    }

    changeBulbState(state: boolean) {
        this.bulbStatusService.changeBulbState(state);
    }

}

To share functionality across multiple components, consider using a service.

https://medium.com/front-end-weekly/sharing-data-between-angular-components-f76fa680bf76

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class BulbStatusService {

  private bulbState = new BehaviorSubject(false);
  bulbStatus = this.bulbState.asObservable();

  constructor() { }

  changeBulbState(state: boolean) {
    this.bulbState.next(state)
  }
  
}

Answer 2

A best practice is to refrain from directly manipulating the DOM in Angular.

Instead of using onclick, it's recommended to utilize Angular's event binding capabilities. https://angular.io/guide/event-binding

<mat-card>              
    <button (click)="changeBulbState(true)">
        Turn on the bulb.
    </button>
              
    <img [src]="bulbState ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'" style="width:100px">
              
    <button (click)="changeBulbState(false)">
        Turn off the bulb.
    </button>
              
</mat-card>

Include a variable for bulbState in your component's TypeScript file. This variable will be updated as you interact with the buttons on your card.

The image source will dynamically change based on the value of the bulbState variable.

import { Component } from '@angular/core';
import { User } from '@app/_models';
import { AccountService } from '@app/_services';

@Component({ templateUrl: 'home.component.html',
styleUrls: ['./home.component.less'] })
export class HomeComponent {
    user: User;

    bulbState: boolean;

    constructor(
        private accountService: AccountService,
        private bulbStatusService: BulbStatusService
    ) {
        this.user = this.accountService.userValue,
        this.bulbStatusService.bulbStatus.subscribe(data => this.bulbState = value)
    }

    changeBulbState(state: boolean) {
        this.bulbStatusService.changeBulbState(state);
    }

}

To share functionality across multiple components, consider using a service.

https://medium.com/front-end-weekly/sharing-data-between-angular-components-f76fa680bf76

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class BulbStatusService {

  private bulbState = new BehaviorSubject(false);
  bulbStatus = this.bulbState.asObservable();

  constructor() { }

  changeBulbState(state: boolean) {
    this.bulbState.next(state)
  }
  
}

Answer 3

Answer №2

To achieve the desired functionality, it is important to establish a state for the bulb somewhere in an Angular application. This can be done by either having the parent component pass down the state to its children or utilizing a service to manage the state. Luckily, Angular comes equipped with RxJS which provides powerful utilities like observables for sharing states.

For example, consider creating an app-state.service.ts file:

import { BehaviorSubject } from 'rxjs'; 

@Injectable({
  providedIn: 'root'
})
export class AppState {
   public readonly lightBulb = new BehaviorSubject<'on' | 'off'>('on');
}

You can then inject this service into your home component:

import { Component } from '@angular/core';
import { User } from '@app/_models';
import { AccountService } from '@app/_services';
import { AppState } from 'app-state.service';

@Component({ templateUrl: 'home.component.html',
styleUrls: ['./home.component.less'] })
export class HomeComponent {
    user: User;

    constructor(
        private accountService: AccountService,
        public state: AppState
    ) {
        this.user = this.accountService.userValue;
    }
}

In the HTML template:

<mat-card>              
  <button (click)="state.lightBulb.next('on')">Turn on the bulb.</button>
  <img id="myImage" [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'" style="width:100px">
  <button (click)="state.lightBulb.next('off')">Turn off the bulb.</button>
</mat-card>

Repeat this process for the dashboard component as well:

import { Component } from '@angular/core';
import { AppState } from 'app-state.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent {

  constructor(public state: AppState) { }
}

And in the dashboard's HTML:

<mat-card class="bulbCard">
    <div class="bulbimg"><img [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'"></div>
</mat-card>

In summary, Subjects are containers that hold values and these values can be modified using Subject.next([value here]).

Subjects are essentially Observables and you can subscribe to them to receive updates over time. Angular simplifies this process with the async pipe, handling subscriptions and disposal automatically when the component is destroyed.

While the "observable store pattern" presented here is basic, there are opportunities for further optimization. Remember to use Angular-specific syntax like (click) instead of traditional onclick, and avoid direct DOM manipulation in favor of data binding using brackets [].

Answer 4

To achieve the desired functionality, it is important to establish a state for the bulb somewhere in an Angular application. This can be done by either having the parent component pass down the state to its children or utilizing a service to manage the state. Luckily, Angular comes equipped with RxJS which provides powerful utilities like observables for sharing states.

For example, consider creating an app-state.service.ts file:

import { BehaviorSubject } from 'rxjs'; 

@Injectable({
  providedIn: 'root'
})
export class AppState {
   public readonly lightBulb = new BehaviorSubject<'on' | 'off'>('on');
}

You can then inject this service into your home component:

import { Component } from '@angular/core';
import { User } from '@app/_models';
import { AccountService } from '@app/_services';
import { AppState } from 'app-state.service';

@Component({ templateUrl: 'home.component.html',
styleUrls: ['./home.component.less'] })
export class HomeComponent {
    user: User;

    constructor(
        private accountService: AccountService,
        public state: AppState
    ) {
        this.user = this.accountService.userValue;
    }
}

In the HTML template:

<mat-card>              
  <button (click)="state.lightBulb.next('on')">Turn on the bulb.</button>
  <img id="myImage" [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'" style="width:100px">
  <button (click)="state.lightBulb.next('off')">Turn off the bulb.</button>
</mat-card>

Repeat this process for the dashboard component as well:

import { Component } from '@angular/core';
import { AppState } from 'app-state.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent {

  constructor(public state: AppState) { }
}

And in the dashboard's HTML:

<mat-card class="bulbCard">
    <div class="bulbimg"><img [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'"></div>
</mat-card>

In summary, Subjects are containers that hold values and these values can be modified using Subject.next([value here]).

Subjects are essentially Observables and you can subscribe to them to receive updates over time. Angular simplifies this process with the async pipe, handling subscriptions and disposal automatically when the component is destroyed.

While the "observable store pattern" presented here is basic, there are opportunities for further optimization. Remember to use Angular-specific syntax like (click) instead of traditional onclick, and avoid direct DOM manipulation in favor of data binding using brackets [].

The HTML button triggers a function to execute on a different webpage when clicked

Answer №1

Answer №2

Similar questions

Align the text to the right within a display flex container

JavaScript: Launching the current page in a new tab or window

"Trouble displaying specific events based on their IDs retrieved from the MySQL database

I cannot seem to alter the background color of my image through the use of external CSS

Tips on optimizing data processing for quicker display with ngFor

Ways to showcase a div exclusively on UC mini browser

View real-time data in Vuejs 3 as it executes

Exploring the functions of Safari input types: search, reset, and normalize

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Running a designated AJAX function from a variable by utilizing Applescript

import error causing an angular application to crash even with the module installed

How to Modify Boolean Value in Angular 4 from a Different Component

Display a loading indicator when loading a lazy loaded module in Angular 2

Synchronization problem encountered in an Angular app involving playwright

Element with negative z-index overlapping background of parent element

Sending a div class as a parameter to a JavaScript function

Bespoke Video Player using HTML5 with "Nerdy Stats" Feature

Try out various scenarios using propsdata within Vue.js

Guide on creating a function in PHP that takes a string input and outputs it in JSON format

Button component in React JS fails to appear on iPhones