Build awesome web apps using Angular

Create your first Angular app with the Angular CLI, choose a project name, optionally add routing, install Bootstrap, and run a live-reloading development server to see changes in real time.

Build a click counter component in Angular to demonstrate data binding and OnInit. Provide increment and decrement buttons that update the count via methods and display via interpolation.

Explore how Angular components serve as building blocks and how attribute and structural directives extend templates, manipulate the DOM, and control styling with ngClass, ngStyle, and ngIf.

Explore Angular directives using ngForOf, ngIf, ngStyle, and ngClass to render a people list with images and Bootstrap styling, with data binding, dynamic styles, and deletions.

Develop and apply a custom Angular directive called box directive, using an attribute selector and element reference to style host elements with configurable size, color, and border type.

Create a phonebook app in Angular by structuring a parent component with header, sidebar, and home child components, using routing to view, edit, add, and list contacts with forms.

Create a custom Angular pipe to display a person's age from birth date, formatting years, months, and days with optional flags.

Create a reusable phonebook service in Angular to fetch contact details instead of hardcoding data. Inject the service through the constructor to achieve a single instance and clean data access.

Learn to set up a remote data endpoint for an angular app by installing json-server, creating a contacts.json file, and exposing /contacts with search and pagination.

Consume a rest endpoint in an angular service by importing http client module and subscribing to the observable to populate the component data and initialize it to avoid undefined.

Learn route configuration in Angular to switch views with router outlet and router links, enabling dynamic display of home, contact list, and contact details components.

Access route parameters in contact list via ActivatedRoute, subscribe to the param observable to fetch a contact's details by id, and implement default profile pictures and clickable icons.

Explore angular template-driven versus reactive forms for handling user inputs, including text boxes and selectors, noting reactive forms' robustness, scalability, and testability versus the simplicity of template-driven forms.

Learn to build a template-driven form to add contacts in an Angular app, including a component, routes, and ngModel two-way binding with first name, last name, and gender.

Explore how template-driven forms validate user inputs in Angular by enforcing required fields, min and max lengths, and patterns, disable submit when invalid, and show targeted, styled error messages.

edit a contact using Angular reactive forms to preload details, load data from a phone book service, and update via a form group with form controls.

Learn to add validations to Angular reactive forms with validators API, applying required, min length, email, and phone patterns, and show error messages while disabling the submit button when invalid.

Implement infinite scroll in an Angular app using jQuery to auto-load next page on scroll. Calculate window and document heights, triggering network requests, with an arrow function to preserve context.

Build and deploy an Angular phone book app by building for production, publishing static content to a CDN or hosting, and configuring REST endpoints and base href for proper deployment.