amit shukla

amit shukla

  • 2k
  • 78
  • 58.6k

How to use common function in all component.

Mar 26 2018 3:41 AM
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.

Answers (3)