Customize template with ngTemplateOutlet and ngTemplate in Angular

Loading

Reading Time: 4 minutes Introduction When Angular components require to render ngTemplates programmatically, ngif-then-else construct takes care of most of the scenarios. However, ngIf is lack of passing context that ngTemplateOutlet directive supports. If either template depends on inputs or calculated data of component, then we can pass the values to them via template context of ngTemplateOutlet directive. The … Read more

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

Dynamically import module in Angular

Loading

Reading Time: 5 minutes Introduction The elements of Spanish menu application (https://github.com/railsstudent/ng-spanish-menu) are primarily texts and buttons, and the user interface looks plain on first glance. I want to make it interesting by rendering an icon when quantity is below threshold. This is the final output: The exclamation icon is loaded from angular-fontawesome followed by message, “Low Supply”. I … Read more

Tailwind CSS in JIT mode with Angular

Loading

Reading Time: 3 minutes Introduction Tailwind CSS (https://tailwindcss.com/) is a utility-first CSS framework with out-of-the-box classes for UI components. For example, <p class=”pl-2″>hello world</> is equivalent to <p style=”padding-left: 0.5rem;”>hello world</h> and we achieve the effect without writing inline-style or custom class. However, our components may require one-off style that Tailwind does not support and we cannot justify to … Read more

Automate release management in Angular

Loading

Reading Time: 4 minutes Introduction Whether it is enterprise application or open source project, they will schedule for release to announce new features and bug fixes. The project will need new version and tag after the release to keep track of changes that occur between two releases. When manager ask development team the deliverable of the current release; change … Read more

Improve Angular code with Betterer

Loading

Reading Time: 5 minutes Introduction In software development, when developers work on a project for a period of time, they tend to add code smell into the code that Eslint rules identify as problems. When architect adds a new Eslint rule to fix these errors, npm run lint reports error messages in terminal that require immediate attention. I have … 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

Add value to commit message in Angular

Loading

Reading Time: 3 minutes Introduction When a team of developers works on the project, we should add tools to ensure all developers adopt the same convention of commit messages. The tools ng-spanish-menu application use to enforce commit conventions are commitlint, commitizen and husky. Install dependencies of commitlint and husky locally First, we install commitlint and husky to set up … 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