Hello/good evening people I'm new to typescript and angular 5 and I want to create a service that displays a message for the users after every login. This is what I did:
It's a text area that will submit the text that will be shown in the Home Page after the login action. I mean, the admin will write and submit the message via this form and then it will be displayed for the users.
export class NewsLetterComponent implements OnInit {
@Output() onNewsText = new EventEmitter<string>();
newsText: string;
constructor(private _router: Router) { }
ngOnInit() {
this.newsText = null;
}
onclick(newsText: string) {
this.newsText;
this.onNewsText.emit(newsText);
}
<div class="container-fluid" >
<form>
<div class="form-group">
<textarea #newsText class="form-control" rows="3"></textarea>
</div>
<button type="submit" (click)="onclick(newsText.value)"class="btn btn-primary pull-right">Publish</button>
</form>
</div>
and displaying it in the Home Page:
<header [user]="user" (logout)="logout()"> Loading...</header>
<p-messages #newsletter [(value)]="newsletterText"></p-messages>
<content class="admin-page">
<sidenav></sidenav>
<router-outlet></router-outlet>
<content>
export class AdminPageComponent implements OnInit, OnChanges {
@ViewChild('newsletterComponenet') newsletterComponenet: NewsLetterComponent;
@Input('newsletterText') newsletterText: String;
//the rest of the code *
ngOnChanges() {
if (this.newsletterText && this.newsletterText.length) {
this.msgs.push({ severity: 'info', summary: this.newsletterText });
}
}
This doesn't work for sure, and I don't know if what I am doing is leading to the right way or not. Can someone help me on this?
P.S. I Googled but could not find satisfactory answer anywhere
Follow the streps:
build a service that sends the message to the Server when you click the Submit-button in the NewsLetterComponent.
The Server stores this message.
create another Service for your HomePage that sends, after Login, a request to the Server in order to get the latest messages.
Both services are independent and the EventEmitter()
in your NewsletterComponent
has nothing to do with it at all!