transit-header v0.0.11

Overview

The Angular Transit Header Library provides a reusable and customizable header component that you can easily integrate into your Angular projects. This header component allows you to display a navigation bar with various features such as logo, navigation links, search bar, and login button.

Compatibility

Installation

To use the Angular Transit Header Library in your Angular project, follow these steps:

Install the library via npm:

npm i transit-header

Import the TransitHeaderModule in your Angular module (e.g., app.module.ts):

import { TransitHeaderModule } from 'transit-header';

@NgModule({
  imports: [
    TransitHeaderModule
  ],

})
export class AppModule { }

Usage

Once you have installed the library and imported the TransitHeaderModule, you can use the lib-transit-header component in your Angular templates.

<!-- app.component.html or any other template -->
<lib-transit-header
  [logo]="{ name: '', image: '', route: '' }"
  [loginButton]="{ content: '', route: '' }"
  [language]="true"
  (languageChange)=""
  [search]="true"
  backgroundColor="#333"
  searchInputBackgroundColor="#333"
  searchBorder="1px solid #0d6efd"
  loginBorder="1px solid #0d6efd"
  searchButtonColor=""
  loginButtonColor=""
  hoverColor="#fff"
  hoverBackGround="#0d6efd"
  hoverBorder="1px solid #0d6ef"
  [headerContent]=""
  [stickyNavBar]="true"
></lib-transit-header>

When the language change the currentLanguage will change as the following

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent{
  currentLanguage: string = 'en';

  onLangugeChange(lang: string) {
    this.currentLanguage = lang;
  }
  
}

Inputs

The lib-transit-header component accepts the following inputs:

- logo: An object representing the logo displayed in the header. It can contain the name, image, and route properties:

  - name: (string) The name of the logo.
  - image: (string) The path of the logo image.
  - route: (string) The route to navigate when the logo is clicked.

- search: (boolean) If true, display the search input in the header.

- searchButtonContent: (string) The content of the search button.

- loginButton: An object Configures the login button in the header. It can contain the following properties:
  - content: (string) The text to be displayed on the login button.
  - route: (string) The route to navigate when the login button is clicked.

- language: (boolean) If true, display the language button in the header.

- searchButtonPlaceholder: (string) The placeholder text for the search input.

- backgroundColor: (string) The background color of the header.

- searchInputBackgroundColor: (string) The background color of the search input.

- searchBorder: (string) The border style of the search input.

- loginBorder: (string) The border style of the login button.

- searchButtonColor: (string) The color of the search button.

- loginButtonColor: (string) The color of the login button.

- hoverBackGround: (string) The background color when hovering over buttons.

- hoverColor: (string) The text color when hovering over buttons.

- hoverBorder: (string) The border style when hovering over buttons.

- stickyNavBar: A boolean flag to enable/disable the sticky behavior of the navigation bar. If set to true, the header will be sticky and stay at the top of the page as the user scrolls.

- headerContent: An array of objects representing the navigation links in the header. Each object can have the following properties:

    - name: The display name of the navigation link.
    - route: The Angular route to navigate to when the link is clicked.
    - sectionId: The HTML section ID to scroll to when the link is clicked.
    - children: An array of objects representing the dropdown options for a navigation link that has children. Each child object can have the same properties as the parent link.

Outputs

• languageChange (EventEmitter): Emits an event when the language toggle button is clicked, passing the new language code as a string.

Customization You can customize the appearance and behavior of the header by providing different input values to the lib-transit-header component. Adjust the colors, borders, logo image, and navigation links according to your project's requirements.