Refreshing a variable during component initialization

Question

Refreshing a variable during component initialization

In the Event 1 component, there is a variable that holds a string from another variable in the data.service. I want to update the data.service string to 'Event 2' when the Event 2 component loads.

I have attempted to implement the following code without success. I have tried calling it in ngAfterViewInit and from a button as well.

Event 1 Component:

public Title = this.dataservice.Title;

Data.service:

public Title = "Event 1";

Event 2 Component:

changeTitle(){
      this.dataService.Title = 'Event 2';
      console.log("CHANGE TITLE");
    }


    ngAfterViewInit(): void {
       this.changeTitle();
    }

angular typescript

Answer 1

Answer №1

Within the dataService.ts file:

import { EventEmitter } from '@angular/core';
export class DataService {
    updatedTitle = new EventEmitter<string>();
    onUpdateTitle(title) { // Invoke this method on button click
       // Can be saved in a variable
       this.updatedTitle.emit(title);
    }
}

In the component.ts file:

export class Component implements OnInit {
    title: string;
    ngOnInit() {
        this.dataService.updatedTitle.subscribe((res) => { 
            this.title = res;
        });
    }
}

Answer 2

Within the dataService.ts file:

import { EventEmitter } from '@angular/core';
export class DataService {
    updatedTitle = new EventEmitter<string>();
    onUpdateTitle(title) { // Invoke this method on button click
       // Can be saved in a variable
       this.updatedTitle.emit(title);
    }
}

In the component.ts file:

export class Component implements OnInit {
    title: string;
    ngOnInit() {
        this.dataService.updatedTitle.subscribe((res) => { 
            this.title = res;
        });
    }
}

Refreshing a variable during component initialization

Answer №1

Similar questions

Issue R10 (Start-up delay) -> Failure of web application to connect to $PORT in the given 60 seconds after being launched (Angular)

Improving mat-expansion-panel ngFor in AngularEnhancing the performance of mat-exp

What is the process for setting up SSL for Angular e2e testing?

Having trouble correctly initializing RequestOptionsArgs for a POST request in the service function

Issues with Angular 2 loading properly on Internet Explorer 11

angular 7 - Issue with displaying toastr messages using ngx-toastr

Angular application making a POST request to a Spring REST API

Tips for utilizing ng class within a loop

Creating JPEG images with specified dimensions. How can you add W x H sizing to an image?

Typedoc: only export contents from a particular file are documented

Step-by-step guide on installing both Angular and Nodejs within a single folder

I am having trouble figuring out the issue with the state and how to properly implement it in Typescript

Retrieving raw HTML content using Angular's http.get() method

The type 'Observable<HttpEvent<DeviceList>>' cannot be assigned to the type 'Observable<DeviceList>'

Trouble encountered while attempting to install ng2-bootstrap within my Angular 2 project

This marks my initial attempt at developing an Angular project using Git Bash, and the outcome is quite remarkable

The functionality of an Angular application may be compromised if the necessary modules are not properly imported into

Utilizing separately generated elements from ngFor

What is the reason behind NumberFormat only recognizing four numbers?

Encountering errors after updating to Angular Material version 6.4.7