Kafelo — Cafeteria Angular Website Template

About This Item

Kafelo Angular is one of our cafeteria website templates for specialty coffee shops and cafés, written in TypeScript on Angular 17. Each page is a standalone component. The Angular CLI handles serving, building and testing.

The café logic sits in injectable services. As a result, components stay small and easy to test. For instance, one service handles which café is open now and until when, and every component that needs it reuses it.

Home Page Components

• Café & Kitchen – a hero slider with the crest.
• Roastery & Bar – a night-led split hero with a ghost word, the roastery film.
• Beans & To Go – a packshot hero with a ghost word, two promotions with the next Friday’s date.

Café Features And Services

• Our Menu – five categories, dietary filters.
• Order Ahead – build a drink: size, milk, extra shots and syrups.
• Book A Table – party, day.
• Brew Guide – dose, water, ratio, grind and temperature for six methods and any number of cups.
• Bean Subscription – coffee, grind, bag and frequency priced per delivery and per month, the saving.
• Our Cafés – three locations with live opening hours, their week and a map.

Cafeteria Website Templates Features

• Angular 17 standalone components for 32 pages
• Typed models and services in TypeScript
• RxJS for shared state such as the cart, the theme and the language
• Lazy-loaded routes and the Angular CLI
• Light and dark mode on one switch, remembered between visits
• Right-to-left layouts for every page
• Responsive from phones to wide screens
• Documentation for setup, structure and changes

Working With The Angular CLI

Install Node 18 or newer and the Angular CLI. Then run npm install and ng serve. Later, ng build writes the production files.

Looking for cafeteria website templates in another stack? Kafelo also comes as HTML5, React, Vue and WordPress. Every format is in the developer bundle at 20% off. Browse more Restaurant & Cafe Angular templates.

Built with Angular and TypeScript.