app.component.ts
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'aditya';
constructor(private service : HeroService)
{}
sender()
{
this.service.addchanges("ab");
this.service.addchanges("cd");
this.service.addchanges("ef");
}
}
app.component.html
<h3 (click)="sender()">Click me to send the value</h3>
<app-detail></app-detail>
hero.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class HeroService {
constructor() { }
area = new Subject();
changeemitted = this.area.asObservable();
addchanges(change)
{
console.log("entered at service");
console.log("chnage getted",change);
this.area.next(change);
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
import { HeroService } from './hero.service';
@NgModule({
declarations: [
AppComponent,
DetailComponent
],
imports: [
BrowserModule
],
providers: [HeroService],
bootstrap: [AppComponent]
})
export class AppModule { }
detail.component.ts
import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
constructor(private serviceFetcher:HeroService) {
}
ngOnInit() {
}
caller(){
console.log("caller entered");
this.serviceFetcher.area.subscribe(text => console.log("text detail",text));
}
}
detail.component.html
<p (click)="caller()">
detail works!
</p>
After successfully sending values through sender(), the subscribe method in caller() is not getting called as expected, only "caller entered" is displayed in the console. detail.component.ts:22 caller entered detail.component.ts:29 ___________________________ However, upon sending values through sender() again without refreshing, the subscribe method is triggered as expected.
hero.service.ts:19 entered at service
hero.service.ts:22 chnage getted ab
detail.component.ts:23 text detail ab
hero.service.ts:18 ___________________________
hero.service.ts:19 entered at service
hero.service.ts:22 chnage getted cd
detail.component.ts:23 text detail cd
hero.service.ts:18 ___________________________
hero.service.ts:19 entered at service
hero.service.ts:22 chnage getted ef
detail.component.ts:23 text detail ef
I have tried debugging but it seems the "text detail" is not visible. Is this a specific behavior of Subject in Angular? Appreciate any guidance on the issue as I am new to Angular and eager to learn more. Please let me know if there is an error in my approach instead of dismissing it outright. I aim to retrieve data when calling the caller() method.