What are the boundaries of a public Angular2+ class property?

When working with an Angular2+ application, consider the scenario where a public property 'foo' is declared in a component:

@Component({
     selector: 'my-component',
     templateUrl: './my-component.component.html'
}) 

export class MyComponent {

     foo: string; 

}

If another component named MyComponent2 also declares a property named 'foo', are these independent properties unique to their respective classes? In other words, does myComponent.foo refer to a different property than myComponent2.foo?

Answer β„–1

Appreciate it!

"Indeed, they are" – Gourishankar

"Absolutely, they will be autonomous. I am not aware of any language where they would be identical. In fact, during the compilation of TS into JS, there is no visibility limitation so all elements are public." – Maximus

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

Retrieving a portion of the response with Angular's HttpRequest

I am facing an issue with a request where I need to upload a file and receive a JSON response. The problem arises when trying to access a specific part of the response, namely body.path. Despite my efforts, I keep encountering an error stating that the pat ...

`"Unable to execute the 'ng build --env=prod' command"`

I have a JavaScript website that I need to rebuild with some changes I made. In order to build the application, I was instructed to run this command from the source files directory: ng build –env=prod However, when I try to do so, I keep encountering t ...

I am facing the dilemma of having an identical button appearing in two separate locations. How can I determine which button has been clicked?

I am currently using ng2-smart-table and have implemented a custom filter with the same button in both filters. However, I am unsure of how to determine which button is being clicked. https://i.stack.imgur.com/b1Uca.png Below is the component code for th ...

Ensure the box remains unchecked if it is not enabled

I have implemented a tree table in my Angular application. Below is the code snippet: <h5>Checkbox Selection</h5> <p-treeTable [value]="files5" [columns]="cols" selectionMode="checkbox" [(selection)]=&qu ...

The element 'md-chips' from Angular2 material is unrecognized

I am currently developing an Angular2 application utilizing @angular/material 2.0.0-beta.2 and I am facing a challenge in implementing Chips, as I keep receiving the error message 'md-chips' is not a known element. Here are the steps I have taken ...

Guide to organizing elements in an array within a separate array

Our array consists of various items: const array = [object1, object2, ...] The structure of each item is defined as follows: type Item = { id: number; title: string contact: { id: number; name: string; }; project: { id: number; n ...

Incapability of Rearranging Rows in a Group using Row Drag feature in ag-Grid for Angular

Having some trouble with ag-Grid in my Angular project. Specifically, I'm having issues reordering rows within a group using the row drag feature. If you want to take a look at the code snippet causing problems, it's available on CodeSandbox. I ...

Enhance Bootstrap dropdown functionality in Angular 8

Currently, my project has numerous Bootstrap dropdowns which rely on jQuery. I am exploring the possibility of removing both jQuery and Bootstrap from my project. Can Angular Material dropdowns serve as a suitable replacement for Bootstrap dropdowns? Alt ...

Angular reduces image width to zero

Looking to include an image in an Angular template, where the width attribute is equal to a variable width that sometimes holds the value null. In cases where width = null, I aim to have width = "" (or no width attribute at all). However, Angular assigns ...

Troubleshooting: Issues when using jQuery metisMenu in conjunction with *ngIf

We are facing an issue while using the metisMenu with Angular2. There is an *ngIf condition on one of the list items, and its visibility changes based on whether a record is selected. When the li item is shown for additional options, it does not work prope ...

Encountering NaN in the DOM while attempting to interpolate values from an array using ngFor

I am working with Angular 2 and TypeScript, but I am encountering NaN in the option tag. In my app.component.ts file: export class AppComponent { rooms = { type: [ 'Study room', 'Hall', 'Sports hall', ...

Every time I hit the refresh button, I receive dual responses

In my angular 6 application, there's a sidebar component sidebar.ts ngOnInit() { if (!Array.isArray(this.menu) || !this.menu.length) { const data = JSON.parse(localStorage.getItem('data')); this.item = data.response; ...

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

I have a ReactNative app and I'm attempting to create a test using Jest. The test requires classes from a native component (react-native-nfc-manager), and one of the needed classes is defined as follows export interface TagEvent { ndefMessage: N ...

Can you tell me the data type of IconButtons in Material UI when using TypeScript?

Currently, I am in the process of creating a sidebar using Material UI in Next JS with typescript. My plan is to create a helper function that will help display items within the sidebar. // LeftSidebar.tsx import {List,ListItem,ListItemButton,ListItemIcon ...

Tips for correctly configuring child routing in Angular

I'm facing an issue with setting up child paths where the navigation path is incorrect Currently, I have a cabinet module with the following routers: const routes: Routes = [ { path: '', component: CabinetComponent, children: ...

Angular2 - Transmitting validation information from parent component to child component input validation

I am currently developing an automatic word correction module using Angular2. Within my child component, I have set up an EventEmitter. import {Component, Input, Output, EventEmitter} from '@angular/core'; ... export class StudyThumbsComponent{ ...

Unable to attach to 'aria-valuenow' as it's not recognized as a property of 'div'

I encountered an issue when attempting to assign an expression to an element. The problem arose with the following code: <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{MY_PREC}}" aria-valuemin="0" aria-value ...

It is not possible to instantiate an object of a class specified by a generic parameter

As a Java developer who is grappling with Typescript, I am faced with a challenge in implementing an abstract class called Shape and two concrete classes (Square and Circle) that inherit from it. My goal is to hide the constructor for these classes and ins ...

Using Typescript to automatically infer strongly-typed recursive index types

Commencing with an Animal interface and a detailed map of animals residing on my farm: export interface Animal { species: string; edible: boolean; } export interface FarmMap{ [key: string]: Animal; } Everything seems to be running smoothly. Here ...

Deleting a page reference from the page history stack in Angular 4

I am working on my angular web application and I am looking for a way to remove a specific page reference from the angular page history stack. For example, if I navigate from the login page to the dashboard page, I want to remove the login page reference f ...