TypeScript component has a shared button but the event is not accessible to every page in Angular 4

Question

TypeScript component has a shared button but the event is not accessible to every page in Angular 4

Within Angular 5, there is a shared button component that is utilized by two distinct pages - page1 and page2. Strangely enough, the click event associated with this button component only seems to be accessible on page1. I am uncertain as to what may be causing this issue. Here is the comprehensive structure of the component hierarchy:

Index.html
   App.html
      page1.html
            btn.html
      page2.html  
            btn.html

It is worth noting that the btn.html component is shared between page1 and page2. The real problem lies in the fact that when the button is clicked, the associated event in btn.component.ts only triggers for page1.html, leaving page2.html clueless about this particular event.

To illustrate my dilemma, I have provided a Plunker code snippet showcasing the issue.

https://plnkr.co/edit/Ry5Uj2VHzVK0RfaJcXyZ?p=info

I would greatly appreciate any assistance or guidance on how to rectify this predicament. Your support is much appreciated. Thank you.

angular typescript button onclick

Answer 1

Answer №1

It is possible that the click event is only bound to the first instance of the component. You can attempt the following solution:

In the html file for the btn-shared component:

<div>
  <label>This is a test button</label>
  <input type="button" id="Testbtn" value="Click me" (click)="FunctionOnClick()"> 
</div>

In the ts file for the btn-shared component:

import { Component } from '@angular/core';

@Component({
  selector: 'btn-shared',
  templateUrl: 'src/shared/btn.component.html'
})
export class btnComponent {

public FunctionOnClick(){
  alert("Button Clicked");
}

}

Answer 2

It is possible that the click event is only bound to the first instance of the component. You can attempt the following solution:

In the html file for the btn-shared component:

<div>
  <label>This is a test button</label>
  <input type="button" id="Testbtn" value="Click me" (click)="FunctionOnClick()"> 
</div>

In the ts file for the btn-shared component:

import { Component } from '@angular/core';

@Component({
  selector: 'btn-shared',
  templateUrl: 'src/shared/btn.component.html'
})
export class btnComponent {

public FunctionOnClick(){
  alert("Button Clicked");
}

}

TypeScript component has a shared button but the event is not accessible to every page in Angular 4

Answer №1

Similar questions

Navigational menu routing with AngularJS2 using router link paths

The Angular Compiler seems to have a serious issue with the identifier/variable that is being used

The error type currently displayed relates to window['angularComponentReference']

Manipulating URL parameters in Angular 2

Unable to refresh the current active route

What could be causing the Google Sign-In functionality to fail in an Angular web application?

Are items placed into an array passed by reference or by value?

Injecting Parameters into Angular Component Providers

Avoid fetching components from API in Angular if the data is already present

Converting a file buffer to upload to Google Cloud Storage

How to utilize TypeScript fetch in a TypeScript project running on node with Hardhat?

Utilizing Angular 8's Reactive Form to Transform Checkbox Event Output into a String Format

AngularJS 2: Updating variable in parent component using Router

What is the best way to send an email with a time-sensitive code (token) using Firebase?

In Typescript, it is not possible to assign the type 'any' to a string, but I am attempting to assign a value that is

The namespace does not contain any exported member

Creating PDF from HTML in Angular 2: A Step-by-Step Guide

defining data types based on specific conditions within an object {typescript}

Whenever I attempt to run the NPM install command in the Terminal, it seems to generate multiple errors

Tips for preventing repetition in http subscribe blocks across various components