Master Angular Fundamentals by Building a Real App

Generate a new Angular application, configure routing, fetch back-end data with a service, build a component that consumes the service, and display a spinner and a responsive homes list.

Generate a brand new Angular app with routing and less, serve it locally, and integrate the UIkit framework by updating the index.html with the UIkit links and scripts.

Define the default route in angular routing to redirect to the homes route, generate and import the homes component, and verify the default path displays its content.

Create a mocked homes.json file in the assets folder containing an array of home objects with imageUrl, type, location, and title to simulate backend data for listing in the UI.

Create a data service to fetch homes using the HttpClient and assets json, inject it into the homes component, and display the results with an observable and async pipe.

Learn to display a list of homes by subscribing to data, wrapping in a padded container, and rendering each home’s title, image, type, and location in a card.

Refine the app layout by removing padding and styling type, location, and title, and implement a responsive UK grid with one column on small screens and three on large.

Simulate a two-second delay on the homes list observable and introduce a loading spinner. Refactor the template to display the spinner while data loads.

Learn how to add filter buttons and checkboxes for home type, update the app with selected filters, filter the homes list, and highlight the active filter button.

Add and style filter buttons for home type, dates, and guests, using uk classes for layout and spacing to create a tidy inline button row.

Add a home type filter dropdown and implement a toggle by binding a boolean property, so the dropdown opens and closes when the home type button is clicked.

Create a home type filter form component with checkboxes for apartment, room, and house types, styled with UK grid and a large, right-aligned apply button to filter homes.

Build a reactive form group to capture selected checkboxes for apartment, room, and house. Connect the template with formGroup and formControlName, then handle submit to display which options are selected.

Learn how to set selected filters in the url using Angular router by emitting selected filters, binding outputs, and navigating to the homes path with query parameters.

Refactor the homes component to fetch data using a command pattern, use data service load homes, and drive homes observable with a behavior subject to show a spinner during loading.

Subscribe to the activated route's query parameters to capture filters and load homes. Filter by type on the front end and guard against no filters to avoid spinner.

Introduce default filters from query parameters, bind them to the home type filter component, and highlight the open button when filters are present, ensuring the user interface reflects selected filters.

Learn to add a title-based search that works with existing filtering, enables sharing, shows a no-match message, and limits API calls as users type.

Add a new search component under the filter buttons, generate it via the CLI, paste the framework's search snippet, and remove unused styling and tests.

Connects a single search field to a form group using Angular forms and form builder, then subscribes to valueChanges to log each typed character.

Bind the user search string to the query parameter via an applied event emitter and template binding, emitting on each keystroke to update URL query parameters in real time.

Filter the home listing by the search string in the title from query parameters, and push the filtered results into the homes stream.

Learn to set a default search value from the URL query parameters. Wire the value to the home search input via a default search input property and form group.

Update the homes stream to emit an object with loading and data properties. Update the template to show no homes found when loading is false and data is empty.

Learn how to preserve both search and filter parameters in an Angular app by merging home type and search terms into a single query, updating handlers to reflect combined parameters.

Learn to implement case-insensitive search by converting both stored titles and queries to lowercase in the data service. That ensures downtown keyword matches appear regardless of capitalization.

Throttle api calls by debouncing the search input with RxJS debounceTime and a 500 milliseconds delay, yielding an API call after typing stops. This reduces network load and improves performance.