How to do it...

Let's perform the following steps to create a new current user service:

  1. First, we'll set up our /src/app/users.ts model as a very simple model, with an extra method that will construct a full name for us from the first and last name properties:
export class User {
constructor(
public firstName: string = "",
public lastName: string = "",
public email: string = ""
) {}

getName() {
return this.firstName + ' ' + this.lastName;
}
}
  1. Next, we will set up our current user service at /src/app/current-user.service.ts. It is a very simple service that simply reads and returns our user model:
import { Injectable } from '@angular/core';
import {User} from "./user";

@Injectable()
export class CurrentUserService {
user: User;

getUser() {
return this.user;
}

setUser(newUser:User) {
return this.user = newUser;
}
}
  1. Angular-CLI doesn't automatically provide us with new services we generate, so we will need to manually add our new service to the provider list in /src/app/app.module.ts, as follows:
...
import { CurrentUserService } from "./current-user.service";
...

@NgModule({
...
providers: [
{ provide: LOCALE_ID, useFactory: getLocaleProvider },
CurrentUserService
],
...
})
export class AppModule {
constructor(private currentUserService: CurrentUserService) { }
}
  1. Since our current user service doesn't self-initialize itself with a user, we will need to create one in our AppModule constructor:
...
import { CurrentUserService } from "./current-user.service";
import { User } from "./user";
...
export class AppModule {
constructor(private currentUserService: CurrentUserService) {
let user = new User('George','Washington','[email protected]');
currentUserService.setUser(user);

}
}
  1. To check whether our current user service is indeed available in the rest of our application, let's add our current user's name to our /src/app/posts/create-post-form/create-post-form.component.ts modal:
import {Component, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {BlogPost} from "../blog-post";
import {CurrentUserService} from "../../current-user.service";
import {User} from "../../user";
...
export class CreatePostFormComponent implements OnInit {
model: BlogPost;
user: User;
constructor(private modalService: NgbModal, private currentUserService:
CurrentUserService) {}
...
ngOnInit() {
this.user = this.currentUserService.getUser();
}
}
  1. Finally, we'll add the current user's full name to our modal's title header. So, now when we launch our modal, we will see New Post - by George Washington:
<ng-template #modal let-c="close">
<div class="modal-header">
<h4 class="modal-title">
New Post
<small>- by {{user.getName()}}</small>
</h4>
<button type="button" class="close" aria-label="Close" (click)="c()">
<fa [name]="'close'"></fa>
</button>
</div>
...
</ng-template>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.67.13