Angular 9 - Button unable to be clicked under certain conditions

I have a webpage that contains a lot of information, and I would like to make it easier for the user to show/hide specific parts by clicking on buttons. Check out this stackblitz to see what I've done. Here's a brief summary of the code:

<button [className]="liTrucVisibility" (click)="changeTrucVisibility($event)">part 1</button>
  <div>
    <p>...</p>
  </div>
  <button [className]="liFonctionnalityVisibility" (click)="changeFonctionnalityVisibility($event)">part 2</button>
    <div>
      <h1>another section</h1>
      <p>...</p>
  </div>

It seems like part1 is always clickable, enabling the user to show or hide the following div. However, part2 is only clickable if the div of part1 is visible. This behavior is unexpected to me, and I'm unsure why it's happening.

My first question: Can someone explain to me what's causing this behavior?

My second question: What adjustments do I need to make to achieve the desired functionality?

Thank you in advance for your assistance.

angulartypescriptclickvisibility

Answer №1

To manage the layers effectively, you can utilize the position and z-index properties. However, when dealing with more than 2 layers, this approach might introduce unnecessary complexity. An alternative solution is to adjust the visibility property. Here's how you can implement it:

button {
    width: 100%;
    color: $darkenedPrimaryColor;
    border: solid 1px $darkenedPrimaryColor;
    text-align: left;
    background-color: transparent;
    padding: 0.4rem 8px 0.4rem 8px;
    margin-bottom: 0.6rem;
    &::before {
        margin-right: 1rem;
        margin-left: 1rem;
        content: '\1405';
        color: $darkenedPrimaryColor;
    }
    &.hidden {
        & + div {
            opacity: 0;
            visibility: hidden;
            max-height: 0;
            transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;
        }
    }
    &.visible {
        &::before {
            content: "\1401";    
        }
        & + div {
            opacity: 1;
            visibility: visible;
            max-height: 100%;
            transition: opacity 0.2s ease-in-out, max-height 0.2s ease-in-out;
        }
    }
}

I've customized your Stackblitz

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

Angular template containing a material table within a virtual scroll component

I am attempting to incorporate the content of ng-template into the cdk-virtual-scroll-viewport (using the library: ng-table-virtual-scroll), but I am encountering an error. <cdk-virtual-scroll-viewport tvsItemSize [footerEnabled]="true" ...

angularangular-materialangular-cdk

What is the most effective way to determine the data type of a variable?

My search skills may have failed me in finding the answer to this question, so any guidance towards relevant documentation would be appreciated! I am currently working on enabling strict type checking in an existing TypeScript project. One issue I'v ...

typescript

Error message: Cordova not found - unable to use 'ionic native' 3 for CRUD operations with SQLite database

I am attempting to manage CRUD data with SQLite in Ionic 3, but unfortunately cordova is not functioning as expected. https://i.sstatic.net/5m411.png ...

angulartypescriptionic3

What is the process for setting up a single button selection using OR logic and multiple button selection using AND logic?

Currently working on implementing button functionality in React for filtering data. The requirement is that when selecting specific criteria, such as bedroom 3 or multiple selections like bedroom 2 and 3, the logic should vary. For instance, selecting bedr ...

javascriptreactjstypescriptreact-native

When trying to access instance member variables, Observable does not allow it

Within the hotelService file, I am retrieving data from the backend API that contains information about hotels. hotelService file import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders} from "@angular/common/http"; impor ...

angular

What is the frequency of page rendering in Angular 2 before displaying it?

I've been working with Angular 2 on a project lately. In my template, I have a simple div that triggers a function in my .ts file to display basic text like so: <div>{{ test() }}</div> test(): void { console.log("Test text") ...

htmlangularrenderingangular2-templateconsole.log

Exploring TypeORM: Leveraging the In() function within @ManyToMany relationships

There are two main characters in my story: Hero and Villain (their profiles are provided below). How can I utilize the Encounter() method to identify all instances where the Hero interacts with the Villain based on an array of Villain IDs? I am seeking a ...

javascriptnode.jstypescripttypeorm

Can you explain the significance of the colon in this context?

Upon reviewing some SearchKit code snippets (composed with react/jsx and es2015), I came across the following line in a jsx file: const source:any = _.extend({}, result._source, result.highlight) I am curious about the purpose or significance of the colo ...

javascripttypescriptreactjs

How can I individually bind each element in a ngFor loop?

Currently, I am in the process of creating a dashboard using Angular 4. Within this dashboard, I have utilized *ngFor to loop through a JSON object received from a service and display multiple reports within cards. Each card contains various icons in the h ...

angularngforangular-ng-if

What steps should I take to ensure the successful function of the App Routing system in this scenario?

After creating an Angular App, I encountered a challenge in one of my services. When I call the http.post method and subscribe to it, I aim to redirect to the previous page with a parameter (e.g., "http://localhost:3000/profile/aRandomName"). Unfortunately ...

angulartypescript

Troubleshooting TypeScript compatibility with SystemJS when encountering problems with the .js extension

Initializing my TypeScript file with the import statement below. It's important to note that the lack of a .ts extension indicates that I am importing a TypeScript module: import githubService from './github.service'; Through transpilation ...

typescriptsystemjstypescript1.7

A guide on specifying the data type for functions that receive input from React Child components in TypeScript

Currently, I am faced with the task of determining the appropriate type for a function that I have created in a Parent Component to retrieve data from my Child Component. Initially, I resorted to using type: any as a solution, although it was not the corr ...

reactjstypescripttypes

Jest's --findRelatedTests fails to identify associated test cases

Whenever I execute the command jest --bail --findRelatedTests src/components/BannerSet/BannerSet.tsx , an unexpected message is displayed: I couldn't locate any tests and hence exiting with code 1 If you want to exit with code 0 even when there are n ...

reactjstypescriptjestjs

Assigning union values to an object array: a guide for Typescript

When working with union typed values in an object array, how should the setState() function be implemented? enum SomeStateEnum { IsRunning, Name, } type PersonState = { [SomeStateEnum.IsRunning]: boolean; [SomeStateEnum.Name]: string; }; const st ...

typescript

Specialized type for extra restriction on enum matching

In my current project, I am dealing with two enums named SourceEnum and TargetEnum. Each enum has a corresponding function that is called with specific parameters based on the enum value. The expected parameter types are defined by the type mappings Source ...

typescripttypestypescript-types

Regular Expressions: Strategies for ensuring a secure password that meets specific criteria

Struggling to craft a regex for Angular Validators pattern on a password field with specific criteria: Minimum of 2 uppercase letters Minimum of 2 digits At least 1 special character. Currently able to validate each requirement individually (1 uppercase ...

regexangulartypescriptvalidation

Struggling with transitioning from TypeScript to React when implementing react-data-grid 7.0.0

I'm trying to add drag and drop functionality to my React project using react-data-grid, but I keep encountering a "TypeError: Object(...) is not a function" error. I have a TypeScript version of the file in the sandbox as a reference, but when I try ...

javascriptreactjstypescriptreact-dndreact-data-grid

Using Multiple Router Outlets in Angular 4

<div *ngIf="!loggedIn" class="login"> <router-outlet></router-outlet> </div> <div *ngIf="loggedIn" class="main"> <router-outlet></router-outlet> </div> Containing within this code snippet are a login co ...

angularrouterrouter-outlet

The distinctUntilChanged function encounters an issue when no comparison function is given

considering the following code: /** * Generating a stream of car objects from an array. */ from([ { name: 'Porsche', model: '911' }, { name: 'Porsche', model: '911' }, { name: 'Ferrari', model: &apo ...

angularrxjs

Winston logs are unable to function within the Docker Container

I'm currently working on developing a nodejs/express app with typescript and have recently installed the winston package using npm install winston. I came across this helpful article that I've been following closely. Now, my goal is to dockerize ...

node.jstypescriptdockerexpresswinston