How to use common function in all component.

Question

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

<div *ngIf="success" class="alert alert-box alert-dismissible alert-success-color animated " role="alert">

Success

</div>

<div *ngIf="error" class="alert alert-box alert-dismissible alert-danger-color animated " role="alert">

error

</div>

 

* 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

<common-app ></common-app>

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