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

| Angular Version | Compatible? | | ---------------- | ----------- | | 13.0.0+ | ✅ | | below 13.0.0 | ❌ |

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.