Skip to content
  • Home
  • Server-Side
    • php
    • Node.js
    • ASP.NET
    • Magento
    • Codeigniter
    • Laravel
    • Yii
    • CRUD
      • CRUD Database Application
      • CRUD operation in Client side
      • CRUD operation with server side
  • JavaScript
    • AngularJS
    • Ajax
    • VueJs
    • jQuery
    • ReactJS
    • JavaScript
    • SEO
  • Programming
    • Android
    • C programming
    • CSS
    • Mysql
    • Mysqli
  • Technology
    • Software
      • webinar software
      • webinar conferencing software
      • soundproof
    • Adsense
      • Google
      • Earn Money
      • Google Adsense
        • Adsense fraud
        • Adsense Secrets
        • Adsense software
        • Adwords advice
        • Adwords strategy
        • Google adwords help
        • How to get google ads
    • Tips and Tricks
    • Interview
    • Insurance
    • Religious
    • Entertainment
      • Bollywood
      • tamilrockers
      • Hollywood
  • Health Care
    • LifeStyle
    • Women
    • Fashion
    • Top10
    • Jobs
  • Tools
    • Screen Resolution
    • WORD COUNTER
    • Online Text Case Converter
    • what is my screen resolution?
  • Guest Post
    • 4cgandhi
    • IFSC Code

Angular 6 – User Registration and Login Example & Tutorial

August 18, 2019July 22, 2019 by Pakainfo

Angular 6 – User Registration and Login Example & Tutorial

Today, We want to share with you Angular 6 – User Registration and Login Example & Tutorial
.
In this post we will show you angular 6 User Registration & Login Example Tutorial,
, hear for Complete user registration system using angular 6 we will give you demo and example for implement.
In this post, we will learn about Simple User Registration & Login Script in angular 6 with an example.

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client

AngularJS 6 Login and Registration Script – Part 1

Angular 6 Authentication Tutorial [Login, Logout, Register, Forgot Password & Remember Me Functionality] – Part – 1

Angular 6 Login And Registration Module

There are the available for AngularJS 6.0 Part1, Part2 and Part3 Step By step Example and source code available.

  • Angular 6.0 – Part :1
  • Angular 6.0 – Part :2
  • Angular 6.0 – Part :3

Angular 6 Tutorial Project Structure

It is available full angular 6 project or web Application structure available Angular 6 Tutorial Project Structure

Angular 6 Alert Component Template

files & folders Path: /src/spp/_directives/alert.component.html

<div>{{alert-msg.text}}</div>

Angular 6 Alert Component

files & folders Path: /src/spp/_directives/alert.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
 
import { AlertService } from '../_services';
 
@Component({
    selector: 'alert',
    templateUrl: 'alert.component.html'
})
 
export class AlertComponent implements OnInit, OnDestroy {
    private subscription: Subscription;
    alert-msg: any;
 
    constructor(private alertService: AlertService) { }
 
    ngOnInit() {
        this.subscription = this.alertService.getMessage().subscribe(alert-msg => { 
            this.alert-msg = alert-msg; 
        });
    }
 
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

Angular 6 Auth Guard

files & folders Path: /src/spp/_guards/auth.guard.ts

Read Also:  Simple Angular Hello World Example

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
@Injectable()
export class AuthGuard implements CanActivate {
 
    constructor(private router: Router) { }
 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('activeStudent')) {
          
            return true;
        }
 
        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { callbackUri: state.url }});
        return false;
    }
}

Angular 6 Fake Backend Provider

files & folders Path: /src/spp/_helpers/fake-backend.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
 
@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor {
 
    constructor() { }
 
    intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
        // array in local storage for registered students
        let students: any[] = JSON.parse(localStorage.getItem('students')) || [];
 
        // wrap in delayed observable to simulate server api call
        return of(null).pipe(mergeMap(() => {
 
            // authenticate
            if (request.url.endsWith('/api/authenticate') && request.method === 'POST') {
                // find if any student matches login credentials
                let filteredStudents = students.filter(student => {
                    return student.studentname === request.body.studentname && student.password === request.body.password;
                });
 
                if (filteredStudents.length) {
                    // if login details are valid return 200 OK with student details and fake jwt token
                    let student = filteredStudents[0];
                    let body = {
                        id: student.id,
                        studentname: student.studentname,
                        studFname: student.studFname,
                        studLname: student.studLname,
                        token: 'fake-jwt-token'
                    };
 
                    return of(new HttpResponse({ status: 200, body: body }));
                } else {
                    // else return 400 bad request
                    return throwError('Studentname or password is incorrect');
                }
            }
 
            // get students
            if (request.url.endsWith('/api/students') && request.method === 'GET') {
                // check for fake auth token in header and return students if valid, this security is implemented server side in a real application
                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                    return of(new HttpResponse({ status: 200, body: students }));
                } else {
                    // return 401 not authorised if token is null or invalid
                    return throwError('Unauthorised');
                }
            }
 
            // get student by id
            if (request.url.match(/\/api\/students\/\d+$/) && request.method === 'GET') {
                // check for fake auth token in header and return student if valid, this security is implemented server side in a real application
                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                    // find student by id in students array
                    let urlParts = request.url.split('/');
                    let id = parseInt(urlParts[urlParts.length - 1]);
                    let matchedStudents = students.filter(student => { return student.id === id; });
                    let student = matchedStudents.length ? matchedStudents[0] : null;
 
                    return of(new HttpResponse({ status: 200, body: student }));
                } else {
                    // return 401 not authorised if token is null or invalid
                    return throwError('Unauthorised');
                }
            }
 
            // create student
            if (request.url.endsWith('/api/students') && request.method === 'POST') {
                // get new student object from post body
                let newStudent = request.body;
 
                // validation
                let duplicateStudent = students.filter(student => { return student.studentname === newStudent.studentname; }).length;
                if (duplicateStudent) {
                    return throwError('Studentname "' + newStudent.studentname + '" is already taken');
                }
 
                // save new student
                newStudent.id = students.length + 1;
                students.push(newStudent);
                localStorage.setItem('students', JSON.stringify(students));
 
                // respond 200 OK
                return of(new HttpResponse({ status: 200 }));
            }
 
            // delete student
            if (request.url.match(/\/api\/students\/\d+$/) && request.method === 'DELETE') {
              
                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                    // find student by id in students array
                    let urlParts = request.url.split('/');
                    let id = parseInt(urlParts[urlParts.length - 1]);
                    for (let i = 0; i < students.length; i++) {
                        let student = students[i];
                        if (student.id === id) {
                            // delete student
                            students.splice(i, 1);
                            localStorage.setItem('students', JSON.stringify(students));
                            break;
                        }
                    }
 
                    // respond 200 OK
                    return of(new HttpResponse({ status: 200 }));
                } else {
               
                    return throwError('Unauthorised');
                }
            }
 
            return next.handle(request);
             
        }))
 
        .pipe(materialize())
        .pipe(delay(500))
        .pipe(dematerialize());
    }
}
 
export let fakeBackendProvider = {
    provide: HTTP_INTERCEPTORS,
    useClass: FakeBackendInterceptor,
    multi: true
};

Angular 6 JWT Interceptor

files & folders Path: /src/spp/_helpers/jwt.interceptor.ts

Read Also:  Angular 6 Dependency Injection Example

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
 
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
        let activeStudent = JSON.parse(localStorage.getItem('activeStudent'));
        if (activeStudent && activeStudent.token) {
            request = request.clone({
                setHeaders: { 
                    Authorization: `Bearer ${activeStudent.token}`
                }
            });
        }
 
        return next.handle(request);
    }
}

Angular 6 Student Model

files & folders Path: /src/spp/_models/student.ts

export class Student {
    id: number;
    studentname: string;
    password: string;
    studFname: string;
    studLname: string;
}

Angular 6 Alert Service

files & folders Path: /src/spp/_services/alert.service.ts

import { Injectable } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Observable, Subject } from 'rxjs';
 
@Injectable()
export class AlertService {
    private subject = new Subject();
    private keepAfterNavigationChange = false;
 
    constructor(private router: Router) {
        // clear alert alert-msg on route change
        router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                if (this.keepAfterNavigationChange) {
                    // only keep for a single location change
                    this.keepAfterNavigationChange = false;
                } else {
                    // clear alert
                    this.subject.next();
                }
            }
        });
    }
 
    success(alert-msg: string, keepAfterNavigationChange = false) {
        this.keepAfterNavigationChange = keepAfterNavigationChange;
        this.subject.next({ type: 'success', text: alert-msg });
    }
 
    error(alert-msg: string, keepAfterNavigationChange = false) {
        this.keepAfterNavigationChange = keepAfterNavigationChange;
        this.subject.next({ type: 'error', text: alert-msg });
    }
 
    getMessage(): Observable {
        return this.subject.asObservable();
    }
}

More Details of the Angular 6 Angular 6 Introduction Tutorial features of angular 6.0

Read Also:  Angular 6 Form Validation Example Tutorial

Angular 6 Examples

There are the Angular 6 Step By Step Example and Learning AngularJS

  • Angular 6 CRUD Tutorial Example From Scratch
  • Angular 6 and ASP.NET Core 2.0 Web API Example
  • Angularjs 6 User Registration and Login Authentication
  • Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations
Angular 6 Login And Registration Module

There are the available for AngularJS 6.0 Part1, Part2 and Part3 Step By step Example and source code available.

  • Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations
  • Angular 6 CRUD
  • Angular 6 and ASP.NET Core 2.0 Web API
  • Angular 6 features
  • Angular 6 Form Validation
  • Angular 6 – User Registration and Login
  • Angularjs 6 User Registration and Login Authentication
  • Angular 6 CLI Installation Tutorial With Example
  • Angular 6 Toast Message Notifications From Scratch

We hope you get an idea about angular 6 User Registration & Login Example Tutorial
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Angular 6 Http Request Methods Tutorial with Example
  2. Read Also:  vue.js check uncheck all checkboxes Example
  3. Read Also:  Angular 6 Class Binding Tutorial with Examples
  4. Read Also:  Angular 6 Folder Project Structure
  5. Read Also:  AngularJS Simple Login Form
  6. Read Also:  Elementor cpt select Integration
  7. Read Also:  Angularjs 6 User Registration and Login Authentication
  8. Read Also:  How to add WhatsApp share button to your website?
  9. Read Also:  Angular 6 and ASP.NET Core 2.0 Web API Example
  10. Read Also:  Angular 6 CRUD Tutorial Example From Scratch
Categories AngularJS, Programming, Technology Tags angular 6, angular 6 release date, angular 6 simple login example, angular 6 tutorial, angular 6 User Registration & Login Example Tutorial, Angular 6 User Registration and Login Example & Tutorial, angular 6.0 Login Application, angular 6.0 login demo, angular 6.0 user registration form example, angularjs login demo, Complete user registration system using angular 6, Simple User Registration & Login Script in angular 6, User Registration and Login Script in angular 6
Post navigation
Laravel Upload Import CSV Data Into MySQL Database
Laravel 5.7 CRUD Tutorial With Example from scratch

Categories

Ajax (419) AngularJS (357) ASP.NET (61) Bollywood (35) Business (16) Codeigniter (142) C programming (13) CSS (62) Earn Money (50) Education (30) Entertainment (41) Events (14) Google Adsense (58) Government (13) Highcharts (77) Hollywood (34) Interview (18) JavaScript (886) Jobs (25) jQuery (962) Laravel (1008) LifeStyle (31) linux (18) Misc (13) Mysql (873) Mysqli (780) Node.js (34) php (1690) Programming (2186) Python (44) ReactJS (33) SEO (22) Software (16) Software (38) tamilrockers (30) Tech (15) Technology (2195) Tips and Tricks (75) Tools (27) Top10 (109) VueJs (249) Web Technology (28) wordpress (135) World (22) Yii (14)
© 2021 Pakainfo • Developed By Pakainfo.com