Forward Everyday

Authentication We follow the steps in Angular 1.x sample . I will create some facilities. A Signin and Signup components. A AuthService to wrap HTTP authentiction service. A AppShowAuthed directive to show or hide UI element against the authentiction status. Lets start with creating AuthService . AuthService In order to handle signin and signup request, create a service named AuthService in src/app/core folder to process it. @ Injectable () export class AuthService { private currentUser$ : BehaviorSubject < User > = new BehaviorSubject < User >( null ); private authenticated$ : ReplaySubject < boolean > = new ReplaySubject < boolean >( 1 ); private desiredUrl : string = null ; constructor ( private api : ApiService , private jwt : JWT , private router : Router ) { } attempAuth( type : string , credentials : any ) { const path = ( type === ' signin ' ) ? ' /login ' ...

Create a new post Since Angular2 RC2 introduced a complete new form modules(search @angular/forms in https://npmjs.com ), it allow you use template driven form like Angular 1.x, it also support the programatic approach. In the previous posts, we have create some components, and use HTTP client to fetch data from backend APIs. In this post, we will focus on form submission. Add Post new-post.component.ts : import { Component , OnInit , OnDestroy } from ' @angular/core ' ; import { Router } from ' @angular/router ' ; import { Subscription } from ' rxjs/Subscription ' ; import { Post } from ' ../core/post.model ' ; import { PostService } from ' ../core/post.service ' ; @ Component ({ selector: ' app-new-post ' , templateUrl: ' ./new-post.component.html ' , styleUrls: [ ' ./new-post.component.css ' ] }) export class NewPostComponent implements OnInit , OnDestroy { data = { title: ...