How to use common function in all component.

amit shukla

Hello Friends,

I have created a common component, this component have two variable success and error

These variables are used for display msg and we set the value as false on both variables at the component load. Both variable uses in common.html page.

Error : when we call set function from registration, then value of variables are not reflected in common.html page.

Please see below

This is common component :

import { Component, Input, Injectable } from '@angular/core';

@Component({

selector:"common-app",

templateUrl:`/app/gecl/Common/commonmsg.html`

})

export class CommonComponent{

errorMessage12: string;

success = false;

error = false;

setMSG(result:any)

{

this.success = result === 'Success' ? true : false;

this.error = result === 'Error' ? true : false;

}

// common.html page

Success

error

* I have made a registration component and I have called setmsg function from registration component.

Given below. Highlighted in red color.

import { Component, OnInit, AfterViewInit, Input } from "@angular/core"

import { IAMLTrainingModel, AMLTrainingModel } from '../../../blmodel/models/amltraining.model'

import { AMLTraingService } from '../../../bl/services/amltraining.service'

import { CommonComponent } from '../../common/common.component' // registering commoncomponent

declare var $: any;

@Component({

selector: "AMLTraining-app",

providers: [AMLTraingService],

templateUrl: `/app/gecl/ComplianceSetUP/AMLTraining/AMLTraining.html`

})

export class AMLTrainingComponent implements OnInit {

_comComponent = new CommonComponent(); // creating object of common component

amlTrainingModels: IAMLTrainingModel[];

errorMessage1: String;

amlTrainingModel = new AMLTrainingModel();

$: any;

constructor(private _amlTrainingService: AMLTraingService ) { }

addTopic(): void {

debugger

this._amlTrainingService.addTopic(this.amlTrainingModel).subscribe(result => {

this._comComponent.setMSG(‘Success’) // caling from this

, this.getTopic(), this.TopicReset()

});

}

registration.html

// caling from registration.html because it has success and error display msg.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Pawan Kumar Tiwari8y ago
Accepted answer
if commom function then best ways to write a function in shared service but this ways also achive that

you uploaded code i seen that you create a object as like this
_comComponent = new CommonComponent();
but its better to create in constructor as instance like this
constructor(private _amlTrainingService: AMLTraingService, private _comComponent:CommonComponent) { }
then you can access that method before use first check that you method is public and variable is also public or not if not public then declare public then access like this

_comComponent.setMSG(..)

I have upload one file as service just for your help this service class all method and variable access any component
+1
Pawan Kumar Tiwari8y ago
use ngDoCheck() to reflected that result
0
amit shukla8y ago
Hi Pawan,

Thanks for your reply.

I have already created the object of common component with in the registration contractor.

And take all variables and setmsg function as a public.

But my problem is different.

When call the setMSG function with in the registration component then it is called and value of success and error variables are also reflected in common component.
But it is not reflected in common.html page because I have used common.html page with in the registration page for display msg by the common-app selector.

Then value of variable’s is not reflecting in common.html page.
+1