100 Angular Challenge

Begin an Angular project and learn how to update an app that falls behind versioning, noting that Angular updates occur about every six months so you can keep projects current.

Install the Angular CLI globally and create a brand-new project, then generate components, services, and directives as you work through the 100 challenges.

Learn how to update your Angular app from version 9 to 10 using ng update, migrate to a TEUs config based JSON, and verify with npm start.

Explore configuring an Angular TypeScript project, including lint rules and extensions, angular.json settings, and production versus local build logic. Learn to run the dev server, test, and generate new components.

Explore the Angular src setup, including global styles, polyfills, environment files, assets, and the app component and module architecture for lazy loading and scalable apps.

An Angular course demonstrates generating a new component via the CLI, placing it in a components folder, updating the app module, and configuring Sass for styling.

Configure angular schematics to generate components with scss across projects. Use global settings or one-time dash dash style options to ensure consistent scss files.

Learn how to convert an angular project's global styles to scss by renaming the styles file, updating angular.json build options, and enabling scss imports and variables that compile to css.

Practice actively in this course by building challenges, exploring readme cards, and viewing readmes to reinforce active learning and gain familiarity with angular concepts.

Build a basic Angular toolbar component with a dynamic title and nested content, implementing content projection, styling with a box-shadow mixin, responsive desktop-first grid, and typography enhancements.

Build a reusable Angular card component with icon classes from Font Awesome, plus a title, subtitle, and nested body and footer content, using dynamic inputs and conditional rendering.

Build a reusable accordion component in Angular by modeling items with title, content, and isExpanded, binding classes and handling click events to toggle content with a smooth animation.

Build and animate a customizable progress bar component that accepts a value and a max, defaults to 100, and uses a styled native progress element with smooth transitions.

Develop a star ratings component in Angular that renders full, half, and empty stars based on a rating input, using structural directives and Font Awesome icons.

Build a back-to-top component using Angular's viewport scroller and host listener to reveal a bottom-right button after scrolling 400 pixels and smoothly return to the top.

Set up the router module from angular/router, define app routes, generate a documentation component, and connect routing with a router outlet to load components without full page reload.

Create documentation components for pipes, pipe documentation, directives, and services, configure router links with hard-coded paths, and enable lazy loading to load routes on demand.

Learn how to implement lazy loading of Angular routes by creating a pipes module, configuring load children with a dynamic import, and defining pipes roots to load modules on demand.

Explore the truncate pipe, which defaults to 100 characters, supports configurable lengths (75, 50, 200), and appends an ellipsis via the pipe decorator and transform.

Build a circular loader with an overlay blur for Angular apps, toggled by an isLoading boolean. Create a loader container, animated circle, and responsive overlay using CSS and inline bindings.

Create a credit card formatter pipe that formats a 16- or 15-digit card number into dashed groups, validates length and characters, and returns informative error messages for invalid input.

Build a credit card input component with read-only mode that masks digits as x's, shows the last four, and displays Amex, Visa, MasterCard, Discover icons based on the first digits.

Explore extending the loader component in Angular by introducing a loader type enum, enabling circular and loading-text variants via input, with an animated dot-dot-dot loading indicator and lifecycle-based updates.

Create an Angular Twitter post component that combines the page title with hashtags, encodes the message, and opens a Twitter share link via a clickable icon.

Build a LinkedIn post component in Angular that creates a share URL with current page, uses the router, and opens the share in a new window with a LinkedIn icon.

Build a flattened pipe that flattens nested arrays into a single list, using an impure pipe (pure: false) to update non-primitive changes, and apply a recursive approach with value reassignment.

Create a reusable Angular modal component for sharing a LinkedIn post, opening via template reference, with a header, overlay, and close logic using is_hidden and open/close methods.

Master an Angular debounce click directive that prevents multiple clicks by delaying actions for five hundred milliseconds. Use Output decorator, host listener, and RxJS pipe to control click events.

Build a reusable quote component for marketing pages using Angular inputs for quote, author, and occupation, with semantic blockquote markup and a quote icon.

Build a reusable toggle component in Angular that accepts a boolean input, toggles on click, and uses smooth color and position transitions to indicate on/off states.

Develop a filter term pipe that takes an array of strings and filters it by a given search term, handling optional input and case-insensitive matching with toLowerCase and includes.

Build a rich text viewer component that sanitizes HTML by stripping empty or invalid markup, rendering only valid content with a valid HTML setter and HTML validation.

Design a debounced search component in Angular that waits 250 milliseconds between keystrokes, using Engy model change, subjects, and distinct until change to emit a single API call.

Build a searchable list by wiring the Dibbell search component with the filter term pipe to filter a country list as you type and update the search input on selection.

Create a reusable Angular counter component with plus and minus buttons, min and max values, and default zero, using component and input decorators, ngModel, and click events.

Create a simple table component that renders an array of objects into headers derived from object keys, using the key value pipe and input decorator for asynchronous data.

Build a pagination component in Angular that takes total items and page size, optionally uses a query string, and emits page changes to the parent via output.

Build a reusable Angular tabs component driven by an input array of tabs with title and active, emit the selected index on click, and render content with ngFor and ng-content.

Build a ripple directive in Angular that changes color on hover and creates a ripple effect on click, using ElementRef, Renderer2, input, and HostListener.

Build a fade in/out animation in Angular using trigger, transition, and animate. Apply it to elements entering and leaving the DOM with ngIf, after setting up the browser animation module.

Extend a simple Angular table by adding sorting and filtering with a reusable component. Learn to handle boolean, string, number, and date values, toggle sort direction, and emit header selections.

Build a reactive email form in Angular with a form builder and form group, validating name and email, and disable submit while showing dynamic error messages with styling.

Learn to implement a form dirty guard in Angular by using canDeactivate to prompt users before leaving a dirty form, with a reusable IFormDirty interface and form reset on submit.

Explore building angular user service that fetches a user by id from a json placeholder API, maps the data to a user model, and displays it with a json pipe.

Build a reusable ribbon component for e-commerce banners with four styles and four corner locations, controlled by inputs and enums via a component decorator.

Build a reusable button toggle component in Angular that accepts options, emits a selection to the parent, supports hover and active states, and handles edge cases like a single button.

Build a banner cut out component with a background image, title, and mix blend mode effect to create a reusable ecommerce banner for carousels and headers.

Learn to build a reusable Angular scale directive that uses ElementRef and HostListener to scale elements on hover with smooth transitions, then revert on mouse out.

Build a snackbar component that displays a message with bottom fade-in and fade-out, controlled by a show flag, auto-hidden via pipe delay, and accessed via view child.

Build a reusable Angular simple popup component that accepts content via input, shows on click with fade in/out animation, and auto hides after three seconds using delay and unsubscribe.

Build a countdown timer component in Angular that shows days, hours, minutes, and seconds, updating every second. Pass the target date via input and format time with a reusable method.

Implement a singleton snack bar service at the app level with a subject to publish messages, enabling any page or directive to trigger the single snack bar for copy feedback.

Create a reusable copy directive that copies text to the clipboard on click and notifies with snack bar service, using directive decorator, input, host listener, and injected navigator and document.

Learn to build a lazy load image directive in Angular using the intersection observer to load images when they enter view, with host binding and input source.

Create a responsive footer component featuring social media icons, a copyright year, and hover effects. Use a grid layout with media queries to adapt across devices and wrap content neatly.

Export a slide-right animation, import trigger with an enter transition, and apply it to the tabs content to slide in from the right with a smooth ease-out.

Build a skeleton loader component in Angular with width and height defaults of 100 percent, and animate it with an after element gradient while simulating asynchronous loading via a toggle.

Build a reusable Angular social media bar component using an enum for icon types, ng-container and ngFor to render configurable icons with platform-specific styles and hover effects.

Learn to build a bottom sheet component with a dynamic content area via template reference and an overlay, controlled by show and hide methods, with responsive styling.

Develop a collapsible fieldset component with a clickable legend to toggle visibility, using inputs for label and open state, rendering the legend, plus minus icon, and content with responsive styling.

Build a pill component as a presentational building block that accepts a label, an optional icon, and a style type via an enum, with dynamic classes and conditional icon rendering.

Build a pill filter list component in Angular with unselected and selected pills, using @Input and @Output to pass values and notify the parent, and toggle isActive on click.

Create a 404 not found component with a catch-all wildcard route, show a not found page, and redirect to the home page after a 10-second countdown using the router.

Explore building a password component in angular that tracks strength with a dynamic progress bar and four validation rules, displaying real-time error hints and responsive styling.

Build a single-instance title service in Angular that updates the page title on route changes by reading data attributes via ActivatedRoute and filtering Router navigation events.

Build a rich text pipe using the pipe decorator and pipe transform to strip invalid or empty HTML and return the validated content, comparing it with rich text viewer component.

Master the Angular sort by pipe to sort string arrays in ascending or descending order, handle null or undefined values, validate data types, and mimic native pipe behavior.

Sorts an array of objects by a string key using a key pipe, handles null or undefined values, and sorts in place with ascending or descending order.

Learn to build a reusable overlay component in Angular by exposing an isShown input, applying fixed positioning and a smooth opacity transition, with the parent controlling visibility.

Learn how to build an Angular local storage service that manages app state with a behavior subject, updates via a dedicated method, and tests with a local storage token.

Learn to extract route params in angular using activated route, map, and merge map to trigger API calls on parameter changes, while avoiding nested subscriptions.

Create three common scripts for Angular and JavaScript projects: run tests with code coverage, clean coverage folders, and auto fix lint issues, then chain them for precommit workflows.

Learn how to dynamically apply active classes to navigation with Angular's router link active and router link active options, including exact matching for precise home routes.

Implement an autofocus directive using elementRef and ngAfterContentInit to automatically focus an input when a modal opens, enhancing user experience by removing the need to click.

This section presents traditional testing in angular, guiding how to approach tests for components, services, and directives using Jasmine, while not teaching test writing from scratch.

Test a button toggle component with class-based unit tests, confirming that selecting an option marks it active, deactivates others, and emits the correct event.

Explore guard testing for an angular canDeactivate guard by simulating a dirty form, setting up a test bed, and spying on window.confirm to verify user prompts in Jasmine tests.

Test the rich text pipe's transform method by validating non valid HTML returns empty output, handling empty input, and returning valid content as the original HTML for reliable behavior.

learn how to unit test an Angular copy directive by locally mocking navigator clipboard and document, using spies, and validating success and failure paths.

Learn how to mock HTTP client in Angular unit tests by simulating third-party calls, avoiding real API calls, and returning observable mocks for user data.

Demonstrate testing a user service in the 100 angular challenge by verifying the get by user ID route, http client usage, and mapping data to a user class instance.

Mock a first party user service in the service documentation component to test get by user ID without an API call, returning an observable with a default user.

Apply the interface segregation principle with an abstract user service as a contract for get by user ID returning an observable. Swap to a mock during tests to decouple dependencies.

Write tests for the remaining untested items across components, directives, pipes, and services using test bed and integrated testing. See how testing enables safer refactoring and supports career growth.

Celebrate completing the 100 Angular challenge by building an Angular Material component library and applying the single responsibility principle and the dependency conversion principle, then download your certificate on GitHub.

Discover bonus content linking front end interview questions, algorithms challenges, live streams, and community resources like YouTube, a Facebook group, and the self taught or not podcast.