Could someone kindly share the code with me?
I am looking for a button that remains pressed after clicking it.
At times, I feel embarrassed for struggling with seemingly simple tasks. Grateful for any guidance or solution provided by this community!
Many thanks! :)
my solution utilizing a Directive:
--HTML
custom-button.component.html
<button class="btn btn-danger" style="width: 110px" customButton"
></button>
--TypeScript
custom-button.directive.ts
@Directive({
selector: '[customButton]'
})
export class CustomButtonDirective implements OnInit {
constructor(private elRef: ElementRef, private renderer: Renderer2) {
}
ngOnInit() {
}
@HostListener('mousedown') onmousedown(eventData: Event) {
if (this.elRef.nativeElement.style.backgroundColor === 'blue') {
this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'rgba(200,0,0,0.7)');
} else {
this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');
}
}
To accomplish this effect, you can customize the appearance of your button through styling.
One way to achieve this is by using the following code:
<input type="button" style="border-style:inset;" />
By applying this border style, your button will appear as if it is constantly pressed down.
Learn HTML with this code snippet:
<button id="myBtn" onclick="changeText()" [disabled]="disabled" >{{buttonText}}</button>
Implement the logic in JavaScript:
buttonText = "Press Here"
disabled = false
changeText() {
const button = document.getElementById('myBtn');
if (button.classList.contains('pressed') {
return;
} else {
this.buttonText = "Pressed";
button.classList.add('pressed');
this.disabled = true;
}
}
Style your button with CSS:
.pressed {
background: "something darker then your unclicked button background color"
}
Received data is structured as follows: const worldMap = [ { "name": "Germany", "parentId": null, "type": "Country", "value": "country:unique:key:1234", "id&qu ...
Looking for some guidance in Angular as a newcomer. I am attempting to adjust a style when clicked. On my page, I have multiple content spaces created using the same template. Upon clicking a "more" link, I desire to expand that specific section. I have ac ...
I am facing an issue while setting up the AppProvider component that utilizes a context and reducer to manage global data for my application. The problem seems to be arising from the useReducer hook used within the AppProvider. I have checked the error mes ...
What CSS property is utilized to display three dots at the end of text when it overflows? ...
Working on an Angular 9 Single Page Application that interacts with a JWT-enabled API. Encountering a 401 error when trying to incorporate the provided interceptor. Any insights on what might be causing this issue? It is worth noting that the application ...
Creating a website with a dropdown menu and slider division can be tricky. When hovering over the menu, the submenu displays but causes the slider division to shift down. Does anyone have suggestions on how to fix this issue? Below is the code: <html& ...
For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...
When testing out my code snippet on the playground for Typescript, an error appears on line 24. I discovered that the issue can be resolved by explicitly casting commands back to <IPlan[]>, but I wonder why this extra step is necessary. Property &a ...
I'm currently working on creating Typescript typings for the link2aws package in order to incorporate it into my Angular project. Despite generating a .d.ts file, I am still encountering the following error message: TypeError: (new link2aws__WEBPACK_I ...
Trying to achieve the functionality of playing and pausing multiple videos. When one video is played, the others should automatically pause. The videos should appear blurred, except when actively playing. Does this make sense? http://jsfiddle.net/1frjov8e ...
I've come across some HTML code where orphaned <li> and </li> tags are surrounding certain paragraphs without any corresponding opening or closing <ul> or <ol> tags. Is there a way to efficiently parse or mass find/replace ove ...
Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...
In my app, I am using Material slide-toggle to control the activation status of products. However, I am facing the following issues: Whenever I toggle one product, it affects the values of all other products as well. The displayed value does not match t ...
Currently experimenting with Kinetic.JS, I managed to create a UFO-like shape using two parts - a red hull and a grey disc. Check out the demo on JSBin My question is: why does the color of the disc change from grey to red when I rearrange the shape orde ...
Utilizing custom properties permits seamless data binding between multiple components. <section id="main"> <app-home [dict]="dict">Hello there!</app-home> </section> In this scenario, dict serves ...
As a newcomer to AJAX and PHP, I am facing some challenges with an inventory management system built using phpmyadmin and wamp. The registration/login system is functioning well. However, upon user login, a table displaying all inventory items is generated ...
Previously, I had a question about passing files to the browser for download, which was easily achieved by passing strings created at the end of a function to an iframe's src attribute. Now, I have a more complex task at hand – I need to pass pre-e ...
In my React application with TypeScript, I am using "react": "^17.0.0". Here is how I define the app state: export interface IRoleState { data: API.RoleItem, menus: API.MenuItem, } When I set up the initial state like this: con ...
In an effort to increase reusability, I developed a base generic form component that could be utilized in other child form components. The setup involves two main files: BaseForm.tsx import { useForm, FormProvider } from "react-hook-form" expor ...
Is there a way to detect errors in an Angular test that uses native elements? The test I am running is as follows: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MikeComponent } from './mike.component&a ...