Creating a button that displays the current day with Angular

I'm in the process of developing a timetable app that features buttons for the previous day, current day, and next day. How can I implement a button to specifically show the current day?

HTML File

    <button type="button" (click)="previousDay()" >Left</button> 
    <br>
    <h2>{{ currentDay }}</h2>
    <br>
    <button type="button" (click)="nextDay()" >Right</button>
    <br>
    <button type="button" (click)="currentDay()" >Current Day</button>
    <br>
</div>

TypeScript File:

export class DayViewComponent implements OnInit {

  events: any[];
  currentDay: Date;
  modalActive: boolean = false;

  previousDay() {
    this.currentDay.setDate(this.currentDay.getDate()-1);
  }

  nextDay() {
    this.currentDay.setDate(this.currentDay.getDate()+1);
  } 

  currentDay(){

}
}

Answer №1

When it comes to naming functions, it's important to be clear and concise. Having a function named currentDay that also represents a date can lead to confusion. One suggestion would be to use a prefix like 'set' to make the function's purpose more explicit.

    setCurrentDay() {
      this.currentDay = new Date()
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in MEAN Stack: Unable to access the property 'companyTitle' because it is undefined

I have established a MongoDB collection named joblist in my database. Additionally, I have developed a DB schema known as jobList.js. var mongoose = require('mongoose'); const joblistSchema = mongoose.Schema({ companyTitle: String, jobT ...

How come ngOnChange is unable to detect changes in @Input elements when ngOnDetect is able to do so?

Check out this plunker Please note: In order to see the effect, you need to restart the app after entering the link. import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core' @Component({ selector: 'sub', templat ...

Encountering difficulty with retrieving information from a shared service on Angular 6

Attempting to pass JSON data from one component to another component (like parent to child) using a service. The service has two methods: setJsonData and getJsonData. Service Class import { Injectable } from '@angular/core'; @Injectable({ pr ...

choose a distinct value for every record in the table

My goal is to only change the admin status for the selected row, as shown in the images and code snippets below. When selecting 'in-progress' for the first row, I want it to update only that row's status without affecting the others. <td ...

Mapping intricate entities to intricate DTOs using NestJS and TypeORM

Currently, I am using the class-transformer's plainToClass(entity, DTO) function to transform entities into DTO objects. In addition, I have implemented the transform.interceptor pattern as outlined in this source. I make use of @Expose() on propert ...

How to show an item using ngFor in Angular 5 with a delay

Currently, I am facing a situation wherein I have an array that gets filled at runtime. My goal is to display its elements in an HTML template using the ngFor loop with a slight delay between each item. For example, I want the first item to be displayed, t ...

Using React to iterate over an array of objects and generate Date TextFields in Material UI

I have an array of objects representing different stages in a specific process, each stage identified by an id and name. The structure of the array is as follows: const stages = [ { id: 1, name: initialize }, { id: 2, name: execute ...

How to invoke a function from a different controller in Ionic 2

Is it possible to call a function in another controller within Ionic 2? Here is my code where I want to call the loadPeople function in the tab controller. home.ts import { Component } from '@angular/core'; import { NavController } from ' ...

Angular Dependency Injection: Individual instances of each service are provided for every module usage

Within my application, there is a module called "FileUpload". The upload service included is "UploadService", which receives a service injection with the interface "RequestService." I also have two other modules: FileManager1 and FileManager2. Each file m ...

TypeScript fails to detect errors in setting state with incorrect interface properties in React components

Even though I clearly defined an interface with specific props and assigned that interface to be used in useState, no error is triggered when the state value is set to an array of objects with incompatible props: This is how ResultProps is defined: interf ...

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

My table is populated with dynamic rows of input boxes, some of which may have a default value while others return an empty string ''. This causes the table to collapse on those inputs. <tr *ngFor="let d of displayData"> < ...

Troubleshooting the need for refreshing in an Angular application when selecting the same menu option repeatedly

Issue with Angular Application: I've noticed a problem in my Angular app where clicking the menu within a component does not trigger a refresh or reload of the component. I want to make sure that the component reloads whenever its specific menu is cl ...

Retrieve the additional navigation information using Angular's `getCurrentNavigation()

I need to pass data along with the route from one component to another and retrieve it in the other component's constructor: Passing data: this.router.navigate(['/coaches/list'], { state: { updateMessage: this.processMessage }, ...

Unable to access FireReader in Ionic 3, while Ionic 4 functions properly

After building my Ionic project on two different computers, I noticed that I received varying results. On the first computer: Ionic Info Ionic: ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.2 ...

Retrieve the input type corresponding to the name and return it as a string using string template literals

type ExtractKeyType<T extends string, K extends number> = `${T}.${K}`; type PathImpl<T, Key extends keyof T> = Key extends string ? T[Key] extends readonly unknown[] ? ExtractKeyType<Key, 0 | 1> : T[Key] extends Record<str ...

Techniques for importing esm libraries without requiring the "type": "module" declaration in the package.json configuration file

I have successfully implemented a TypeScript Node project but now I am facing an issue while trying to integrate the VineJS library into the project. The problem arises because VineJS is exclusively an ESM (ECMAScript Module) package, and when adding it to ...

Developing an Angular 2 class array

Incorporating Angular 2 and TypeScript, my goal is to construct an array of a specific class. import { ClassX } from '...'; public ListX: ClassX[]; Subsequently, once the list is established, I aim to append additional empty instances of C ...

Angular 7 implementation of the Owl carousel

Recently, I started using the Owl carousel in Angular 7. First, I installed it by running this command: npm install ngx-owl-carousel owl.carousel jquery --save I then added these scripts to my angular.json file: "scripts": ["./node_modules/jquery/dist ...

``The positioning of the element does not seem to be effective with the selected [

I'm struggling to position a div using [style]. Even after following the advice from various sources, I can't seem to place the div correctly at 100,100. Could someone please review the code snippet below and point out any errors? Check out the ...

The type 'EventTarget & HTMLTextAreaElement' does not contain the property 'files'

When trying to call a method in React TypeScript on the onChange Event of a MUI Input field, an error is encountered. The error message received is: Type '(event: { target: { files: any[]; }; }) => void' is not assignable to type 'Chang ...