10 TIPs - To Become a Good Developer/Programmer
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
C# Corner Home
Technologies
Monthly Leaders
ASK A QUESTION
Forum guidelines
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.
Reply
Answers (
3
)
error resolved a angular
File upload using Angular JS