Could you provide guidance on how to toggle the visibility of a div using the click event of a button or link located on a different HTML page in Angular?

Question

Could you provide guidance on how to toggle the visibility of a div using the click event of a button or link located on a different HTML page in Angular?

Is there a way to change the visibility of a div on a different page when a button or link is clicked? For example, I have a button on the "main.html" page that, when clicked, should display a hidden div on the "header.html" page. How can I achieve this?

In index.html, I have the following button code:

<button type="button" class="btn btn-default px-4" [routerLink]="['../home']" (click)="">Entrar</button>

In header.html, the code is:

            `<div class="page">
              Hello {{'user'}}, welcome! Today is {{today | date:'dd/MM/yyyy'}}
            </div>`

The div in header.html should initially be hidden, and when the button in index.html is clicked, it should become visible.

html css angular web

Answer 1

Answer №1

If you're looking for a way to achieve this, one approach is to trigger an event wherever the button is located:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'btn-component',
    template: `<button type="button" class="btn btn-default px-4" [routerLink]="['../home']" (click)="buttonClicked()"> Entrar </button> `
})
export class ButtonComponent {
    @Output() buttonClickedEvent = new EventEmitter();
    public buttonClicked() { // You can give any function name
        this.buttonClickedEvent.emit("click!");
    }
}

Then, you can listen for the event at the 'div' level:

`<div class="page" [hidden]="!showDiv" (buttonClickedEvent)='showDiv = !showDiv'>
      Olá {{'usuario'}}, seja bem vindo! Hoje é dia {{today | date:'dd/MM/yyyy'}}
</div>`

To learn more about event emitters, you can check out this resource.

Answer 2

If you're looking for a way to achieve this, one approach is to trigger an event wherever the button is located:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'btn-component',
    template: `<button type="button" class="btn btn-default px-4" [routerLink]="['../home']" (click)="buttonClicked()"> Entrar </button> `
})
export class ButtonComponent {
    @Output() buttonClickedEvent = new EventEmitter();
    public buttonClicked() { // You can give any function name
        this.buttonClickedEvent.emit("click!");
    }
}

Then, you can listen for the event at the 'div' level:

`<div class="page" [hidden]="!showDiv" (buttonClickedEvent)='showDiv = !showDiv'>
      Olá {{'usuario'}}, seja bem vindo! Hoje é dia {{today | date:'dd/MM/yyyy'}}
</div>`

To learn more about event emitters, you can check out this resource.

Could you provide guidance on how to toggle the visibility of a div using the click event of a button or link located on a different HTML page in Angular?

Answer №1

Similar questions

Menu manipulation: Shifting menus left and right with a click

Determine the aspect ratio with a constant adjustment using CSS/SCSS

TS2307 error encountered in Angular 2 TypeScript due to the inability to locate a module for a private npm

Creating a button that adjusts its size proportionally to the page and surrounding elements, all without relying on positioning

What is the process for embedding images in Angular that are stored in a directory other than assets?

Encountering issues with Angular component test cases: receiving a Type Error stating it cannot read the property "contractno" as it is undefined

Refreshing a component in Angular 2 upon change event

Box2dweb: Interaction Point of Collision

Is there a way to achieve element scrolling similar to scrollLeft within a scrollable container without using JavaScript

Using display:inline-block will increase the vertical spacing

What is the best way to ensure that GCM push notifications are still received even when the app is closed or the

Retrieve the value of an AngularJS expression and display it in a window alert using AngularJS

IntelliJ automation in Java does not allow clicking the button

Executing Angular within a docker container

Changing position of element upon appearance of span in React

"Searching for the index of a clicked element? Here's how to do

What could be causing the issue with my filter page not being able to retrieve any results from the

React js web application facing excessive content problem

Do not display large numbers within an HTML card

What purpose does @ViewChild serve if we are unable to modify or interact with its properties from the Parent Component?