I am completely new to Angular 6 and I'm working with two components: header and dashboard.
Within my header component, I have a notification popup that displays notifications with options to accept or delete them.
On the other hand, in my dashboard component, I show a list of accepted notifications.
My goal is to update the dashboard list whenever a new notification is accepted from the header.
In the header component, here's what I've included:
import { DashboardComponent } from '../../pages/dashboard/dashboard.component';
// Provided the dashboard component
@Component({
selector: 'app-siteheader',
providers:[DashboardComponent ],
templateUrl: './siteheader.component.html',
styleUrls: ['./siteheader.component.css']
})
// Called the dashcomp in the constructor
constructor( private dashcomp: DashboardComponent, private dashboardservice: DashboardService, private authenticationService: AuthenticationService) { }
// Notification accept action
actionaccept(id){
this.authenticationService.acceptaction(id)
.subscribe(
data => {
// Called the dashboard function
this.loaddashboard();
}
);
}
// This function triggers the dashboard component's function
public loaddashboard() {
console.log('called');
this.dashcomp.dolist('future');
}
Inside the Dashboard component:
dolist(type) {
console.log('dasss');
this.dashservice.listengagement(type,this.page,this.limit)
.subscribe(
data => {
console.log(data);
this.futureloader = false;
this.futurelist = data['result'];
this.futuretotal = data['count'];
}
);
}
The results are displayed in the dashboard HTML using ngfor
However, I'm encountering an issue where triggering the dashboard function from the header shows the console log but doesn't change the output in the dashboard. Am I overlooking something important?