# ngx-opening-hours

A reusable **Angular 19 standalone component** for displaying business opening hours, built with **Angular Material**.  

Easily configure days, working hours, and display style. Supports "Open Now" / "Closed" status.

---

## Features

- Fully configurable **days and hours**
- Multiple time ranges per day
- Highlights **today’s schedule**
- Optional **Open Now / Closed** status
- Material design **card** or **table** layout
- Angular 19 **standalone component** — no module required

---

## Installation

```bash
npm install ngx-opening-hours

Make sure you have Angular Material installed:

ng add @angular/material

Usage

Import the component

If using NgModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { OpeningHoursComponent } from 'ngx-opening-hours';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, OpeningHoursComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

If using standalone bootstrap (Angular 19):

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { OpeningHoursComponent } from 'ngx-opening-hours';

bootstrapApplication(AppComponent, {
  imports: [OpeningHoursComponent]
});

Add to HTML

<ngx-opening-hours
  [days]="['Mon','Tue','Wed','Thu','Fri','Sat','Sun']"
  [hours]="{
    Mon: ['09:00-12:00','14:00-18:00'],
    Tue: ['09:00-17:00'],
    Wed: ['Closed'],
    Thu: ['09:00-17:00'],
    Fri: ['09:00-20:00'],
    Sat: ['10:00-14:00'],
    Sun: ['Closed']
  }"
  [showStatus]="true"
  [theme]="'card'"
></ngx-opening-hours>

Inputs

| Input | Type | Description | | | ------------ | ----------------------------- | ------------------------------------------------ | ---------------------------------- | | days | string[] | Array of days (e.g., ['Mon','Tue',...]) | | | hours | { [day: string]: string[] } | Map day → array of time ranges or "Closed" | | | showStatus | boolean | Show “Open Now” / “Closed” based on current time | | | theme | `'table' | 'card'` | Display style (default: 'table') |

Example

<ngx-opening-hours
  [days]="['Mon','Tue','Wed','Thu','Fri','Sat','Sun']"
  [hours]="{
    Mon: ['09:00-12:00','14:00-18:00'],
    Tue: ['09:00-17:00'],
    Wed: ['Closed'],
    Thu: ['09:00-17:00'],
    Fri: ['09:00-20:00'],
    Sat: ['10:00-14:00'],
    Sun: ['Closed']
  }"
  [showStatus]="true"
  [theme]="'table'"
></ngx-opening-hours>

License

MIT © Abdessamad Adane

Notes

• Compatible with Angular 19
• Uses Angular Material components: MatCardModule, MatListModule, MatTableModule, MatChipsModule
• Standalone component — no module import required