Modifying data within a class in Angular 2

Why can't I update the data in the View from a function within a class?

wrap.component.ts

@Component({
    selector: 'wrap',
    templateUrl: './templates/wrap.html'
})

export class WrapComponent {
    public test: string;
    
    constructor () {
        this.test = 'Hello world';
    }

    fun () {
        this.test = 'SPAM';
    }
}

express.component.ts

import {WrapComponent} from './wrap.component';

export class Express {
    constructor () {
        new WrapComponent().fun();
    }
}

wrap.html

<h2>{{test}}</h2>

Why does the test variable in the view still show 'Hello world'?

Answer №1

By initializing the WrapComponent component on your own from the Express class, you are essentially creating new instances instead of sharing the same one managed by Angular2.

To provide more assistance, it would be helpful to understand what entity the Express class represents - whether it's another component, a service, or something else.

If you want to invoke the fun method within the WrapComponent component, you can do so by triggering it with a click event:

<div (click)="fun()">Have fun!</div>

Hopefully this explanation clarifies things for you, Thierry

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

Implement state changes in React without altering the original state object

In my current state, I have: const [manager, setManager] = useState([{ name: undefined, project: [] }]); Now, I am receiving data from an API that looks like this: [{name : 'John doe'} , {'jane' : doe}] I want to update my state so ...

Creating a preview of a document with client-side scripting

I have been developing a feature that requires generating a preview in a popup for various file formats including PDF, Word, and Excel. I was able to achieve this by converting the files using Aspose.Words and Aspose.Cells. Here is the code snippet: publ ...

A simple guide to loading images from a directory and displaying them upon click

I am currently working on a function that includes multiple sub-functions to achieve different tasks. One function is intended to store the files received as input into an array called loadedimages within the parent function. Another function aims to displ ...

React components experiencing conflicts when using shorthand inline styles that overwrite one another

Within my React component, I am receiving a values object with attributes like: {gridColumn: '1 / 3', gridRow: '2 / 5', gridArea: 'header'} I apply these values to the component's style as follows: this.cell.style.setP ...

GraphQL Shield throws an 'Unauthorized' error for a permitted mutation

I've been working on setting up a GraphQL API with apollo-server-express, and I'm trying to handle permissions using graphql-shield middleware. However, I'm running into some issues when it comes to allowing mutations to be executed. My aim ...

"At the beginning of an array in JavaScript, I often encounter the issue of receiving

Here is some code that I created: function get_coordinates(container) { var x; var y; var divs = container.getElementsByTagName('div'); Array.from(divs).forEach(div => { y += div.offsetTop+" "; x += d ...

Is there a way to replicate the data from one canvas onto another canvas using getContext('webgl')?

I am currently working on a project that involves displaying medical images on one canvas and annotating those images by drawing shapes or lines on another canvas. My issue arises when I try to copy the drawn annotations from canvas#2 to canvas#1. Here is ...

What are the steps to create offline documentation for sails.js?

I am looking to integrate offline sails.js documentation into my system. You can find the official documentation for sails.js maintained at this Sails.js Documentation. According to their documentation, they use doc-templater for building the documentati ...

How can I use AJAX to transmit a 2D array to a PHP page and then display each dimension individually?

Recently, I created a webpage with multiple checkboxes. Using jQuery, I am able to fetch data from these checkboxes and store them in a two-dimensional array. Here is an excerpt of my code: HTML snippet: <input type="checkbox" name="checkboxs[]" pric ...

What steps can be taken to stop 'type-hacking'?

Imagine owning a popular social media platform and wanting to integrate an iframe for user signups through third-party sites, similar to Facebook's 'like this' iframes. However, you are concerned about the security risks associated with ifra ...

Failure to deliver Server Side Events (SSE) to the client side

I'm currently utilizing the MEAN stack and facing challenges with receiving events from the server side. Despite using EventSource, I am unable to make it work as intended. Although the connection appears to be open, no messages are being received fr ...

Ways to include a link/href in HTML using a global constants file

I have a constants file with a links node that I need to integrate into my HTML or TypeScript file. Constants File export const GlobalConstants = { links: { classicAO: '../MicroUIs/' } } I created a public method called backToClassicAO ...

Cascading MVC 2 Dropdown menus

I am trying to bind a dropdown based on the change of another dropdown, but I keep getting an "Undefined" error. Here is my code snippet: <select id="BreakOutValue" class="input1_drop" onchange="onChange()" ></select> <%:Html.DropDownList( ...

Continuously improving the form as they evolve

I am interested in creating a form that automatically sends data when users make changes to it. For instance: Imagine a scenario where a moderator is editing an article and changes values in a select field. As soon as the change is made, an ajax request ...

There seems to be an issue with the functionality of the `Nav` component in React-bootstrap when used within a `NavBar` with the

Desiring my NavBar to occupy the entire available width, I included a fill flag within the Nav section of the NavBar component. <Navbar bg="light" expand="lg"> <Navbar.Toggle aria-controls="basic-navbar-nav" /&g ...

What exactly is a more defined type of interface in Typescript?

Dealing with a type in typescript that consists of an object where all properties must be of type number. I am trying to create more concrete interfaces based on this type and pass them as generic parameters to a class that extends my basic type. However, ...

Issue with implementing bootbox and jQuery.validator for AJAX login form collaboration

Here's a fiddle link that showcases the issue I'm facing. The problem arises when I try to Sign In on an empty modal form. The validator should highlight any fields in error and proceed to submit the form once the validation is successful. I&ap ...

What is the best way to send multiple headers using AngularJS resource?

Having trouble sending multiple headers in a single request using angularJS. Here's what I currently have... var auth = $resource("", {}, { GetUserDetails: { url: Config.api.user.details(), method: &a ...

The outsideClick feature in the uib-dropdown is malfunctioning

One issue I'm experiencing is that, when I set auto-close to outsideClick, the dropdown always closes even when I click on an element within it. <div class="v3-multiselect" uib-dropdown ng-cloak auto-close="outsideClick" is-open="isOpen"> < ...

The error "Element type is invalid" is being thrown by the <NavigationBar/> component in the App.js

I'm facing an issue with my NavigationBar in my React website. I've created a NavigationBar.js file and imported it into my App.js, but when I include the > <NavigationBar/> in my App.js, I encounter this error: Error message screensh ...