Recipe Angular Template – Trickly

About This Item

Trickly Angular is a recipe Angular template for food bloggers and recipe creators, written in TypeScript on Angular 17. Each page is a standalone component. The Angular CLI handles serving, building and testing.

The recipe logic sits in injectable services. As a result, components stay small and easy to test. For instance, one service handles the recipe submit form, and every component that needs it reuses it.

Home Page Components

• Two home layouts.

Recipe Features And Services

• Recipes – a recipe grid and recipe pages with ingredients and steps.
• Recipe Categories – recipes grouped by category.
• Recipe Authors – author profiles for multi-contributor blogs.
• Recipe Submit – a form for visitors to send their own recipes.
• Shop – a shop, product details, cart and checkout.
• Blog – a blog grid and a post page.

Recipe Angular Template Features

• Angular 17 standalone components for 15 pages
• Typed models and services in TypeScript
• RxJS for shared state such as the cart and the theme
• Lazy-loaded routes and the Angular CLI
• Light and dark mode on one switch, remembered between visits
• 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 recipe Angular template in another stack? Trickly also comes as HTML5, React, Vue and WordPress. Every format is in the developer bundle at 20% off. Browse more Food & Restaurant Angular templates.

Built with Angular and TypeScript.