When you’re learning a new programming language or framework, like Angular, a fun way to practice your new skills is with code challenges. These bite-sized tasks usually focus on one or two coding concepts, and they’re designed to be solved relatively quickly so you won’t need to block out a big chunk of time to work on them.
Angular, a front-end framework developed by Google, is built entirely on TypeScript, a subset of JavaScript. With it, you can build beautiful, responsive web apps that look good in any modern browser. But before you dive in, you’ll want to practice your new skills so you have a firm grasp on the framework and coding concepts that you’ll use to build more complex web apps. Here are 10 coding challenges to help you practice and learn more about Angular.
Note that while these challenges are designed for beginners, you’ll still need to have a solid foundation in JavaScript since TypeScript is a superset of JavaScript. If you need a refresher, check out our Learn JavaScript course. And if you’re looking for an Angular course to take before you try out these challenges, here’s our Learn AngularJS course.
Learn something new for free
Also note that you can complete these challenges in your local coding environment or from anywhere, even your phone, using one of many online coding tools that allow you to import Angular and run your code in the browser. Here are two popular options:
1. Build a toolbar component
In this challenge, you’ll build a toolbar like you see on many websites that have the title of the site and navigation links. The title of the site will be passed into the component, and the site links will be nested within it. The title should be on the left side and 3-4 links should go on the right side. You can use popular sites like Google or Gmail for the links. For this challenge, you’ll use ng-content and @Input().
2. Build an Angular card component
All sorts of apps use cards to display content that repeats. You often see them on mobile apps and websites. For this challenge, build a card that accepts a title, subtitle, and icon. It should also accept a nested footer and body content. You’ll need to use ng-content , @Input(), ngIf, and dynamic class binding to complete this challenge.
3. Build an accordion
Accordions, components with one or more expandable sections, help save space in UI design. If you’re working on the front-end of an application, you’ll use accordions a lot. For this challenge, your accordion will accept a list and render it. The content in your list will include a title, a body, and an icon to open and close the accordion. You’ll use ng-content, @Input(), ngFor, and dynamic class binding, and you’ll also implement a click handler.
4. Build a credit card formatter
If you’re working with large numbers, like credit cards that have 16 digits, it’s easier for people to read them when they’re formatted. So for this challenge, try creating a pipe in Angular that will take a credit card number as a string and return the number with dashes between each set of characters. Only consider 16-digit numbers as valid and place the dash between every four digits. Your code should return an error if a number was entered that doesn’t have 16 characters. For this challenge, you will use @Pipe() and PipeTransform.
5. Build a star rating component
In this challenge, you’ll build a star rating component that accepts a value of 0-5, including half values like 4.5. The component should render the correct amount of stars, including empty stars and half stars. You’ll use @Component(), @Input(), ngFor, and ngIf.
6. Create an Angular pipe that sorts
Create a pipe that accepts an array of strings and a sort direction value of either asc or desc. If there isn’t a sort direction value, simply return the original list, and if the value to sort isn’t an array, throw an error. For this challenge, you’ll use @Pipe() and PipeTransform.
7. Detect a dirty form
The first step in this challenge is to create a form. Then, build a form guard that will ask the user if they want to continue without saving if the form is dirty (i.e., the value of the form has changed). You’ll use @Injectable() and CanDeactivate to complete this challenge.
8. Create a bottom sheet component
In this challenge, build a bottom sheet component that supports whatever control you choose. Here you’ll be using @Component(), ng-content, (click), and dynamic class binding.
9. Create a loader
When someone is waiting for data to load on a website, it’s helpful to let them know that the process has started. It’s also good to keep them informed while the process is still happening. The most common way to do this is with a spinning loader. So for this challenge, create a loader that can accept both a graphic for a spinning loader and simple text. You’ll use @Component(), @Input(), Enum, ngSwitch, and ngSwitchCase to do this.
10. Create a pop-up
Create a basic pop-up in Angular that is displayed by a click on another element, like a button. In this challenge, you’ll be using @Component(), @Input(), ng-content, fadeInOutAnimation, ngIf, (click), of(), delay(), pipe(), and unsubscribe().
Build your Angular skills
How’d you do with these challenges? Were they a breeze or do you feel like you need a refresher? If it’s time for a review, check out our Learn AngularJS course where you’ll learn how to build single-page web applications. This course requires a strong foundation in JavaScript and HTML, so if you need a refresher on either of those first, take a look at our Learn JavaScript and Learn HTML courses. Then you can dive into the Angular course.
If you enjoyed these challenges and you’d like to check out more, we hold daily and weekly code challenges to help keep your skills sharp. You can find more details on these challenges here. And if you want to explore other JavaScript frameworks, we also have a Learn Vue.js course and a Learn React course, both designed for beginners.
