I recently completed Visual DOM course at Angular Nation and the course covers advanced materials and is beneficial to Angular developers of any level. I personally struggle with the concept of view container ref (vcr) and would like to build a side project about it with my mentor, Nati.
The idea of the application is to displays a restaurant menu in Spanish (I am also learning Spanish), user can order food and beverages from the menu and the selection is added to the page dynamically through vcr. The project is at the early stage and we use storybook to visualize the components as the application comes along the way.
Create an angular application
ng new ng-spanish-menu
Install storybook dependencies
# Add Storybook:
npx sb init
The command adds storybook script in package.json and developer can run npm run storybook
to launch storybook site at http://localhost:6006.
Create a food module
ng g module food
This module keeps food-related components and services.
Create a food card component in food module
ng g c foodCard --module=food
Food card component is a simple presentational component that displays name, description, price, quantity and total amount of a food/beverage.
// food-card.component.ts
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
@Component({
selector: 'app-food-card',
templateUrl: './food-card.component.html',
styleUrls: ['./food-card.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FoodCardComponent {
@Input()
name: string
@Input()
description: string
@Input()
price: number
@Input()
quantity: number
get total() {
return Math.round(this.price * this.quantity * 100) / 100
}
}
// food-card.component.html
<div class="container">
<label name="name" class="item">
<span class="field">Name:</span>
<span>{{ name }}</span>
</label>
<label class="item" name="description">
<span class="field">Description:</span>
<span>{{ description }}</span>
</label>
<label class="item" name="price">
<span class="field">Price:</span>
<span>{{ price }}</span>
</label>
<label class="item" name="quantity">
<span class="field">Quantity:</span>
<span>{{ quantity }}</span>
</label>
<label class="item" name="total">
<span class="field">Total:</span>
<span>USD {{ total }}</span>
</label>
</div>
Create Storybook for Food Card Component
Create a new food folder under stories.
Create food-card.stories.ts under the food folder
// food-card.storeis.ts
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0'
import { FoodCardComponent } from '@/food'
export default {
title: 'Food Card',
component: FoodCardComponent,
} as Meta
const Template: Story<FoodCardComponent> = (args: FoodCardComponent) => ({
props: args,
})
export const Primary = Template.bind({})
Primary.args = {
name: 'Vino tinto',
description: 'Red wine',
price: 12.99,
quantity: 3,
}
Then, input values are supplied to Primary.args and subsequently passed to FoodCardComponent to be displayed.
Start storybook application
npm run storybook
Click the title Food Card -> Primary and the component is rendered with initial input values.
Input values can be updated and then the component re-renders with new values.
CSS is very simple currently but Nati and I can work on the styling later after functionality is completed.
I am very excited of this project because Nati is very talented Angular developer and we can learn from each other while we work it together and she teaches me Spanish.
This is the end of the blog post and we will keep you posted after progress is made, thanks.
Resources:
- Repo: https://github.com/railsstudent/ng-spanish-menu
- Install Storybook: https://storybook.js.org/docs/react/get-started/install
- Storybook: Build a simple component: https://storybook.js.org/tutorials/intro-to-storybook/angular/en/simple-component/