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

Angular application unable to invoke the Web API GET method

Calculating the sum of values in a GridView using ASP.NET

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

Implement the maskmoney library in your input fields

What is the most effective way to transmit multiple pieces of server-side data to JavaScript?

The JOI validation process is failing to return all error messages, even though the "abort early" option

Is there a way to use a Google Chrome command line switch to simulate the dimensions of a

What are some methods for preventing JavaScript function calls from the browser console?

Successful execution occurring prior to beforeSend in a Cordova iOS application utilizing jQuery Ajax

Do I have to divide the small functions in my Node.js controller into smaller ones?

The technique for handling intricate calls in node.js

Exploring the power of NestJS integration with Mongoose and GridFS

The external IP address cannot be accessed beyond the function scope in Node.js

Create node panels using GoJS and apply paint to them to enhance

When attempting to pre-render a Next.js page using getStaticProps(), an error occurs stating that the image is missing the required "src" attribute when using next/image

progressing both forward and backward through every month

Encountering an error with [object%20Object] when utilizing ajaxFileUpload

Setting up proxy middleware in an express application

Creating resizable SVG elements using HTML or CSS for dynamic width and height

Attempting to start an Angular project using NG NEW constantly fails nowadays - always ends with error code EPERM