How to perform accessibility testing in Angular and Storybook

Loading

Reading Time: 4 minutes Introduction Accessibility testing is an important aspect of Angular and Storybook development because applications should be accessible to disabled individuals. For example, people who suffer from color blindness can not see red and green, and developers should render texts in different colors. When developing accessible applications in Angular, we can add aria attributes to HTML … Read more

How to render Tailwind CSS in Angular and Storybook

Loading

Reading Time: 2 minutes Introduction In previous post, we learned how to apply Tailwind CSS to Angular application. However, the Tailwind CSS does not render in Storybook components properly. It is because we need to install PostCSS add-on to configure PostCSS and add Tailwind to the Storybook. In this post, we learn how to install storybook PostCSS add-on and … Read more

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 – Publish to Chromatic

Loading

Reading Time: 3 minutes Introduction In the ng spanish menu repo, I created some Angular components and storybooks for the application. I thought it would be an excellent idea to deploy the storybooks to Chromatic to share with other Angular developers for feedback. Install Chromatic dependencies Create Chromatic app for Github repository Sign in with Github account Choose a … 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