├── src
    ├── assets
    │   ├── .gitkeep
    │   └── devglan.png
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── user
    │   │   ├── user.model.ts
    │   │   ├── user.component.css
    │   │   ├── user.component.spec.ts
    │   │   ├── user.component.ts
    │   │   └── user.component.html
    │   ├── core
    │   │   ├── error-dialog.component.html
    │   │   ├── error-dialog.component.ts
    │   │   ├── token.storage.ts
    │   │   ├── material.module.ts
    │   │   ├── app.routing.module.ts
    │   │   ├── auth.service.ts
    │   │   └── inteceptor.ts
    │   ├── login
    │   │   ├── login.component.css
    │   │   ├── login.component.spec.ts
    │   │   ├── login.component.ts
    │   │   └── login.component.html
    │   ├── app.component.ts
    │   ├── app.service.ts
    │   ├── app.component.spec.ts
    │   └── app.module.ts
    ├── styles.css
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── typings.d.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── main.ts
    ├── index.html
    ├── test.ts
    └── polyfills.ts
├── e2e
    ├── app.po.ts
    ├── tsconfig.e2e.json
    └── app.e2e-spec.ts
├── .editorconfig
├── tsconfig.json
├── client.iml
├── .gitignore
├── protractor.conf.js
├── karma.conf.js
├── README.md
├── .angular-cli.json
├── package.json
├── tslint.json
└── material.txt


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>
2 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @import '~@angular/material/prebuilt-themes/indigo-pink.css';
2 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/only2dhir/angular-5-material-design/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/assets/devglan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/only2dhir/angular-5-material-design/HEAD/src/assets/devglan.png


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/app/user/user.model.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | 
3 |   id: number;
4 |   username: string;
5 |   salary: number;
6 |   age: number;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/core/error-dialog.component.html:
--------------------------------------------------------------------------------
1 | <h2 mat-dialog-title>Error</h2>
2 | <mat-dialog-content class="error">{{data.errorMsg}}</mat-dialog-content>
3 | <mat-dialog-actions>
4 |   <button mat-raised-button (click)="closeDialog()">Ok</button>
5 | </mat-dialog-actions>
6 | 


--------------------------------------------------------------------------------
/src/app/login/login.component.css:
--------------------------------------------------------------------------------
 1 | .example-icon {
 2 |   padding: 0 14px;
 3 | }
 4 | 
 5 | .example-spacer {
 6 |   flex: 1 1 auto;
 7 | }
 8 | .example-card {
 9 |   width: 400px;
10 |   margin: 10% auto;
11 | }
12 | .mat-card-title{
13 |   font-size: 16px;
14 | }
15 | 


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import {Router} from '@angular/router';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: './app.component.html',
 7 |   styleUrls: ['./app.component.css']
 8 | })
 9 | export class AppComponent {
10 | 
11 |   constructor() {
12 |   }
13 | 
14 | }
15 | 


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('client App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/app/user/user.component.css:
--------------------------------------------------------------------------------
 1 | .example-icon {
 2 |   padding: 0 14px;
 3 | }
 4 | 
 5 | .example-spacer {
 6 |   flex: 1 1 auto;
 7 | }
 8 | .example-card {
 9 |   width: 400px;
10 |   margin: 10% auto;
11 | }
12 | .mat-card-title{
13 |   font-size: 16px;
14 | }
15 | .example-container {
16 |   display: flex;
17 |   flex-direction: column;
18 |   max-width: 500px;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "node"
10 |     ]
11 |   },
12 |   "files": [
13 |     "test.ts"
14 |   ],
15 |   "include": [
16 |     "**/*.spec.ts",
17 |     "**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Client</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 |   <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11 | </head>
12 | <body>
13 |   <app-root></app-root>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/client.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
 4 |     <exclude-output />
 5 |     <content url="file://$MODULE_DIR$">
 6 |       <excludeFolder url="file://$MODULE_DIR$/dist" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/src/app/core/error-dialog.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Inject, Injectable} from '@angular/core';
 2 | import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material';
 3 | 
 4 | @Component({
 5 |   templateUrl: 'error-dialog.component.html'
 6 | })
 7 | 
 8 | export class ErrorDialogComponent {
 9 | 
10 |   constructor(private dialogRef: MatDialogRef<ErrorDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
11 | 
12 |   }
13 | 
14 |   public closeDialog() {
15 |     this.dialogRef.close();
16 |   }
17 | 
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/core/token.storage.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | 
 4 | const TOKEN_KEY = 'AuthToken';
 5 | 
 6 | @Injectable()
 7 | export class TokenStorage {
 8 | 
 9 |   constructor() { }
10 | 
11 |   signOut() {
12 |     window.sessionStorage.removeItem(TOKEN_KEY);
13 |     window.sessionStorage.clear();
14 |   }
15 | 
16 |   public saveToken(token: string) {
17 |     window.sessionStorage.removeItem(TOKEN_KEY);
18 |     window.sessionStorage.setItem(TOKEN_KEY,  token);
19 |   }
20 | 
21 |   public getToken(): string {
22 |     return sessionStorage.getItem(TOKEN_KEY);
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app/core/material.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import {
 4 |   MatButtonModule, MatCardModule, MatDialogModule, MatInputModule, MatTableModule,
 5 |   MatToolbarModule
 6 | } from '@angular/material';
 7 | 
 8 | @NgModule({
 9 |   imports: [CommonModule, MatToolbarModule, MatButtonModule, MatCardModule, MatInputModule, MatDialogModule, MatTableModule],
10 |   exports: [CommonModule, MatToolbarModule, MatButtonModule, MatCardModule, MatInputModule, MatDialogModule, MatTableModule],
11 | })
12 | export class CustomMaterialModule { }
13 | 


--------------------------------------------------------------------------------
/src/app/app.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
 3 | import {Observable} from 'rxjs/Observable';
 4 | import {User} from './user/user.model';
 5 | 
 6 | 
 7 | const httpOptions = {
 8 |   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
 9 | };
10 | 
11 | @Injectable()
12 | export class UserService {
13 | 
14 |   constructor(private http: HttpClient) {}
15 | 
16 |   private userUrl = 'http://localhost:8080/';
17 | 
18 |   public getUsers(): Observable<User[]> {
19 |     return this.http.get<User[]>(this.userUrl + '/users');
20 |   }
21 | 
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/core/app.routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | import {UserComponent} from '../user/user.component';
 4 | import {LoginComponent} from '../login/login.component';
 5 | 
 6 | const routes: Routes = [
 7 |   { path: 'user', component: UserComponent },
 8 |   { path: 'login', component: LoginComponent },
 9 |   {path : '', component : LoginComponent}
10 | ];
11 | 
12 | @NgModule({
13 |   imports: [
14 |     RouterModule.forRoot(routes)
15 |   ],
16 |   exports: [
17 |     RouterModule
18 |   ],
19 |   declarations: []
20 | })
21 | export class AppRoutingModule { }
22 | 


--------------------------------------------------------------------------------
/src/app/core/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {Observable} from 'rxjs/Observable';
 3 | import { HttpClient, HttpHeaders } from '@angular/common/http';
 4 | 
 5 | @Injectable()
 6 | export class AuthService {
 7 | 
 8 |   baseUrl: 'http://localhost:8080/email2sms/';
 9 | 
10 |   constructor(private http: HttpClient) {
11 |   }
12 | 
13 |   attemptAuth(ussername: string, password: string): Observable<any> {
14 |     const credentials = {username: ussername, password: password};
15 |     console.log('attempAuth ::');
16 |     return this.http.post<any>('http://localhost:8080/token/generate-token', credentials);
17 |   }
18 | 
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /dist-server
 6 | /tmp
 7 | /out-tsc
 8 | 
 9 | # dependencies
10 | /node_modules
11 | 
12 | # IDEs and editors
13 | /.idea
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 | *.sublime-workspace
20 | 
21 | # IDE - VSCode
22 | .vscode/*
23 | !.vscode/settings.json
24 | !.vscode/tasks.json
25 | !.vscode/launch.json
26 | !.vscode/extensions.json
27 | 
28 | # misc
29 | /.sass-cache
30 | /connect.lock
31 | /coverage
32 | /libpeerconnection.log
33 | npm-debug.log
34 | testem.log
35 | /typings
36 | 
37 | # e2e
38 | /e2e/*.js
39 | /e2e/*.map
40 | 
41 | # System Files
42 | .DS_Store
43 | Thumbs.db
44 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/app/user/user.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { UserComponent } from './user.component';
 4 | 
 5 | describe('UserComponent', () => {
 6 |   let component: UserComponent;
 7 |   let fixture: ComponentFixture<UserComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ UserComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(UserComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/login/login.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { LoginComponent } from './login.component';
 4 | 
 5 | describe('LoginComponent', () => {
 6 |   let component: LoginComponent;
 7 |   let fixture: ComponentFixture<LoginComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ LoginComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(LoginComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/user/user.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, OnInit} from '@angular/core';
 2 | import {MatTableDataSource} from '@angular/material';
 3 | import {User} from './user.model';
 4 | import {UserService} from '../app.service';
 5 | import {Router} from '@angular/router';
 6 | 
 7 | @Component({
 8 |   selector: 'app-root',
 9 |   templateUrl: './user.component.html',
10 |   styleUrls: ['./user.component.css']
11 | })
12 | export class UserComponent implements OnInit {
13 |   displayedColumns = ['id', 'username', 'salary', 'age'];
14 |   dataSource = new MatTableDataSource<User>();
15 |   constructor(private router: Router, private userService: UserService) {
16 |   }
17 |   ngOnInit(): void {
18 |     this.userService.getUsers().subscribe(
19 |       data => {
20 |         this.dataSource.data = data;
21 |       }
22 |     );
23 |   }
24 | }
25 | 
26 | 


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/src/app/login/login.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import {Router} from '@angular/router';
 3 | import {MatDialog} from '@angular/material';
 4 | import {AuthService} from '../core/auth.service';
 5 | import {TokenStorage} from '../core/token.storage';
 6 | 
 7 | @Component({
 8 |   selector: 'app-login',
 9 |   templateUrl: './login.component.html',
10 |   styleUrls: ['./login.component.css']
11 | })
12 | export class LoginComponent {
13 | 
14 |   constructor(private router: Router, public dialog: MatDialog, private authService: AuthService, private token: TokenStorage) {
15 |   }
16 | 
17 |   username: string;
18 |   password: string;
19 | 
20 |   login(): void {
21 |     this.authService.attemptAuth(this.username, this.password).subscribe(
22 |       data => {
23 |         this.token.saveToken(data.token);
24 |         this.router.navigate(['user']);
25 |       }
26 |     );
27 |   }
28 | 
29 | }
30 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular/cli'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | describe('AppComponent', () => {
 4 |   beforeEach(async(() => {
 5 |     TestBed.configureTestingModule({
 6 |       declarations: [
 7 |         AppComponent
 8 |       ],
 9 |     }).compileComponents();
10 |   }));
11 |   it('should create the app', async(() => {
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.debugElement.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   }));
16 |   it(`should have as title 'app'`, async(() => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app.title).toEqual('app');
20 |   }));
21 |   it('should render title in a h1 tag', async(() => {
22 |     const fixture = TestBed.createComponent(AppComponent);
23 |     fixture.detectChanges();
24 |     const compiled = fixture.debugElement.nativeElement;
25 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
26 |   }));
27 | });
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Client
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.5.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 | 


--------------------------------------------------------------------------------
/src/app/login/login.component.html:
--------------------------------------------------------------------------------
 1 | <mat-toolbar color="primary">
 2 |   <mat-toolbar-row>
 3 |     <span><img src="./assets/devglan.png"></span>
 4 |     <span class="example-fill-remaining-space"></span>
 5 |     <span class="example-spacer"></span>
 6 | 
 7 |     <button mat-button>About</button>
 8 |     <button mat-button>Contact</button>
 9 |   </mat-toolbar-row>
10 | </mat-toolbar>
11 | 
12 | <mat-card class="example-card">
13 |   <mat-card-header>
14 |     <mat-card-title>Login</mat-card-title>
15 |   </mat-card-header>
16 |   <mat-card-content>
17 |     <form class="example-form">
18 |       <table class="example-full-width" cellspacing="0">
19 |         <tr>
20 |           <td>
21 |             <mat-form-field class="example-full-width">
22 |               <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
23 |             </mat-form-field>
24 |           </td>
25 |         </tr>
26 |         <tr>
27 |           <td><mat-form-field class="example-full-width">
28 |             <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
29 |           </mat-form-field></td>
30 |         </tr></table>
31 |     </form>
32 |   </mat-card-content>
33 |   <mat-card-actions>
34 |     <button mat-raised-button (click)="login()" color="primary">Login</button>
35 |   </mat-card-actions>
36 | </mat-card>
37 | 


--------------------------------------------------------------------------------
/src/app/core/inteceptor.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import {HttpInterceptor, HttpRequest, HttpHandler, HttpSentEvent, HttpHeaderResponse, HttpProgressEvent,
 3 |   HttpResponse, HttpUserEvent, HttpErrorResponse} from '@angular/common/http';
 4 | import { Observable } from 'rxjs/Observable';
 5 | import { Router } from '@angular/router';
 6 | import {TokenStorage} from './token.storage';
 7 | import 'rxjs/add/operator/do';
 8 | 
 9 | const TOKEN_HEADER_KEY = 'Authorization';
10 | 
11 | @Injectable()
12 | export class Interceptor implements HttpInterceptor {
13 | 
14 |   constructor(private token: TokenStorage, private router: Router) { }
15 | 
16 |   intercept(req: HttpRequest<any>, next: HttpHandler):
17 |     Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
18 |     let authReq = req;
19 |     if (this.token.getToken() != null) {
20 |       authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + this.token.getToken())});
21 |     }
22 |     return next.handle(authReq).do(
23 |         (err: any) => {
24 |           if (err instanceof HttpErrorResponse) {
25 |             console.log(err);
26 |             console.log('req url :: ' + req.url);
27 |             if (err.status === 401) {
28 |               this.router.navigate(['user']);
29 |             }
30 |           }
31 |         }
32 |       );
33 |   }
34 | 
35 | }
36 | 


--------------------------------------------------------------------------------
/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "project": {
 4 |     "name": "client"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico"
13 |       ],
14 |       "index": "index.html",
15 |       "main": "main.ts",
16 |       "polyfills": "polyfills.ts",
17 |       "test": "test.ts",
18 |       "tsconfig": "tsconfig.app.json",
19 |       "testTsconfig": "tsconfig.spec.json",
20 |       "prefix": "app",
21 |       "styles": [
22 |         "styles.css"
23 |       ],
24 |       "scripts": [],
25 |       "environmentSource": "environments/environment.ts",
26 |       "environments": {
27 |         "dev": "environments/environment.ts",
28 |         "prod": "environments/environment.prod.ts"
29 |       }
30 |     }
31 |   ],
32 |   "e2e": {
33 |     "protractor": {
34 |       "config": "./protractor.conf.js"
35 |     }
36 |   },
37 |   "lint": [
38 |     {
39 |       "project": "src/tsconfig.app.json",
40 |       "exclude": "**/node_modules/**"
41 |     },
42 |     {
43 |       "project": "src/tsconfig.spec.json",
44 |       "exclude": "**/node_modules/**"
45 |     },
46 |     {
47 |       "project": "e2e/tsconfig.e2e.json",
48 |       "exclude": "**/node_modules/**"
49 |     }
50 |   ],
51 |   "test": {
52 |     "karma": {
53 |       "config": "./karma.conf.js"
54 |     }
55 |   },
56 |   "defaults": {
57 |     "styleExt": "css",
58 |     "component": {}
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { AppComponent } from './app.component';
 4 | import {CustomMaterialModule} from './core/material.module';
 5 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 6 | import {FormsModule} from '@angular/forms';
 7 | import { UserComponent } from './user/user.component';
 8 | import {AppRoutingModule} from './core/app.routing.module';
 9 | import { LoginComponent } from './login/login.component';
10 | import {ErrorDialogComponent} from './core/error-dialog.component';
11 | import {UserService} from "./app.service";
12 | import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
13 | import {AuthService} from "./core/auth.service";
14 | import {Interceptor} from "./core/inteceptor";
15 | import {TokenStorage} from "./core/token.storage";
16 | 
17 | @NgModule({
18 |   declarations: [
19 |     AppComponent,
20 |     UserComponent,
21 |     LoginComponent,
22 |     ErrorDialogComponent
23 |   ],
24 |   imports: [
25 |     BrowserModule,
26 |     HttpClientModule,
27 |     BrowserAnimationsModule,
28 |     CustomMaterialModule,
29 |     FormsModule,
30 |     AppRoutingModule
31 |   ],
32 |   entryComponents: [ErrorDialogComponent],
33 |   providers: [ErrorDialogComponent, UserService, AuthService, TokenStorage, TokenStorage,
34 |     {provide: HTTP_INTERCEPTORS,
35 |     useClass: Interceptor,
36 |     multi : true}
37 |   ],
38 |   bootstrap: [AppComponent]
39 | })
40 | export class AppModule { }
41 | 


--------------------------------------------------------------------------------
/src/app/user/user.component.html:
--------------------------------------------------------------------------------
 1 | <mat-toolbar color="primary">
 2 |   <mat-toolbar-row>
 3 |     <span><img src="./assets/devglan.png"></span>
 4 |     <span class="example-fill-remaining-space"></span>
 5 |     <span class="example-spacer"></span>
 6 | 
 7 |     <button mat-button>About</button>
 8 |     <button mat-button>Contact</button>
 9 |   </mat-toolbar-row>
10 | </mat-toolbar>
11 | <div class="example-container mat-elevation-z8">
12 |   <mat-table #table [dataSource]="dataSource">
13 | 
14 |     <ng-container matColumnDef="id">
15 |       <mat-header-cell *matHeaderCellDef> User Id </mat-header-cell>
16 |       <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
17 |     </ng-container>
18 | 
19 |     <ng-container matColumnDef="username">
20 |       <mat-header-cell *matHeaderCellDef> UserName</mat-header-cell>
21 |       <mat-cell *matCellDef="let element"> {{element.username}} </mat-cell>
22 |     </ng-container>
23 | 
24 |     <ng-container matColumnDef="salary">
25 |       <mat-header-cell *matHeaderCellDef> Salary </mat-header-cell>
26 |       <mat-cell *matCellDef="let element"> {{element.salary}} </mat-cell>
27 |     </ng-container>
28 | 
29 |     <ng-container matColumnDef="age">
30 |       <mat-header-cell *matHeaderCellDef> age </mat-header-cell>
31 |       <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
32 |     </ng-container>
33 | 
34 |     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
35 |     <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
36 |   </mat-table>
37 | </div>
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve",
 8 |     "build": "ng build --prod",
 9 |     "test": "ng test",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^5.2.0",
16 |     "@angular/cdk": "^5.1.0",
17 |     "@angular/common": "^5.2.0",
18 |     "@angular/compiler": "^5.2.0",
19 |     "@angular/core": "^5.2.0",
20 |     "@angular/forms": "^5.2.0",
21 |     "@angular/http": "^5.2.0",
22 |     "@angular/material": "^5.1.0",
23 |     "@angular/platform-browser": "^5.2.0",
24 |     "@angular/platform-browser-dynamic": "^5.2.0",
25 |     "@angular/router": "^5.2.0",
26 |     "core-js": "^2.4.1",
27 |     "rxjs": "^5.5.6",
28 |     "zone.js": "^0.8.19"
29 |   },
30 |   "devDependencies": {
31 |     "@angular/cli": "1.6.5",
32 |     "@angular/compiler-cli": "^5.2.0",
33 |     "@angular/language-service": "^5.2.0",
34 |     "@types/jasmine": "~2.8.3",
35 |     "@types/jasminewd2": "~2.0.2",
36 |     "@types/node": "~6.0.60",
37 |     "codelyzer": "^4.0.1",
38 |     "jasmine-core": "~2.8.0",
39 |     "jasmine-spec-reporter": "~4.2.1",
40 |     "karma": "~2.0.0",
41 |     "karma-chrome-launcher": "~2.2.0",
42 |     "karma-coverage-istanbul-reporter": "^1.2.1",
43 |     "karma-jasmine": "~1.1.0",
44 |     "karma-jasmine-html-reporter": "^0.2.2",
45 |     "protractor": "~5.1.2",
46 |     "ts-node": "~4.1.0",
47 |     "tslint": "~5.9.1",
48 |     "typescript": "~2.5.3"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Required to support Web Animations `@angular/platform-browser/animations`.
51 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
52 |  **/
53 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
54 | 
55 | 
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | 
64 | /***************************************************************************************************
65 |  * APPLICATION IMPORTS
66 |  */
67 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs",
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": [
 26 |       true,
 27 |       "spaces"
 28 |     ],
 29 |     "interface-over-type-literal": true,
 30 |     "label-position": true,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-access": false,
 36 |     "member-ordering": [
 37 |       true,
 38 |       {
 39 |         "order": [
 40 |           "static-field",
 41 |           "instance-field",
 42 |           "static-method",
 43 |           "instance-method"
 44 |         ]
 45 |       }
 46 |     ],
 47 |     "no-arg": true,
 48 |     "no-bitwise": true,
 49 |     "no-console": [
 50 |       true,
 51 |       "debug",
 52 |       "info",
 53 |       "time",
 54 |       "timeEnd",
 55 |       "trace"
 56 |     ],
 57 |     "no-construct": true,
 58 |     "no-debugger": true,
 59 |     "no-duplicate-super": true,
 60 |     "no-empty": false,
 61 |     "no-empty-interface": true,
 62 |     "no-eval": true,
 63 |     "no-inferrable-types": [
 64 |       true,
 65 |       "ignore-params"
 66 |     ],
 67 |     "no-misused-new": true,
 68 |     "no-non-null-assertion": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "directive-selector": [
121 |       true,
122 |       "attribute",
123 |       "app",
124 |       "camelCase"
125 |     ],
126 |     "component-selector": [
127 |       true,
128 |       "element",
129 |       "app",
130 |       "kebab-case"
131 |     ],
132 |     "no-output-on-prefix": true,
133 |     "use-input-property-decorator": true,
134 |     "use-output-property-decorator": true,
135 |     "use-host-property-decorator": true,
136 |     "no-input-rename": true,
137 |     "no-output-rename": true,
138 |     "use-life-cycle-interface": true,
139 |     "use-pipe-transform-interface": true,
140 |     "component-class-suffix": true,
141 |     "directive-class-suffix": true
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/material.txt:
--------------------------------------------------------------------------------
  1 | ibstalling angular component
  2 | 
  3 | npm install --save @angular/material @angular/cdk
  4 | cdk - component development kit - angular material component, allows to build web component without angular msterial
  5 | npm i -save hammerjs for animations
  6 | 
  7 | 
  8 | add css to style.css
  9 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 10 | if u don;t want animations - imports: [NoopAnimationsModule],
 11 | 
 12 | <p>This tutorial is about creating a sample application using angular 5 material design.The app will have a login page as a landing page and after
 13 | successful login user will be redirected to next page. To design this page we will be using different angular 5 material components such as form controls,
 14 | navigation menu, layout and buttons.</p>
 15 | <h2 classs="Environment Setup with Angular CLI">
 16 | <p>At first, we will be setting up the angular Hero app using angular CLI and then integrate material design with it from scratch. So, following
 17 | are the commands I used to set up the angular 5 Hero app.</p>
 18 | <div class="cd">
 19 | npm install -g @angular/cli
 20 | ng new client
 21 | cd client/
 22 | ng serve
 23 | </div>
 24 | <p>Now we have our Hero application app running on <a href>http://localhost:4200</a>.The CLI version here is 1.6.5 and angular version is 5.2.0.
 25 | Let's start integrating material with it.</p>
 26 | <h2 class="st">Angular 5 Material Design Configuration</h2>
 27 | <p>We will be using angular CLI to integrate material with this Hero application.Here is the <a href="https://material.angular.io/" rel="nofollow">official website</a> for API description of angular 5 material.
 28 |  There are primarily 3 steps to configure material design.Let &apos's do it step by step.</p>
 29 |  <p><b>Step 1 </b>Install angular material and cdk </p>
 30 |  <div class="cd">
 31 |  npm install --save @angular/material @angular/cdk
 32 | 
 33 |  </div>
 34 |  <p>Above command will install required dependencies such as @angular/animations, @angular/cdk, @angular/material to get started with material.
 35 |  Here @angular/material installs the actual dependency required for material designing whereas cdk(Component Development Kit) allows to build application without any dependency on material and
 36 |  @angular/animations provides high quality animations effect.</p>
 37 |  <p><b>Step 2 - </b>Install Angular Theme - There are 4 themes available -  deeppurple-amber.css, indigo-pink.css, pink-bluegrey.css and
 38 |  purple-green.css under <span class="ant">node_modules/@angular/material/prebuilt-themes. We will be using indigo-pink theme.Before using it
 39 |  we need to install it in our application. To do so, import the project into your IDE and open style.css under src folder paste the below line.</p>
 40 |  <div class="cd">
 41 |  @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 42 |  </div>
 43 |  <p>Also add following to index.html for fonts support.</p>
 44 |  <div class="cd">
 45 |  <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 46 |  </div>
 47 |  <p><b>Step 3 - </b>Material Module Configuration - Here we will be creating a separate module file to define all our material related module
 48 |   in one single .ts file to make the implementation cleaner. So, create a file named material.module.ts file with following lines.</p>
 49 |   <div class="cd">
 50 |   import {NgModule} from "@angular/core";
 51 |   import { CommonModule } from '@angular/common';
 52 | 
 53 |   @NgModule({
 54 |     imports: [],
 55 |     exports: [],
 56 |   })
 57 |   export class CustomMaterialModule { }
 58 | 
 59 |   </div>
 60 | <p>Now import the same in app.module.ts..</p>
 61 | <b>app.module.ts</b>
 62 | <div class="cd">
 63 | import { BrowserModule } from '@angular/platform-browser';
 64 | import { NgModule } from '@angular/core';
 65 | import { AppComponent } from './app.component';
 66 | import {CustomMaterialModule} from "./material.module";
 67 | import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 68 | 
 69 | 
 70 | @NgModule({
 71 |   declarations: [
 72 |     AppComponent
 73 |   ],
 74 |   imports: [
 75 |     BrowserModule,
 76 |     BrowserAnimationsModule,
 77 |     CustomMaterialModule
 78 |   ],
 79 |   providers: [],
 80 |   bootstrap: [AppComponent]
 81 | })
 82 | export class AppModule { }
 83 | 
 84 | </div>
 85 | <p>Till now there won&apos;s be any effect of material in our application but our configuration to get started with material is done. Now,
 86 | we will start creating components using material.</p>
 87 | <h2 class="st">Creating Material Navigation</h2>
 88 | <p>Angular provides 3 navigation options - Menu, Sidenav and Toolbar. We will be creating toolbar here for navigation. To do so, first we need to
 89 | import and export MatToolbarModule in our material.module.ts as follow:</p>
 90 | <div class="cd">
 91 | import { MatButtonModule, MatToolbarModule } from '@angular/material';
 92 | <span class="antb">
 93 | .
 94 | .
 95 | .</span>
 96 | imports: [CommonModule, MatToolbarModule, MatButtonModule],
 97 | exports: [CommonModule, MatToolbarModule, MatButtonModule],
 98 | </div>
 99 | <p>Now we have tool bar module imported, we can create our tool bar which will have company logo on the left side and some buttons on the
100 | right side.To have material buttons we need buttons module imported which has been imported above. </p>
101 | <p>Let&apos;s clean up default settings first.Remove all the code from app.component.html and add following</p>
102 | <div class="cd">
103 | <mat-toolbar color="primary">
104 |   <mat-toolbar-row>
105 |     <span><img src="./assets/logo.png"></span>
106 |     <span class="example-fill-remaining-space"></span>
107 |     <span class="align-center">Email2SMS</span>
108 |     <span class="example-spacer"></span>
109 | 
110 |     <button mat-button>About</button>
111 |     <button mat-button>Contact</button>
112 |   </mat-toolbar-row>
113 | </mat-toolbar>
114 | 
115 | </div>
116 | <p>Alao, add following css in app.component.css</p>
117 | <div class="cd">
118 | .example-icon {
119 |   padding: 0 14px;
120 | }
121 | 
122 | .example-spacer {
123 |   flex: 1 1 auto;
124 | }
125 | 
126 | </div>
127 | <p>Once this is done, hit ng serve in the command line and open browser at <a href>localhost:4200</a>. Following is the material toolbar that we  built.</p>
128 | image 1
129 | <h2 class="st">Creating Form with Material</h2>
130 | <p>Now let&apos;s create a login form. For this we require to import MatCardModule and MatInputModule. MatCardModule is a material layout
131 |  and MatInputModule provides multiple input components.Add following lines in app.component.html</p>
132 |  <div class="cd">
133 |  <mat-card class="example-card">
134 |    <mat-card-header>
135 |      <mat-card-title>Login</mat-card-title>
136 |    </mat-card-header>
137 |    <mat-card-content>
138 |      <form class="example-form">
139 |        <table class="example-full-width" cellspacing="0">
140 |          <tr>
141 |            <td>
142 |              <mat-form-field class="example-full-width">
143 |              <input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
144 |              </mat-form-field>
145 |            </td>
146 |          </tr>
147 |          <tr>
148 |          <td><mat-form-field class="example-full-width">
149 |            <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
150 |          </mat-form-field></td>
151 |        </tr></table>
152 |      </form>
153 |      <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
154 |    </mat-card-content>
155 |    <mat-card-actions>
156 |      <button mat-raised-button (click)="login()" color="primary">Login</button>
157 |    </mat-card-actions>
158 |  </mat-card>
159 | 
160 |  </div>
161 | <p>In the above code we have a layout having two form fields for username and password bind with our model attributes and a button. Once this button
162 | is clicked <code>login()</code> will be called to validate the user.</p><p>Once you add above code, you will find error as <span class="ant">
163 | Can&apos;t bind ngModel since it isn&apos;t a known property of input because we don&apos;t have formsModule imported. Hence let&apos;s import it in
164 | <code>app.module.ts</code>.Also, make following changes in <code>app.component.ts</code> to define the variable username, password and <code>login()</code> </p>
165 | <div class="cd">
166 | import { Component } from '@angular/core';
167 | 
168 | @Component({
169 |   selector: 'app-root',
170 |   templateUrl: './app.component.html',
171 |   styleUrls: ['./app.component.css']
172 | })
173 | export class AppComponent {
174 | 
175 |   constructor() {
176 |   }
177 | 
178 |   username : string
179 |   password : string
180 | 
181 |   login() : void {
182 |     if(this.username == 'admin' && this.password == 'admin'){
183 |      alert("Success.")
184 |     }else {
185 |       alert("Invalid credentials");
186 |     }
187 |   }
188 | }
189 | 
190 | </div>
191 | <p>Now open the browser, you can see a beautiful login page as below:</p>
192 | image 2
193 | 
194 | 


--------------------------------------------------------------------------------