Angular and Storybook – Mock Data in Component

Loading

Reading Time: 5 minutes Introduction After building a few presentational components, I am ready to build a container component, food menu component, with them. Food menu component is responsible for displaying an option dropdown and a list of menu items. This is the component tree of food menu component. The functions of food menu component are to retrieve menu … Read more

Angular and Storybook – Component with content projection

Loading

Reading Time: 3 minutes In Bonnie’s visual DOM course, I learnt the technique of applying multiple content projections in a component. I created a FoodMenuCardComponent with two content projections; i.e., a component with two <ng-content> elements. The first <ng-content> has selector ‘head’ that projects FoodQuestion component and the second <ng-content> has selector ‘body’ that projects a list of FoodChoice … Read more

Angular and Storybook – Simple Component with inputs and actions

Loading

Reading Time: 4 minutes Previously, I created a story book for simple component with inputs only (link) . In this post, I want to add new stories for a simple components with both input and action. The component is FoodChoiceComponent that has two states: choice available to order and choice that has sold out. If choice is available, user … Read more

Angular and Storybook – Simple Component

Loading

Reading Time: 3 minutes 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 … Read more

Set up a React and TypeScript project from scratch

Loading

Reading Time: 2 minutes Create a folder ts-graphql-country and change to directory Generate package.json Add “browserslist”: [ “last 2 Chrome versions” ] in package.json Install react, react-dom and @reach/router Install parcel bundler and prettier Add dev script in package.json to launch web site at http://localhost:1234 Create a blank index.html in src folder Create .prettierrc file to store prettier configurations … Read more