bhushan.shinde/Angular-ENI-Process
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added header

Browse Source
This commit is contained in:
Arun Jadhav
2024-09-26 12:08:48 +05:30
parent 783b198eba
commit ce01a52e0f
7 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@@ -12,6 +12,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { NumberOnlyDirective } from './_helper/number-only.directive'; import { NumberOnlyDirective } from './_helper/number-only.directive';
import { VeriableFormComponent } from './pages/veriable-form/veriable-form.component'; import { VeriableFormComponent } from './pages/veriable-form/veriable-form.component';
import { HeaderComponent } from './pages/header/header.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@@ -20,6 +21,7 @@ import { VeriableFormComponent } from './pages/veriable-form/veriable-form.compo
LoginComponent, LoginComponent,
NumberOnlyDirective, NumberOnlyDirective,
VeriableFormComponent, VeriableFormComponent,
HeaderComponent,
], ],
imports: [ imports: [

24
src/app/pages/header/header.component.html Normal file
View File

@@ -0,0 +1,24 @@
<header class=" bg-light">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> <img src="https://enianalytics.com/images/eni-tech-logo.png" alt="lohi"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">form 1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">form 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">form 3</a>
</li>
</ul>
</div>
</nav>
</div>
</header>

20
src/app/pages/header/header.component.sass Normal file
View File

@@ -0,0 +1,20 @@
header
border-bottom: 1px solid #cccccc3b
box-shadow: 0 0 8px #c2c2c252
.bg-light
background: #fff!important
nav img
width: 100px
ul li a
font-weight: 600
font-family: 'Inter', sans-serif
font-size: 14px
text-transform: uppercase
color: #444444
ul li.active a, ul li:hover a
color:#e76b20

25
src/app/pages/header/header.component.spec.ts Normal file
View File

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

15
src/app/pages/header/header.component.ts Normal file
View File

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

1
src/app/pages/veriable-form/veriable-form.component.html
View File

@@ -1,3 +1,4 @@
<app-header></app-header>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">

2
src/index.html
View File

@@ -13,5 +13,7 @@
</head> </head>
<body class="mat-typography"> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>