Chanoya — Tea Room Angular Website Template

About This Item

Chanoya Angular is a tea room website for tea houses and tea rooms, written in TypeScript on Angular 17. Each page is a standalone component. The Angular CLI handles serving, building and testing.

The tea house logic sits in injectable services. As a result, components stay small and easy to test. For instance, one service handles ceremonies with sessions and the seats left in each, and every component that needs it reuses it.

Home Page Components

• Tea House – a hero slider with the title low on the photograph.
• Loose Leaf Merchant – a wide hero band, the popular blends in five columns with type tabs.
• Tea Ceremonies – a framed hero slider, four ways to sit with tea, Flavour Wheel.

Tea House Features And Services

• Ceremonies – today’s sessions in time order, live.
• Ceremony Details – the week ahead with every session and its seats left.
• Book A Ceremony – a four-step wizard: ceremony, a day and a session with seats left, guests.
• Brewing Guide – choose a tea and your vessel: the water in °C or °F.
• Tea Finder – pick flavour notes on the wheel’s eight tiles.
• The Shop – loose leaf in 25, 50 and 100 g tins.

Tea Room Website Features

• Angular 17 standalone components for 30 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 this tea room website in another stack? Chanoya 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.