Typescript Configuration

Bootstrapping a project in the terminal you can run mkdir typescript-sandbox cd typescript-sandbox npm init -y git init touch .gitignore This will create a folder for your project, change directory into it and intiallize it with a package.json and git repository. After doing so, I also added node_modules to the .gitignore file to prevent those...

Exploring Angular v12 Part 8 – Conditional rendering

This post will describe two examples of how to conditionally render content within templates in Angular 12. The first example explains the if/else directive, whereas the second example details usage of switch directive (ngSwitch). Rendering conditionally with if/else logic This method is suitable when there is a small or finite number of cases to account...

Exploring Angular v12 Part 7 – Handling events

This post will go through a small example of how to use the click and keyup event handlers in Angular 12. Template file The following component has two native elements, a button and an input. The goal is to fire a function; when the buttonwhen text is typed in the input field The value of...

Exploring Angular v12 Part 6 – Piping

This post will go through some examples of how to pipe data, within templates in Angular 12. Piping is an in-built feature which allows you to transform information within templates, in a clean and maintainable fashion. This may include numbers, strings, json objects, etc. In-built pipes The following file has some examples of how to...

Exploring Angular v12 Part 5 – Unit testing

This post will go through some examples of how I tested an angular component using the core testing library, karma and jasmine. Writing tests After generating a component, the test file would have been automatically created by the Angular CLI. It is denoted by .spec.ts . For my particular component, it looks something like this,...

Exploring Angular v12 Part 4 – Using assets

This post will provide a small example of how to use assets in an Angular application, as well as how to use them in a dynamic component. Storing assets Assets can be stored in the assets directory, this directory is generated by default when you generate a new Angular 12 project via the CLI. For...

Exploring Angular v12 Part 3 – Interacting with components

For this post I want to go through some fundamental interactions with components in Angular 12. Some questions I want to answer are; How components are generated?How can one nest components?How can properties be passed down to children components?How to type properties with Typescript? Generating components There is a command available to generate a new...

Exploring Angular v12 Part 2 – Routing

This post will go through how to navigate pages using Angular in-built router, example closely follows the official docs example. Docs I referenced are from here Creating two page components In this example, I want to create at least two pages. I started off by creating two new components, they will both represent a page...

Exploring Angular v12 Part 1 – Setting up a new project

Before jumping into Angular I had to install the cli npm install -g @angular/cli Setting up a new project Setting up a new project can be done relatively easily with the angular cli, I called my new project ang. ng new ang The cli asked which CSS style I prefer, so I went with SCSS....

Setting up commitlint and husky with a new project

This guide will go though how to setup husky version 6+ with commitlint version 12+. Husky allows for running scripts throughout the lifecycle of git, whereas commitlint allows you to add rules to format your commits by convention. Earlier versions require setting up configuration through package.json, however with the latest version of husky this is...