30 Days of Angular: Build 30 Projects with Angular

Install Visual Studio Code on Windows and set up the editor for the course by downloading from the official link, installing, adding a desktop icon, and launching it.

Create your first Angular project by opening a terminal, creating a new project, and running ng serve to build and view the template at localhost:4200.

Create a new Angular project in Visual Studio Code, navigate to the profile card, run ng serve, and remove the default styling and spec file before coding.

Explore string interpolation in Angular by binding data from app.component.ts to the template using double curly brackets to display name, age, and description in a profile card.

Learn how to implement two way data binding in Angular by importing the forms module, binding inputs to model properties, and previewing live updates.

Remember to import the necessary module inside your component, ensure ngModel binding works, and keep variable names matching exactly to avoid errors in your Angular project.

Create a counter status feature in Angular by implementing getCounterStatus to return positive, neutral, or negative, and import the common module for ngSwitch-driven template rendering.

Explore dynamic styling in Angular using the ngStyle directive to conditionally apply colors, such as gray for non-positive and red for negative values.

Create a simple to-do list app in Angular by adding and removing tasks, showcasing a straightforward task management flow.

Create and integrate a new Angular component, wire it into the main app, and implement a simple stopwatch with start, stop, toggle, and reset functions in the template.

Explore the Angular pipe as a shorter formatting shortcut that preserves the same behavior, and observe how removing the pipe breaks formatting, showing time as one digit maximum.

This lecture demonstrates building a number guessing game in Angular, using ngForm, generating a secret number up to 100, managing attempts, validating guesses, and resetting the game with simple styling.

Set up your Angular project by removing the router outlet title and deleting the file, create a new component, generate a tic tac toe component, and test the app.

Finish the project by correcting a typo in the application, test the changes, and confirm the app now works perfectly.

Discover how dynamic list filtering uses Angular data binding and pipes to enable real-time, case-insensitive search across tutorials, products, and lists with a customizable, scalable, reusable filtering pipe.

Clean and streamline your Angular project by tidying the component HTML template, removing test files, and deleting the router outlet to move into coding.

Code the project by setting up forms and common modules, creating a filter pipe, binding search text with ngModel, and rendering a filtered item list in the app component.

Explore how pipes work behind the scenes and why you don’t call them directly. Create, name to match, import, and use the pipe in your template.

Learn practical styling in Angular by enhancing a search box and list items with hover and focus effects, box shadow, centered layout with margin auto, and rounded corners.