Go to profile and add another elements

angular.json

@@ -111,6 +111,123 @@
                     }
                 }
             }
+        },
+        "profile": {
+            "projectType": "application",
+            "schematics": {},
+            "root": "projects/profile",
+            "sourceRoot": "projects/profile/src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/profile",
+                        "index": "projects/profile/src/index.html",
+                        "main": "projects/profile/src/main.ts",
+                        "polyfills": "projects/profile/src/polyfills.ts",
+                        "tsConfig": "projects/profile/tsconfig.app.json",
+                        "aot": true,
+                        "assets": [
+                            "projects/profile/src/favicon.ico",
+                            "projects/profile/src/assets"
+                        ],
+                        "styles": [
+                            "projects/profile/src/styles.css"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "projects/profile/src/environments/environment.ts",
+                                    "with": "projects/profile/src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb",
+                                    "maximumError": "10kb"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "profile:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "profile:build:production"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "profile:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "projects/profile/src/test.ts",
+                        "polyfills": "projects/profile/src/polyfills.ts",
+                        "tsConfig": "projects/profile/tsconfig.spec.json",
+                        "karmaConfig": "projects/profile/karma.conf.js",
+                        "assets": [
+                            "projects/profile/src/favicon.ico",
+                            "projects/profile/src/assets"
+                        ],
+                        "styles": [
+                            "projects/profile/src/styles.css"
+                        ],
+                        "scripts": []
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "projects/profile/tsconfig.app.json",
+                            "projects/profile/tsconfig.spec.json",
+                            "projects/profile/e2e/tsconfig.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                },
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "projects/profile/e2e/protractor.conf.js",
+                        "devServerTarget": "profile:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "profile:serve:production"
+                        }
+                    }
+                }
+            }
         }
     },
     "defaultProject": "test-ng7",

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AuthGuard } from './shared';
 import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module';
+import { ProfileComponent } from './profile/profile.component';
 
 @NgModule({
     imports: [
@@ -18,7 +19,7 @@ import { LanguageTranslationModule } from './shared/modules/language-translation
         LanguageTranslationModule,
         AppRoutingModule
     ],
-    declarations: [AppComponent],
+    declarations: [AppComponent, ProfileComponent],
     providers: [AuthGuard],
     bootstrap: [AppComponent]
 })

src/app/layout/bs-element/bs-element.component.html

@@ -18,7 +18,7 @@ <h1>Buttons</h1>
         <hr />
     </div>
     <p>
-        <button class="btn btn-lg btn-default" type="button">Default</button>
+        <button class="btn btn-lg btn-default" type="button" >Default</button>
         <button class="btn btn-lg btn-primary" type="button">Primary</button>
         <button class="btn btn-lg btn-secondary" type="button">Secondary</button>
         <button class="btn btn-lg btn-success" type="button">Success</button>
@@ -373,4 +373,44 @@ <h4 class="card-title">Dark card title</h4>
         </div>
         <!-- /.col-sm-4 -->
     </div>
+
+    <div class="page-header">
+        <h1>Jumbotron</h1>
+        <hr />
+    </div>
+    <div class="jumbotron jumbotron-fluid">
+        <div class="container">
+          <h1 class="display-4">Fluid jumbotron</h1>
+          <p class="lead">This is a modified jumbotron!! Enjoy it!</p>
+        </div>
+      </div>
+
+    <div class="page-header">
+        <h1>Range Input</h1>
+        <hr />
+    </div>
+    <form>
+        <div class="form-group">
+          <label for="formControlRange">Example Range input</label>
+          <input type="range" class="form-control-range" id="formControlRange">
+        </div>
+      </form>
+
+    <div class="page-header">
+        <h1>Danger Button</h1>
+        <hr />
+    </div>
+    <div class="btn-group">
+        <button type="button" class="btn btn-danger">Action</button>
+        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Delete Page</a>
+        <a class="dropdown-item" href="#">Bad migration</a>
+        <a class="dropdown-item" href="#">Turn off your wifi</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Forget this</a>
+        </div>
+    </div>
 </div>

src/app/layout/bs-element/bs-element.component.ts

@@ -11,4 +11,5 @@ export class BsElementComponent implements OnInit {
     constructor() {}
 
     ngOnInit() {}
+
 }

src/app/layout/components/header/header.component.html

@@ -31,6 +31,17 @@
                 </a>
             </li>
             &nbsp;
+            <li class="nav-item">
+                <a
+                    (click)="upAndDown()"
+                    class="nav-link mt-1"
+                    href="javascript:void(0)"
+                    style="padding: 0.375rem 1rem !important; border-color: #999;"
+                >
+                    UP/DOWN
+                </a>
+            </li>
+            &nbsp;
             <li class="nav-item dropdown" ngbDropdown>
                 <a class="nav-link" href="javascript:void(0)" ngbDropdownToggle>
                     <i class="fa fa-envelope"></i> <b class="caret"></b><span class="sr-only">(current)</span>

src/app/layout/components/header/header.component.ts

@@ -37,6 +37,12 @@ export class HeaderComponent implements OnInit {
         dom.classList.toggle('rtl');
     }
 
+    upAndDown() {
+        const dom: any = document.querySelector('nav');
+        dom.classList.toggle('fixed-bottom');
+        dom.classList.toggle('fixed-top')
+    }
+
     onLoggedout() {
         localStorage.removeItem('isLoggedin');
     }

src/app/layout/layout-routing.module.ts

@@ -27,6 +27,10 @@ const routes: Routes = [
             {
                 path: 'blank-page',
                 loadChildren: () => import('./blank-page/blank-page.module').then((m) => m.BlankPageModule)
+            },
+            {
+                path: 'profile',
+                loadChildren: () => import('../profile/profile.component').then((m) => m.ProfileComponent)
             }
         ]
     }

src/app/profile/profile-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProfileComponent } from './profile.component';
+
+
+const routes: Routes = [
+  {
+      path: 'profile',
+      component: ProfileComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProfileRoutingModule { }

src/app/profile/profile.component.html

@@ -0,0 +1 @@
+<p>This is your profile</p>

src/app/profile/profile.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile/profile.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/profile/profile.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ProfileRoutingModule } from './profile-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    ProfileRoutingModule
+  ]
+})
+export class ProfileModule { }