Home Data sharing between component with data servive not working in angular 5
Reply: 0

Data sharing between component with data servive not working in angular 5

user2625
1#
user2625 Published in July 23, 2018, 9:58 am

I, am using data service to share the data between the component. However, this seems not working for me.

Got the reference from here

Angular to update UI from the child component reflect the value to the parent component https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

I tried the same logic as above but seems to not work for me.

Here is the html binding for the angular material

<mat-progress-bar mode="indeterminate" *ngIf="commonViewModel.showProgressBar()"></mat-progress-bar>

Parent component

export class AppComponent {
constructor(public commonViewModel: CommonViewModel) {    }
ngOnInit() {
        this.isLoding();
    }
isLoding() {
        console.log("app=" + this.commonViewModel.showProgressBar());
        return this.commonViewModel.showProgressBar();
    }
}

Child Component

export class HomeComponent {
    private GetHomeItemUrl: string = "Home/GetHomeItem";
    private _homeItemService: GenericHttpClientService;
    constructor(public commonViewModel: CommonViewModel) {
        this.getHomeItemHttpCall();
    }

    private getHomeItemHttpCall(): void {

        this.commonViewModel.setProgressBarShow = true;
        this._homeItemService.GenericHttpGet<GenericResponseObject<HomeViewModel>>(this.GetHomeItemUrl).subscribe(data => {
            if (data.isSuccess) {
                this.commonViewModel.setProgressBarShow = false;
                console.log("home=" +this.commonViewModel.showProgressBar());
            }

        }, error => {
            console.log(error);
        });
    }
}

This is my service class which hold the value as true and false

@Injectable()
export class CommonViewModel {
    progressBarShow: boolean = true;

    public showProgressBar(): boolean {
        return this.getProgressBarShow;
    }

    set setProgressBarShow(flag: boolean) {
        this.progressBarShow = flag;
    }
    get getProgressBarShow(): boolean {
        return this.progressBarShow;
    }
}

The console output

In the console I,can see the output as True and False. But the app never hides as I can see the app component value is always true

Where I, am doing mistake. Can please someone let me know. I, dont want to use Input and Output to share the data.

Please let me know how can I resolve this issue.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.341488 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO