Angular button press

Question

Angular button press

Recently, I started learning Angular and came across a challenge that I need help with. Here is the scenario:

<button *ngIf="entryControlEnabled && !gateOpen" class="bottomButton red" (click)="openGate()">Open</button>
<button *ngIf="entryControlEnabled && gateOpen" class="bottomButton green" (click)="closeGate()">Close</button>

In my .ts file, I have the following logic:

if (data.IoNumber == config.IoNumberGates) {
 if (data.IoStatus == "DetectorDeactivated") {
  this.gateOpen = true;
  } else {
  this.gateOpen = false;
  }
}

I am looking to update

data.IoStatus == "DetectorDeactivated"

to

data.IoStatus == "DetectorActivated"

To better explain, here are my methods:

openGate(){
 this.data.IoStatus == "DetectorActivated"
}

closeGate(){
 this.data.IoStatus == "DetectorDeactivated"
}

If anyone can assist me with this issue, I would greatly appreciate it.

javascript angular typescript

Answer 1

Answer №1

If you need to toggle the variable this.gateOpen between true and false, and the methods this.gateOpen, openGate, and closeGate are within the same component, your functions should be structured like this:

openGate(){
 // this.data.IoStatus == "DetectorActivated";
 // this is incorrect as it is a comparison not an assignment
 this.data.IoStatus = "DetectorActivated";
}

closeGate(){
 // this.data.IoStatus == "DetectorDeactivated";
 // this is incorrect as it is a comparison not an assignment
 this.data.IoStatus = "DetectorDeactivated";
}

I hope this explanation is helpful.

if (data.IoNumber == config.IoNumberGates) {
    if (data.IoStatus == "DetectorDeactivated") {
      this.gateOpen = true;
    } else {
      this.gateOpen = false;
    }
}

Ensure that this code is triggered by the correct event, such as a click event. Otherwise, simply update the this.gateOpen variable directly in the functions like so:

openGate(){
    this.gateOpen = true;
}

closeGate(){
    this.gateOpen = false;
}

Answer 2

If you need to toggle the variable this.gateOpen between true and false, and the methods this.gateOpen, openGate, and closeGate are within the same component, your functions should be structured like this:

openGate(){
 // this.data.IoStatus == "DetectorActivated";
 // this is incorrect as it is a comparison not an assignment
 this.data.IoStatus = "DetectorActivated";
}

closeGate(){
 // this.data.IoStatus == "DetectorDeactivated";
 // this is incorrect as it is a comparison not an assignment
 this.data.IoStatus = "DetectorDeactivated";
}

I hope this explanation is helpful.

if (data.IoNumber == config.IoNumberGates) {
    if (data.IoStatus == "DetectorDeactivated") {
      this.gateOpen = true;
    } else {
      this.gateOpen = false;
    }
}

Ensure that this code is triggered by the correct event, such as a click event. Otherwise, simply update the this.gateOpen variable directly in the functions like so:

openGate(){
    this.gateOpen = true;
}

closeGate(){
    this.gateOpen = false;
}

Answer 3

Answer №2

Switching to a slide toggle can simplify the user interface. Here, I demonstrate how to integrate Angular Material Slide Toggle:

Snippet:

<mat-slide-toggle #approve (change)="toggle($event)" [labelPosition]="'before'">
            {{approve.checked? "Detector Activated": "Detector Activate"}}</mat-slide-toggle>

Controller:

toggle(event: MatSlideToggleChange) {
  console.log('Toggle fired');
  if(event.checked)
     this.data.IoStatus = "DetectorActivated";
  else
     this.data.IoStatus = "DetectorPaused";
}

Answer 4

Switching to a slide toggle can simplify the user interface. Here, I demonstrate how to integrate Angular Material Slide Toggle:

Snippet:

<mat-slide-toggle #approve (change)="toggle($event)" [labelPosition]="'before'">
            {{approve.checked? "Detector Activated": "Detector Activate"}}</mat-slide-toggle>

Controller:

toggle(event: MatSlideToggleChange) {
  console.log('Toggle fired');
  if(event.checked)
     this.data.IoStatus = "DetectorActivated";
  else
     this.data.IoStatus = "DetectorPaused";
}

Angular button press

Answer №1

Answer №2

Similar questions

Building a dynamic attribute management system with vue and vuetify

Workbox background sync - Retrieving replayed API responses

Detect errors in the `valueChanges` subscription of Firestore and attempt a retry if an error occurs

Is there a way to determine the specific type of a property or field during runtime in TypeScript?

Is the async pipe automatically unsubscribing from an observable that is defined in a service and referenced in a component variable?

Having trouble with ES6 in Canvas - why won't my code display correctly?

Problem with Layering in Javascript Canvas Game using Kinetic JS

The ajax function nestled within a nested forEach loop completes its execution once the inner callback function is triggered

Touchwipe incorporation - single-page website script

Leverage the SVG foreignObject Tag within your Angular 7 project

Perform activities within a component responsible for displaying a flatlist

send image back to Angular component from server response

VueJS Error: Attempting to access a property that is undefined causing a TypeError (reading 'toLowerCase')

The design problem arises from using jQuery to dynamically prepare the table body at runtime

Sending an Ajax request using an array of parameters and then accessing them in PHP

Encountering a data property error while trying to render ejs using axios

Querying Techniques: Adding an Element After Another

The iisnode encountered an issue with HRESULT 0x6d resulting in a status code of 500 and a substatus of 1013

There is an issue with the property 'updateModf' in the constructor as it does not have an initializer and is not definitely assigned

`"Unable to execute the 'ng build --env=prod' command"`