Search code examples
typescriptangular5message

Display a message after login - Angular 5


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


Solution

  • Follow the streps:

    1. build a service that sends the message to the Server when you click the Submit-button in the NewsLetterComponent.

    2. The Server stores this message.

    3. 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!